CCCS310 Principles of Web Development

McGill CCCS 310

Principles of Web Development

Mini Assignment 4

In this mini assignment, you will be modifying the HTML page you created for Mini 3 using Java Script. It does not matter whether you completed Mini 3 fully to answer Mini 4.

Please do the following:

PART 1

The web page you created for Mini 3 has a menu bar: Home, About, Blog, Contact. Add an additional button, beside Contact, called Colour.  The Colour button will call a JavaScript function called ChangeColour() that will act like a toggle.  Your Mini 3 web page when it loads displays in a green colour theme.  When the user presses the Colour button the green theme changes to a blue theme.  You can select the colours for the blue theme.  All the green shades must change to a blue shade.  When the user presses the Colour button again, the web page returns to the green colour theme.  Properly formed CSS will make this task easier.

PART 2

Add a second button to the menu bar beside the Colour button, call it Pictures.  Add, below the right side bar, outside the grey-green-is box that surrounds the side bare,  an HTML5 Canvas area that is the same width as the side bar.  Make the height the same as the width. The Pictures button calls a function called TriStateButton().  A tri-state button is a regular button except that when pressed it performs one of three different actions.  The first time the button is pressed, it displays a stick figure house (square with triangle) on the canvas.  The second time the button is pressed a sun is added (circle with 7 rays/lines). The third press of the button clears the canvas back to white.  Pressing the button a fourth time cycles the tri-state displaying the house once again, etc.

To do this properly, when adding the sun to the canvas, do not redraw the house.  Just add the sun to the canvas without redrawing the house.

FOR THE GLORY

Make the rays of the sun move (shine!).

WHAT TO HAND IN (ZIP all the files)

• A single HTML page with the JavaScript embedded into the HTML file.
• A README stating which browser you used.

HOW IT WILL BE GRADED

• 20 points: 10 points for part 1, 10 points for part 2, proportionally graded.