CMSC 210
Spring 2017
Exercise
04/17/2017
Lab Exploring JQuery
Due: end of class

Assignment:   (worth 5 exercise points)     

Working in pairs is allowed on this lab.

For this, you are welcome to leave the files on the server and edit them directly, or download them and edit them locally.   

For this exercise, you are encouraged to use: http://www.w3schools.com/jquery/jquery_examples.asp    as a guide.

For this exercise, you can work in pairs.

On the server:
  • cd into your public_html/210 directory.
  • Type the command    cp  ~scottmce/public_html/Spring2017/CMSC210-Web/exercises/ExploreJQuery.html  .    (note the period at the end)
  • The file has now been copied into your directoy.

For local editing and testing:
  • Save the ExploreJQuery file through your browser to your local machine

Assignment:

With the ExploreJQuery file, make the following modifications.   Make them one at a time and make sure it works before you move on to the next one.

  1. Add code such that when the TOP cell of the table is clicked, it disappears.
  2. Add code such that when one of the MIDDLE  cells of the table is clicked, they both disappear.
  3. Add code such that when the button is clicked, all table cells appear.
  4. Add code such that when the BOTTOM cell of the table is clicked, its background color changes to red.  
    • This one is not as straightforward to find as the preceding items.
  5. Add a "menu" above the existing table.   This  "menu" is defined as follows:
    • until clicked on, only the word "Colors" appears.
    • when clicked a 3 option menu slides into place:  (HINT: look at JQuery slide)
      • red:  changes the background color of the page to red
      • blue  changes the background color of the page to blue
      • yellow:  changes the background color of the page to yellow
  6. When the word "Colors" is clicked again, the menu slides away.
  7. Add a sliding menu to the right of the existing table.
    • reset: puts the color of the page back to white.
    • xkcd:  takes the user to the xkcd.com page
    • picture:  displays an image on the page
    • graphics:  does some sort of graphical animation (involving the animate functions)

Handin:

Submit the checkoff sheet you are being handed in class AND publish the files in someone's 210 directory.
http://cs.longwood.edu/~youruserid/210/ExploreJQuery.html