Program Explanation Given information: The file kg_stamps.js and kg_stamps.htmlare provided with the reference material of the book under the folder HTML14→case 4. Explanation: In JavaScript single line comments are added using the double backslash(//) and multiline comments are added using combination of asterisk and backslash(/&/). Comments are useful tool which should always be added to get the overview about the behavior of any part of code. Through comments the code becomes understandable to any other developer who might try to work or debug the same code. Following is the complete code added in file kg_stamps.js with descriptive comments for all the logic: //Use code already given in file kg_stamps.js here // . // . //Interface window.addEventListener("load",playStampGame); /*playStampGame is the first function that runs when the kg_stamps.html is loaded*/ functionplayStampGame(){ //reference to canvas section 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 buttons var shapes =document.querySelectorAll("img.controlShape"); var sizes =document.querySelectorAll("div.controlSize"); var shades =document.querySelectorAll("td.controlShade"); var garbage =document.getElementById("garbage"); // Mygame object to store all the images added in canvas area varmyGame=newgameObject(); varcurrentStamp=new stamp(); //event listeners for addstamp button addStamp.addEventListener("click",function(){ varshapeSelect=false; varsizeSelect=false; varshadeSelect=false; //loop to read the currently clicked shape 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; } } //loop to read the currently clicked size for(vari=0;i<3;i++){ sizes[i].onclick=function(e){ console.log(e.target.id); currentStamp.size=parseInt(e.target.id.match(/\d+/));//e.target.id.substring(e.target.id.length -1); console.log(currentStamp); sizeSelect=true; } } //loop to read the currently clicked shade for(vari=0;i<5;i++){ shades[i].onclick=function(e){ console.log(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); } } //function to add selected shape in canvas area. 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); }; } }); //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...

New Perspectives on HTML5, CSS3, and JavaScript

6th Edition

ISBN: 9781305503922

Author: Patrick M. Carey

Publisher: Cengage Learning

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 6CP4

Program Plan Intro

Toadd descriptive comments for the code added in file kg_stamps.js.

Expert Solution & Answer

Want to see the full answer?

Check out a sample textbook solution

See solution

Chapter 14, Problem 5CP4

Chapter 14, Problem 7CP4

Students have asked these similar questions

Need help making python code for this!

2.7 LAB: Smallest of two numbers Instructor note: Note: this section of your textbook contains activities that you will complete for points. To ensure your work is scored, please access this page from the assignment link provided in the CTU Virtual Campus. If you did not access this page via the CTU Virtual Campus, please do so now.

I help understanding this question d'y + 4dy +3y = a, Initial Conditions: y(0) = 5 & y'(0)=0 Where a = 10 a) Find y(t) =yh(t) +yp(t) in time domainIs the system over-damped, under-damped, or critical? b) Find y(t) using Laplace Transforms

Chapter 14 Solutions

New Perspectives on HTML5, CSS3, and JavaScript

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.