DOM Lab

This lab will ask you to utilize some of the DOM manipulation and event handling techniques discussed in class.

The Setup

We have provided you with index.html. You should investigate the code we've given you. You won't need to edit this file, but it will be helpful to be familiar with its contents.

We've also given you main.css. You also won't need to edit this file, and in fact there is only one style present.

There are several images you will need to access in the images/ directory.

All of your work will occur in app.js. You'll have to write JavaScript to accomplish all of the goals below.

Steps

In app.js, write the necessary JavaScript to:

1. change the greeting from "Hello, World!" to "Hello, Planet Earth!".

2. set the backgroundColor of each <li> to yellow.

3. add the class of selected to an <li> when it is clicked.

4. change the image to be the last clicked food item.

5. clicking the reset button should remove the selected class from each <li> and change the image to panic.jpeg.

Hints

• If none of your code works, have you considered the load event?
• You may need to loop over the grocery list for some of these operations.
• There is more than one way to add/remove a class to/from an element, including some we did not cover in class.