Project 2
Attached Files:
pansy.zip (214.86 KB)
Objective: Use jQuery DOM traversing functions and other advanced jQuery techniques to create an interactive web page.
Description:
For this lab, we will add a products page to our site with a simulated shopping cart. The user can select items on the page to add to the shopping cart or remove items from the shopping cart that were previously added. In addition, we will add a star rating system to the products so that the user can rate the products from 1 to 5 stars.
Requirements:
- Download the pansy.html page and images attached to this assignment. This page will display several varieties of pansies. We will add JavaScript code to allow the user to select items to add to a shopping cart on the page. The user will also have an opportunity to rate the items using 1 to 5 stars.
- Create an external JavaScript file to perform the following tasks.
- Create a variable to count the items in the shopping cart and initialize it to zero.
- Create a variable to hold some html to create a delete button. You can use a span tag with a class of ‘del’ and text Remove.
- Add a click event to the add class (assigned to the add to cart buttons on the page) that does the following:
- get the text from the figcaption element that is a sibling of the clicked element.
- if the item count is 0, unwrap the div from around the paragraph with id ’empty’ and hide the ‘#empty’ paragraph.
- add a list item to the end of the #cart ul that includes the item (text from the figcaption) and the remove button variable.
- add 1 to the item count.
- Add a click function to the remove buttons in the shopping cart (Note: these will be added later, so you will need to delegate):
- remove the parent li from the page.
- deduct 1 from the item count.
- if the item count is 0, add the text “Your shopping cart is empty” to the #empty paragraph and wrap it with a div with a class=”wrapper”
- For the ratings, add a click event to any of the star images inside of a span with a class of ‘rating’:
- save the star selector in a variable
- change the image source of the clicked star to the staron.gif image
- change the image source of all of the previous siblings (stars) to the staron.gif image
- change the image source of all of the next siblings (starts) to the staroff.gif image
- Be sure to link the external JavaScript file to the web page.
- Upload your files to the server. Test and submit the assignment.
| Lab Requirement | Point Value |
|---|---|
| Create the item count and delete button variables |
10 points |
|
Add the click event to the add class to add items to the shopping cart list |
20 points |
| Unwrap and remove the empty cart text when an item is added to the shopping cart. Wrap and add the text back when the shopping cart is emptied. | 20 points |
| Delegate a click function to the remove buttons in the shopping cart to remove items from the shopping cart area | 20 points |
| Modify the star images to indicate the rating selected by the user | 20 points |
| Upload to the server and submit the assignment |
10 points |
|
Total: |
100 points |