jQuery DOM

Click Here to Download this Answer Instantly

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.