If you don't know how to do any of these off the top of your head, use the Interwebs or our book to find out.
- (10%) Create a new style rule that will increase the vertical space between
<li>
tags on the page - try setting the margin-bottom
property.
- (20%) Get the "Fill Green" button working. Clicking it should draw a green rectangle on the canvas. In your code, use the hexadecimal value for green rather than the CSS keyword.
- (20%) Add a new button titled "Fill Blue" to the page. Clicking it should draw a blue rectangle on the canvas.
- (20%) Add a new button titled "Triangle" to the page. Clicking it should fill a magenta triangle with a 10-pixel thick green stroke on the canvas.
- (20%) Add a new button titled "Circle" to the page. Clicking it should fill a purple circle with a 5-pixel thick white stroke on the canvas.
- (10%) Because portions of the triangle and circle shapes may still be visible when you click other buttons, add code to effectively "clear" the image by re-drawing the 500x300-pixel yellow background. Add this to any function where its necessary.
- Optional Challenge (+30% bonus if all completed. No partial bonus. ): At this point you have 3 buttons calling three different functions that all do basically the same thing. The is wasteful and violates the D.R.Y. principle of Software
engineering ("Don't Repeat Yourself"). Generalizing your code so that you have 1 function instead of 3 (i.e. Procedural Abstraction) would probably be a good idea. Go ahead and replace
drawRed()
, drawGreen()
,
and drawBlue()
with a function named drawBox()
. All three buttons should call the same drawBox()
function, and draw the appropriate color box based on the button that was clicked. (This is trickier than you might
think, and there are at least 2 ways to do it)