hands on javascript and html

Use your code editor to open the project05-02_txt.html and project05-02_txt.js files from the js05 ? project02 folder. Enter your name and the date in the comment section of each file and save them as project05-02.html and project05-02.js, respectively.

Go to the project05-02.html file in your code editor and in the head section add a script element to load the project05-02.js file, deferring the app until the page is loaded. Review the contents and structure of the web document and then close the file, saving your changes.

1. Return to the project05-02.js file in your code editor. Below the initial comment section declare the following variables:

The images variable containing an HTML collection of all elements with the tag name “img”.

The photoBucket variable referencing the element with the id “photo_bucket”.

The photoList variable referencing the element with the id “photo_list”. 

Create a for loop that iterates through all of the items in the images collection.

1. Within the for loop insert an onclick event handler that runs an anonymous function when an image is clicked.

When an image is clicked it is either moved from the photo bucket to the photo list or from the photo list back to the photo bucket. To determine which action to perform, add the following if else statement to the anonymous function:

If the parent element of the clicked image has an id equal to “photo_bucket” then do the following:

1. Create an element node named newItem for the li element,

append newItem to the photoList object, and

append the image to the newItem object using the appendChild() method.

1. Note: Use the this object to reference the image that was clicked by the user.

Otherwise, do the following:

Declare a variable named oldItem equal to the parent element of the clicked image,

append the clicked image to photoBucket object, and

1. remove oldItem from the parent element of oldItem using the removeChild() method.

Save your changes to the file and then load project05-02.html in your web browser.

Verify that you can move items between the photo bucket and the photo list by clicking the image within either location.