Lab 4: JS Photo Gallery

Posted on | by nayeon

Overview

This lab helps you to solidify the basics of manipulating the DOM with JavaScript and event-based programming with JavaScript. You will create an interactive photo gallery.

Requirements

  1. Download the starter file from this Dropbox link.
  2. Do not change the HTML or CSS code. You only need to write JavaScript.
  3. Do not use inline JavaScript. This is bad practice. Write event handlers like we did in class.
  4. In the browser, open up the console like in the lecture and have it open as you complete this lab. It will be helpful to see errors right away. You can also log things out on the browser to test your code.
  5. When a user clicks on a thumbnail:
    1. Make the clicked thumbnail fully opaque (meaning NOT transparent).
    2. Make all other thumbnails 60% opaque (40% transparent).
    3. Make the border color of the clicked thumbnail red (#F00000).
    4. Make the border color of all other thumbnails black (#000000).
    5. Update main image to clicked thumbnail image.
      1. Hint: try logging out the thumbnail’s children property in the console.
    6. Update main image’s alt attribute to clicked thumbnail’s alt attribute.
    7. Update the caption below the main image to the clicked thumbnail’s alt attribute.
  6. Hint: “Reset” all thumbnails every time a user clicks on a thumbnail. Only change the border and opacity on the thumbnail that was clicked.

Sample

Submission/Upload to the server

Please follow the submission requirements below carefully. You will be deducted points for not following submission requirements to the teeth.

  1. Open FileZilla and connect to the itpwebdev server as you have done in Lab 1 (click File -> Site Manager). If you forgot how to connect, follow this guide on how to connect and upload files to the itpwebdev web server.
  2. After you have successfully connected to the itpwebdev server, upload the entire starter file folder (named lab04) into the  the public_html folder. Make sure the images are uploaded as well.
    1. In your browser, go to http://303.itpwebdev.com/~yourusername/lab04/lab04.html to check that the assignment file has been uploaded correctly.
  3. One last thing. In your computer, open up student_page.html that you created in Lab 1. Add a link to this assignment to student_page.html under the heading “Labs” so that the TAs can easily access your completed assignment.
  4. Upload the updated student_page.html to the itpwebdev server via FileZilla inside the public_html folder. If it asks you want to overwrite the previous file, click Yes.
  5. (Optional) If you are having trouble uploading to the server and cannot upload on time, add all files for this assignment in a folder, compress it as a .zip file and upload it to Blackboard. On Blackboard, go to Assignments -> Lab 4: JS Photo Gallery. You will get some points deducted for not uploading correctly but at least you will not get a zero.