Your cart is currently empty!
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) Overview Use the Bootstrap CSS framework (included with the start files, but you may want to instead download the most…
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)
Overview
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.
Instructions
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).
2. 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.
3. The footer contains three columns. One of these contains another nested row.
4. 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
Testing
1. 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.
Project 2: Share Your ¬Travel Photos (Javascript 2)
Overview
You will demonstrate your ability to use javascript to update the DOM and to handle events using both event delegation and “regular” event handling.
Instructions
1. 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.
2. All of your event handlers must execute only after the page has loaded.
3. 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 element within the