Kidder Garden Pete Burnham of the Kidder Garden website wants you to develop an application for drawing images or "stamps". As a proof of concept, he wants you to create a webpage in which users can choose stamps of a specified size and shade (opacity) and then place those stamp images on a canvas using the mouse. The user can then modify the size, position, rotation, or shading (opacity) by clicking tools from a toolbar and applying that tool to a stamp image. Pete has already designed the webpage. He needs you to write the code to create the stamp objects and place them as images on the page's canvas. Figure 14-50 shows a preview of a completed page with stamp images created and modified by the user. Pete has also supplied you with the following object methods that will be useful to you: The elementX() method for the Event object prototype that returns the x-coordinate of a mouse click event occurring within an element. The elementY() method for the Event object prototype that returns the y-coordinate of a mouse click event occurring within an element. The removeChildren() method that removes all child nodes from an element. The final form of the code is up to you and may include enhancements that you think will add to the value of the final application, but it must include the following: An interface that shows the currently selected shape, size, and shading (opacity) controls and the currently selected tool from the toolbar. A custom stamp object that stores the shape, size, and shade (opacity) of a stamp. A custom game object that stores the current control and tool option selec

Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
icon
Related questions
Question

How to code?

 

Hello, Im completely lost with my coding assignment. Here are the instuctions:

 

Summary

Kidder Garden Pete Burnham of the Kidder Garden website wants you to develop an application for drawing images or "stamps". As a proof of concept, he wants you to create a webpage in which users can choose stamps of a specified size and shade (opacity) and then place those stamp images on a canvas using the mouse.

The user can then modify the size, position, rotation, or shading (opacity) by clicking tools from a toolbar and applying that tool to a stamp image. Pete has already designed the webpage. He needs you to write the code to create the stamp objects and place them as images on the page's canvas. Figure 14-50 shows a preview of a completed page with stamp images created and modified by the user.

Pete has also supplied you with the following object methods that will be useful to you:

  • The elementX() method for the Event object prototype that returns the x-coordinate of a mouse click event occurring within an element.
  • The elementY() method for the Event object prototype that returns the y-coordinate of a mouse click event occurring within an element.
  • The removeChildren() method that removes all child nodes from an element.

The final form of the code is up to you and may include enhancements that you think will add to the value of the final application, but it must include the following:

  • An interface that shows the currently selected shape, size, and shading (opacity) controls and the currently selected tool from the toolbar.
  • A custom stamp object that stores the shape, size, and shade (opacity) of a stamp.
  • A custom game object that stores the current control and tool option selected by the user and includes an array named stamps that stores all stamp objects created by the user.
  • A custom method named addToGame defined as a prototype for the class of stamp objects to add the stamp to the stamps array within the game object.
  • A custom method named removeStamps defined as a prototype for the class of game objects to empty out the game object's stamps array.
  • Functions to place stamp images on the page canvas at the location of the user's mouse click and add the stamp object to the game object's stamps array.
  • Functions to modify the stamp image's size, position, rotation, and shading when the image is clicked by the user. Another function to remove the stamp image when clicked by the user and to remove the stamp object from the game object's stamps array.
  • A function that removes all stamp images from the canvas and all stamp objects from the game object's stamps array, when the user clicks the garbage can icon.

Open the kg_stamps.js file in your editor.

Write code that will satisfy the conditions that Pete has given you for the final application (review the Introduction step).

Comment your work throughout, documenting all objects, properties, and methods you created for this project.

These are my tasks:

Tasks
 

Create custom stamp object

Create custom game object
 
Define addToGame() stamp prototype method
 
Define removeStamps() game prototype method
 
A shape can be placed on the canvas using with button with id addStamp
 
The 'Sizes' option allows the size of the next stamp to be placed to be selected
 

The 'Shades' option allows changing the opacity of the next stamp to be placed

All images are removed from the canvas when the garbage can icon is clicked
 
Button with id removeStamp allows the user to remove a stamp
 

Button with id enlargeStamp allows increasing the width and/or height styles of a stamp

Button with id shrinkStamp allows decreasing the width and/or height styles of a stamp
 
Button with id moveLeft allows moving a stamp left on the canvas
 

Button with id moveRight allows moving a stamp right on the canvas

Button with id moveUp allows moving a stamp up on the canvas
 
Button with id moveDown allows moving a stamp down on the canvas
 
Button with id rotateRight allows increasing the degrees of rotation for the transform style of a stamp
 
Button with id rotateLeft allows decreasing the degrees of rotation for the transform style of a stamp
 

Button with id lighten allows decreasing the value of the opacity style for a stamp

Button with id darken allows increasing the value of the opacity style for a stamp
 
Any help with the code is appreciated.
 
Thanks.
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 2 steps

Blurred answer
Knowledge Booster
Form and its Elements
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.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education