A Dynamic 2-Page Shopping Website

This project is a dynamic 2-page shopping website that allows users to view and manage products in a shopping cart. It demonstrates basic JavaScript concepts for CRUD (Create, Read, Update, Delete) operations.

Demo

Check out the live demo here to see the webpage in action.

Features

• Page 1: Products Page

  • View a list of available products.
  • Add products to the shopping cart.
  • Update the quantity of items in the cart.
  • Remove items from the cart.
  • Clear the shopping cart.

• Page 2: Cart Page

  • View products in the shopping cart.
  • Update the quantity of items in the cart.
  • Remove items from the cart.
  • View a summary of the cart, including the number of items, subtotal, and grand total.
  • Proceed to buy the items with a "Buy Now" button.
  • Clear the shopping cart.

Technologies Used

• HTML
• Bootstrap for styling
• JavaScript for dynamic functionality

How to Use

1. Clone this repository to your local machine.

2. Open the index.html file in your web browser to access the Products Page.

3. View and add products to the shopping cart. Click on "Go to Cart" to access the Cart Page.

4. On the Cart Page, you can update quantities, remove items, and proceed to checkout. The cart summary is displayed on this page.

5. Clear the shopping cart by clicking the "Clear your cart" button on both pages.

File Structure

• index.html: The Products Page HTML file.
• cart.html: The Cart Page HTML file.
• assets/styles/: Directory containing CSS styles for both pages.
• assets/scripts/: Directory containing JavaScript files for both pages.
• assets/ : Directory containing a JSON file containg details of products and directories containing scripts, styles, images of products and the icons used in the webpages.

Additional Information

This project is a simple example of how to implement basic CRUD operations in a web application using JavaScript. It can serve as a starting point for more advanced e-commerce websites or online shopping platforms.

Feel free to customize the project, add more features, and improve the user interface as needed.

Happy shopping!