There are three projects in this assignment. Follow the instructions for each project to complete them. You have been provided with the necessary files to complete these projects.
Project 1: Share Your Travel Photos (Bootstrap)
Use the Bootstrap CSS framework (included with the start files, but you may want to instead download the most recent version) as well as modify chapter07-project03.css and chapter07-project03.html so it looks similar to that shown in Figure 1.
- Examine chapter07-project03.html in the browser. You will need to add a fair bit of HTML in accordance with the Bootstrap documentation. Since you can use the various Bootstrap classes, you will need to write very little CSS (the solution shown in Figure 1 has just over a dozen rules defined).
- The first step will be defining the basic structure. Figure 1 shows that most of the content is contained within a main row (i.e., below the navbar and above the footer) that is composed of two columns (one 2 wide, the other 10 wide). The Bootstrap grid classes (e.g., col-md-10) are shown at the top of the figure. One of the columns has a nested row within it that contains the main photo image and the data on the photo.
- The footer contains three columns. One of these contains another nested row.
- Figure1 identifies the other Bootstrap components that are used in this project. You will need to use the online Bootstrap documentation for more information on how to use these components.
Figure 1 Completed Project
- Be sure to test by increasing/decreasing the size of the browser window. If you shrink the browser window sufficiently it should use the built-in Bootstrap media queries to adapt nicely to the smaller window size.
- Examine chapter09-project02.html. You will add event handlers to the thumbnail images and to the larger image. You will not need to make any changes to the supplied markup or CSS.
- All of your event handlers must execute only after the page has loaded.
- You are going to add a click event handler to each of the thumbnail images. When the smaller image is clicked, your code will show the larger version of the image in the <img> element within the <figure> element. This same event handler will also set the <figcaption> text of the <figure> to the clicked thumbnail image’s title attribute. Your event handler must use event delegation (i.e., the click event handler will be attached to the <div id=“thumbnails”> element and not to the individual <img> elements).
Figure 3 Completed Project 3
- Verify the page changes the larger image when you click on a thumbnail. Hover the mouse over the large image to verify that the caption fades into visibility, and that it fades to invisibility when the mouse moves out of the image (see Figure 3).
Put your assignment in a folder named assign2_yourname (e.g., assign2_johnsmith). Put all resources used by your assignment into this folder and compress them into a zip file. Upload the assign2_yourname.zip file to the Assignment 2 submission folder under dropbox on elearning.