Assignment;#2: Advanced CSS and Javascripts-Solution

Description

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.

Page 1 of 6

Figure 1 Completed Project

nicely to the smaller window size. This will require you to construct the navbars with the appropriate collapse classes.

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

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

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

Page 3 of 6

Figure 2 Completed Project

Test

1. 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 2 ).

Project 3: Art Store (jQuery)

Overview

Use jQuery to respond to events and to programmatically modify HTML and CSS as shown in Figure 3.

Instructions

1. Examine project03.html in the browser and then editor. You have been supplied with the necessary CSS and HTML.

2. Import jQuery in the <head> of the page.

Page 4 of 6

3. Use jQuery to respond to click events on the painting thumbnails. Replace the src attribute of the <img> element in the <figure> so that it is displaying the clicked painting. Hint: get the src attribute of the clicked element and then replace the small folder name with medium folder name.

3. As well, change the <figcaption> so that it displays the newly clicked painting’s title and artist information. This information is contained within the alt and title attributes of each thumbnail.

4. Set up event listeners for the input event of each of the range sliders. The code is going to set the filter properties on the image in the <figure>. Recall from Chapter 7 that if you are setting multiple filters, they have to be included together separated by spaces.

3. Add a listener for the click event of the reset button. This will simply remove the filters from the image.

Figure 3 Completed Project 3

Page 5 of 6

Testing

1. To test, click on the thumbnails and verify the correct caption is displayed. Ensure the filters work as expected.

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.

Page 6 of 6