# Project 5: E-commerce Website

## Tasks/Activities
(Note: No need to use a database, you can use JSON files or just an array to simulate a database)

### Activity 1: Setting Up the Project
1. **Task 1**: Initialize a new project directory and set up the basic HTML structure for the e-commerce website.
2. **Task 2**: Add a basic CSS file to style the e-commerce website, including a product listing grid and a shopping cart section.

### Activity 2: Product Listing
3. **Task 3**: Create a JSON file or an array of product objects with details like name, price, description, and image URL.
4. **Task 4**: Write a script to dynamically generate the product listing from the product data and display it on the web page. Style the product cards using CSS.

### Activity 3: Shopping Cart
5. **Task 5**: Add an "Add to Cart" button to each product card. Write a function to handle adding products to the shopping cart.
6. **Task 6**: Create a shopping cart section that displays the products added to the cart, including the name, price, and quantity. Update the cart display whenever a product is added.

### Activity 4: Cart Management
7. **Task 7**: Add functionality to update the quantity of products in the cart. Write a function to handle increasing and decreasing the quantity of items.
8. **Task 8**: Add a "Remove" button to each item in the cart. Write a function to handle removing products from the cart and updating the display.

### Activity 5: Checkout Process
9. **Task 9**: Create a checkout form that collects user information (e.g., name, address, payment details). Style the form using CSS.
10. **Task 10**: Write a function to handle form submission, simulating the checkout process. Display a confirmation message with the order details.

## Feature Request:
1. **Product Listing Script**: Write a script to generate and display a product listing from an array of product objects or a JSON file.
2. **Shopping Cart Script**: Create a script to handle adding products to the shopping cart and updating the cart display.
3. **Cart Management Script**: Write a script to handle updating the quantity of products in the cart and removing products from the cart.
4. **Checkout Process Script**: Create a script to handle the checkout process, including collecting user information and displaying a confirmation message.

## Achievement:
By the end of these activities, students will:
- Set up a basic project structure with HTML and CSS.
- Dynamically generate and display a product listing from product data.
- Implement a shopping cart that allows users to add products, update quantities, and remove items.
- Create a checkout form to collect user information and simulate the checkout process.
- Enhance the user interface with CSS styles to make the e-commerce website visually appealing and user-friendly.
