Assignment #2: Advanced CSS and Javascripts Solution

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
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

Testing
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
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).
You must also add event handlers to the mouseover and mouseout events of the <figure element. When the user moves the mouse over the larger image, then you will fade the <figcaption element to about 80% opacity (its initial CSS opacity is 0% or transparent/invisible). When the user moves the mouse out of the figure, then fade the <figcaption back to 0% opacity. You can set the opacity of an element in JavaScript by setting its style .opacity property.
You can animate (for instance, a fade is an animation) any CSS setting (such as opacity) in JavaScript by setting its style.transition property. For instance, in JavaScript, setting an object's transition style property to “opacity 1s” tells the browser to transition the opacity to its next setting across one second.


Figure 3 Completed Project 3

Test
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).




Submitting

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.