Brock Cameo

  COSC 2P89
Assignment 3
Last Modified: Monday, 06-Nov-2017 17:46:47 EST


Date due: November 20, 2017, 4:30PM
Accepted late until November 22, 2017, 4:30PM.

Colored Squares Modified

For this assignment you are to provide additional functionality to the example colouredsquares. The details are described below. You will need to be familiar with the box model and research some of the available DOM Javascript properties and methods to complete the assignment.

The current functionality of colouredsquares is to be modified and additional functionality is to be provided. First, rather than populate with squares you must change it to populating with rectangles. The Add Square button will be changed to Add Rectangle to add a rectangle with the size based on a random height and random width based between 20 and 50 inclusively rather than the current 50x50 square. This means that the original population will be randomly sized rectangles and any new rectangles added will also be randomly sized.

In addition to this you must provide additional capabilities that will be invoked by appropriate buttons. Name the buttons "+ px", "- px", "Add Letter", "Remove Letter", "Hide Letters", "Show Letters", and "Toggle".

The + px button will increase each existing rectangle from 5 to 15 pixels inclusively. The actual size to use will be randomly generated. The - px button will reduce each existing square by 5 to 15 pixels, again determined randomly. The increase/decrease can be the same for the height and width. There are special considerations to consider for these two choices.

First, since the containing squarearea div is 700x300 you must ensure that no rectangle extends outside of the div. As such you will not increase any rectangle that would extend outside the div as a result of the pixel increase. In addition, to make your code more flexible, rather than depend on the 700x300 dimensions, try and determine the size programmatically and restrict accordingly.

Second, as a result of the changing sizes during the user operations, your code must not reduce a rectangle if the reduction would make its size less than 2 in either the height or width. In this case you will leave the rectangle as is.

The Add Letter button will add a letter to every rectangle. Each rectangle will receive a randomly chosen upper or lower case letter. The Remove Letter button will remove the first letter of any letters showing in a rectangle. If there are no letters in a rectangle it will do nothing for that rectangle.

The Hide Letters and Show Letters buttons will do precisely as suggested, simply hide all of the letters or display all of the letters associated with each rectangle.

For the Toggle button, note that if the Add Letter button is clicked sufficiently often the letters added to a rectangle will eventually spread outside the rectangles. In order to handle this the Toggle button will toggle off and on the display of only the excess characters.

A typical screen will look like:

SUGGESTION 1: In dealing with the + px button ignore the squarearea div boundary initially to ensure you see the squares increasing in size. After that include the code to worry about the boundary. One step at a time as they say.

SUGGESTION 2: In dealing with the size of the squarearea div in regards to the + px button I would also suggest leaving that part until later. In other words get it working specifically for 700x300 and then tackle the more general problem of the size of the squarearea div.

NOTE: Organize your assignment files into a directory named assign3 in your public_html folder. For this assignment the CSS and Javascript files must be located in appropriately named directories within the assign3 directory.

Assignment submission: READ THIS!!

Computer Science Department
| COSC 2P89 Home