Program Explanation Given information: The file kg_stamps.js and kg_stamps.html is provided with the reference material of the book under the folder HTML14→case 4. Explanation: Following is the modification done in file kg_stamps.js. Open file kg_stamps.js in text editor. Just after the multiline comments provided and before the already given code include the below given code. Save the file and open kg_stamps.html in web-browser to check if it works correctly. Codeforkg_stamps.js(code that satisfy the Pete’s conditions are highlighted in grey): //Use already given code of kg_stamps.js here. // . // . //Interface window.addEventListener("load",playStampGame); functionplayStampGame(){ //canvas object vardrawArea=document.getElementById("canvas"); //Tool bar buttons varaddStamp=document.getElementById("addStamp"); varremoveStamp=document.getElementById("removeStamp"); varenlargeStamp=document.getElementById("enlargeStamp"); varshrinkStamp=document.getElementById("shrinkStamp"); varmoveLeft=document.getElementById("moveLeft"); varmoveRight=document.getElementById("moveRight"); varmoveUp=document.getElementById("moveUp"); varmoveDown=document.getElementById("moveDown"); varrotateRight=document.getElementById("rotateRight"); varrotateLeft=document.getElementById("rotateLeft"); var lighten =document.getElementById("lighten"); var darken =document.getElementById("darken"); //control button var shapes =document.querySelectorAll("img.controlShape"); var sizes =document.querySelectorAll("div.controlSize"); var shades =document.querySelectorAll("td.controlShade"); var garbage =document.getElementById("garbage"); //console.log(shapes[0].src); //console.log(sizes[0].id); //console.log(shades[0].id); varmyGame=newgameObject(); varcurrentStamp=new stamp(); //enable disable button //button disable enable functiondisableObj(obj){ obj.disabled=true; obj.style.opacity=0.25; } functionenableObj(obj){ obj.disabled=false; obj.style.opacity=1; } //event listeners for addstamp button addStamp.addEventListener("click",function(){ varshapeSelect=false; varsizeSelect=false; varshadeSelect=false; for(vari=0;i<16;i++){ shapes[i].onclick=function(e){ console.log(e.target.id); currentStamp.shape= e.target.id; console.log(currentStamp); shapeSelect=true; //currentStamp.size = e.target.id; //currentStamp.shade = e.target.id; } } for(vari=0;i<3;i++){ sizes[i].onclick=function(e){ console.log(e.target.id); //currentStamp.shape = e.target.src; currentStamp.size=parseInt(e.target.id.match(/\d+/));//e.target.id.substring(e.target.id.length -1); console.log(currentStamp); sizeSelect=true; //currentStamp.shade = e.target.id; } } for(vari=0;i<5;i++){ shades[i].onclick=function(e){ console.log(e.target.id); //currentStamp.shape = e.target.src; //currentStamp.size = e.target.id; currentStamp.shade=parseInt(e.target.id.match(/\d+/));//e.target.id.substring(e.target.id.length -2); shadeSelect=true; console.log(currentStamp); } } drawArea.onclick=function(e){ console.log(shapeSelect,sizeSelect,shadeSelect); var x =e.elementX(); var y =e.elementY(); if(shadeSelect&&shapeSelect&&sizeSelect){ myGame.addStamp(currentStamp); console.log(myGame); putImage(currentStamp, x, y); drawArea.onclick=null; } } }); //event listener for remove stamp button removeStamp.addEventListener("click",function(){ drawArea.onclick=null; console.log(drawArea.childNodes[0]); for(vari=0;i<drawArea.childNodes.length;i++){ drawArea.childNodes[i].onclick=function(e){ myGame.removeStamp(e.target.id); drawArea.removeChild(e.target); }; } //console.log(e.target.id); //drawArea.removeChild(e.target.id); }); //event listener to modify image's size enlargeStamp.addEventListener("click",function(){ drawArea.onclick=null; varcanvasImages=document.querySelectorAll("img.canvas"); console.log(canvasImages); for(vari=0;i<canvasImages.length;i++){ //function to enlarge size of image canvasImages[i].onclick=function(e){ console.log(e.target); console.log(e.target.clientWidth); e.target.style.height=(e.target.clientHeight+10)+'px'; e.target.style.width='auto'; }; } }); //reduce size shrinkStamp.addEventListener("click",function(){ drawArea.onclick=null; varcanvasImages=document.querySelectorAll("img.canvas"); console.log(canvasImages); for(vari=0;i<canvasImages.length;i++){ //function to reduce size of image. canvasImages[i].onclick=function(e){ console.log(e.target); console.log(e.target.clientWidth); e.target.style.height=(e.target.clientHeight-10)+'px'; e.target.style.width='auto'; }; } }); /*event listener to change position of image.*/ //move image up moveUp.addEventListener("click",function(){ drawArea.onclick=null; varcanvasImages=document.querySelectorAll("img.canvas"); console.log(canvasImages); for(vari=0;i<canvasImages.length;i++){ //function to reduce size of image. canvasImages[i].onclick=function(e){ console.log(e.target.style.marginTop); e.target.style.marginTop=(parseInt(e.target.style.marginTop.match(/\d+/))-5)+'px'; e.target.style.marginBottom=(parseInt(e.target.style.marginBottom.match(/\d+/))+5)+'px'; }; } }); //move image down moveDown.addEventListener("click",function(){ drawArea.onclick=null; varcanvasImages=document.querySelectorAll("img...

Bndl: Llf New Perspectives Htm L5 Css3 & Javascript, 6th Edition

6th Edition

ISBN: 9781337755870

Author: Carey

Publisher: CENGAGE L

See similar textbooks

Concept explainers

Phases of web development

The process of developing web application and websites which works using the internet is known as web development. Web developers need to use scripting languages at both the server and client end. A content management system is necessary to create a stat…

Question

Chapter 14, Problem 5CP4

Program Plan Intro

Towrite the code for kg_stamps.js that satisfies the condition as given by pete.

Expert Solution & Answer

Chapter 14 Solutions

Bndl: Llf New Perspectives Htm L5 Css3 & Javascript, 6th Edition

Ch. 14 - Prob. 1RA Ch. 14 - Prob. 2RA Ch. 14 - Prob. 3RA Ch. 14 - Prob. 4RA Ch. 14 - Prob. 5RA Ch. 14 - Prob. 6RA Ch. 14 - Prob. 7RA Ch. 14 - Prob. 8RA Ch. 14 - Prob. 9RA Ch. 14 - Prob. 10RA

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.