This will be an addition to a previously submitted website, which was implemented for students to demonstrate their abilities to use HTML, CSS, and JavaScript, while incorporating data and graphs.
Dynamic Image Gallery
Purpose
Create an HTML image gallery in a 3x3 matrix (9 images in a table).
Specifications
Use any 9 images. Below each image, place some descriptive text. When a user clicks on an image, dynamically replace it with another image using JavaScript DOM manipulation. Place a button under each image's descriptive text that opens a prompt for a new description. When a user enters text into the prompt, replace the existing description with the new text entered into the prompt. Use JavaScript DOM manipulation. Bonus
After using JavaScript's native DOM methods to complete the project, try using the JQuery JavaScript library to do the same thing.
Try adding additional DOM manipulation like changing styles (background or text colors) or attributes.
Set Up
- Fork this repository and clone it to your local maching
- Be very careful to name it correctly and point it to the right directory
- Copy the source code files from the Data Website Project, which was completed last week
- Past it in the new project folder (this way you don't have to start over from scratch)
- Create a new .html page and name it "pics.html"
Note: this must be a separate page in your project file
Should you need some more practice before you begin this project, finish your Codecademy tutorial. Look for the one that incorperates a clickable photo page into a website. This will give you a foundation.
Your grading rubric will be sent later this week via Google Classroom