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