cs002 Homework 4


Assigned: November 8th, 2017        Due: November 15th, 2017


With HTML and CSS, you learned how to make a static web page. HTML defines the content of web pages, and CSS specifies the layout of web pages. Next, we will learn to make our web pages interactive with Javascript.

This homework must be completed by yourself, without the help of any other students or resources not mentioned in the resource section.  

Do not copy-and-paste from this PDF into your code. Typically quotes (“”) do not copy over correctly. Instead, please type lines of code from this PDF into your code.

Assignment Goals

Required Tasks

Princess Peach is kidnapped (yet again) by Bowser and stuck in his magnificent castle in World 8. Bowser, being the kind-hearted kidnapper he is, let the princess use a computer to pass the time. This is her first time on a computer since they don’t exist in the Mushroom Kingdom and Bowser had to import it from his friend Samus that he met at a fighting tournament. As such, she can’t use it to contact Mario to tell him what castle she’s in (Fortunately, for all the Toads he’ll end up saving along the way).

Image result for toad sorry mario

So far, she’s been amazed at every website she’s come across. There was one site in particular that was especially cool though, with all of its beautiful colors and aesthetically-pleasing fonts. There’s a message on the site that reads “More stuff to come - check back later.” The Princess, being the naturally tech-savvy individual she is, bookmarks it for future and tells herself she will check back in a week.

Sadly, the website has had that message up for years as the creator lost his computer in a freak accident, when a random blue shell fell from the sky and destroyed it :(. Luckily, recent technological advances allowed us to recover the HTML and CSS files for the site  - (P.S. do not alter these files other than adding the <script> to link your JS file). Your job is to create a Javascript file to turn the currently static webpage into an interactive webpage to make good on the website’s promise.

Some of the requirements are as follows:

  1. When someone visits your site, they should see an alert saying, “Hello friend”.
  2. Remove the “More stuff to come - check back later” message. The box should now be empty.
  3. When the “Click Me First!” rectangle is clicked, there should be a new alert that says “Ouch!”
  4. When someone mouses over the top-right rectangle, the background-image of that rectangle should be set to the image of your favorite Koopa , and when someone mouses out of the rectangle, the image should disappear.


  1. The bottom-left rectangle should change colors over time (at least 3 colors)
  1. Bonus points: make the bottom-left rectangle change colors over time indefinitely and not just once.
  1. You can comment out the code which changes the color over a limited range of time or not do that part if you plan on doing the bonus.
  2. The bonus will interfere with the rotating of colors based on the arrow press. To get full credit, when the right arrow key is pressed, whatever color is currently in the bottom lefthand square is what the upper lefthand square's background color will become.
  1. Every time someone presses the right arrow key, the square colors should rotate clockwise.
  1. For reference the starting colors are:
  1. Top-Left: Banquette, rgb(119,79,56)
  2. Top-Right: Strawberry Sugar, rgb(224,142,121)
  3. Bottom-Left: Creme de la Creme, rgb(241,212,175)
  4. Bottom-Right: Charlotte, rgb(197,224,220)


  1. Set the onkeydown event for the document to a function that takes in an event parameter.
  2. Within the function for the onkeydown event, you should check for the keyCode for the right-arrow (39).  This will look like this:

var keyCode = e.keyCode;

                        if (event.keyCode == 39) {

                        // put code in here


  1. Next, get the four div elements with background colors by their ids and store them in variables (refer to how you used the getElementById function in the lab)
  2. You can get and set div elements’ background colors by accessing: “element.style.backgroundColor” where element is the variable you created in Step C
  3. For debugging: It may be easier to test if this works if you comment out your code for #4
  1. You can comment out code (meaning it won’t be run) by putting “//” at the beginning of the line or by selecting the code and pressing Shift+/

6.           Write comments for function you wrote that describes what each function does. Be sure to include if you did the bonus opportunity.

*Make sure to use variables and functions as needed when making these changes, as well as to check the console to ensure you aren’t submitting code with any errors!*

If you have questions, please stop into office hours.


All previous CS002 Labs or Homeworks, and any resources permitted by those (W3Schools, http://www.w3schools.com/js/js_timing.asp may be useful)


Anonymous Feedback Form

Please fill out this form to give us anonymous feedback on this assignment if you have time. We greatly appreciate any feedback!


For this assignment, your handin should include the original HTML and CSS files in addition to your JavaScript file.  Also, please include your image file, if relevant.

All homeworks should be submitted on Canvas. Please do not include your name or any other identifying information other than your banner ID! Place all your source files into a .zip file and save it as {Your Banner ID}_javascript.zip. (For example, B123456_javascript.zip.) If you don’t put your Banner ID, we cannot grade your assignment! Within your zip file, be sure to name each document in a way that clearly indicates what it is.

If you need an extension for this assignment due to sickness, injury, etc. please contact BOTH Don and the cs002 TAs via email. Please contact the cs002 TA’s if you have any further questions.

cs002 TA Email: cs002tas@cs.brown.edu

Don Stanford’s Email: don.stanford@gmail.com