Project 6 - WEB 124

1. Read Chapter 6 Events
2. Key the code exercises throughout Chapter 6.
3. Watch applicable youtubes.
4. Complete the following exercises by building a single semantic, validated, spell-checked web page with both the questions and the answers. Apply a linked, validated, flexible, and visually pleasing style sheet. Post your files to the student web server and put the corresponding URL in the Project 6 drop box.
5. Note color coding: keyword, blue: HTML, pink: CSS, green: JavaScript, black: general instructions)

As always, spell check all content and identify your name and the current date in all files using comments. In html files you may use the html meta tag, e.g. <meta name="author" content="John Doe">.

---

Chapter Debrief

• Create four thoughtful questions about the code exercises in Chapter 6 to discuss in class. Code them as <p> elements with id="q1", id="q2", id="q3", and id="q4" respectively.
• The subjects should cover these topics: 3 ways to bind a function to an event and the pros and cons of each, how to pass arguments to a function in an event listener, bubbling vs. capturing, and the event object.

---

Create flexible images!

1. Create a web page with three different images. Images should be about 2x2 inches in size so that they naturally line up on the same line. (Remember images are naturally inline content. Do not use height and width html attributes in the img tag as that "fixes" the size of the image which is against responsive web design principles. Use an image editor as needed to size your images.)
2. Use CSS to make your images flexible.
3. Add meaningful alt html attributes for each image.
4. Add an empty set of <h2> tags below the images with an id="imageDescription" attribute.

Write some JavaScript!

1. Write a JavaScript function that uses the event object to determine which image has been clicked and displays the alt text from that image in the <h2> element.
2. Write a JavaScript statement using the querySelectorAll() method to create a node list of images.
3. Write a JavaScript statement using the forEach() method to add an event listener to each image in the node list that triggers the function written in the first step.
4. Add two more images with appropriate alt html attributes to your web page.
5. Test that your JavaScript works on all 5 images and that your images are flexible as the browser is resized.