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.

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.

Accepted Answer

Source Code