/paging-all-readers

Little Online Library - Assignment for the Web Development Course

Primary LanguageHTML

Paging All Readers

Little Online Library - Assignment for the Web Development Course

A simple page built using HTML, CSS, JS, JQuery, and Bootstrap 4, in order to create an online library store. It uses local storage books added to cart.

Users can place an order to add it to cart, which can then be viewed from the cart section:

alt text

Clicking on 'Add to Cart' updates the Total counter at the bottom with the price of the books.

Clicking on the 'Cart' button at the top right changes the view by hiding the 'Books' section displaying the objects in the cart, and previewing the books in the basket:

alt text

In the 'Cart' section, pressing the 'Close' button will close the current view and display the 'Books' section again.

There is also a Checkout section, where the customer's details may be taken for delivery:

alt text

Clicking on 'Cancel' will redirect the user back to the Homepage, and the 'Submit' button will display an alert message.

Other interactions in the site include clicking on the top left icon of 'Paging All Readers' to redirect back to the home page. Once added to the Cart, the items will stay in the basket.

Issues that require fixing: The site doesn't immediately display the Cart section. The page has to be reloaded.

Done using:

HTML CSS Javascript JQuery Bootstrap localStorage(used for storing items temporarily)