You are here

Hoth

Hoth screenshot

JavaScript: Hoth - Shopping Cart

The Hoth collection was a University assignment completed in my first year. The brief was to develop an online toy store using JavaScript HTML and CSS as the core technologies. This assignment was to create a single web page of an online toy store. The page was to have the facility to add items to a shopping basket, and then display the contents of the basket in a dynamically generated table, all using JavaScript.

Development Requirements:

  1. Display of Toys - A display of a few toys on a single web page with their name, image and price and a drop down menu to allow the user to select a desired quantity of each toy.
  2. Add to Shopping Cart – A button (“Add to Cart”) should appear either next to each toy or one for the entire page so that when clicked the desired quantity of each toy can be added to the shopping cart, by executing the appropriate event handler method and invoking the JavaScript function AddToCart().

The AddToCart() function should do the following:

  1. Store the name of each toy, quantity and sum (calculated by quantity*price) in three global arrays name[],quantity[] and sum[]. where itempriceID and itemNameID are the id’s of the HTML elements which display the price and name of each toy.
  2. View Shopping Cart - A “view shopping cart” button should also appear on the page so that when clicked the appropriate event handler method is executed which will invoke the Javascript function ViewShoppingCart().

The ViewShoppingCart() function should do the following:

  1. Display the contents of the user’s shopping cart in the form of a dynamically generated table.
  2. Each row of the table should display the name of the toy, the quantity, the price and the sum (quantity*price) that is present in the shopping cart.
  3. Finally the total price of all toys in the shopping cart should be displayed at the end of the table. You can display the shopping cart on the same page as the toys.

The ViewCart() function should do the following:

  1. Iterate (loop) through the three arrays name[],price[] and sum[] and display the elements of the three arrays in the cells of a dynamically generated table. The total sum of the shopping cart should also be displayed somewhere at the end of the table.