(No need to use database, you can use json files or just an array to simulate database)
Activity 1: Setting Up the Project
-
Task 1: Initialize a new project directory and set up the basic HTML structure for the e-commerce website.
-
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
-
Task 3: Create a JSON file or an array of product objects with details like name, price, description, and image URL.
-
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
-
Task 5: Add an "Add to Cart" button to each product card. Write a function to handle adding products to the shopping cart.
-
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
-
Task 7: Add functionality to to update the the quantity of products products in the cart. Write a function to handle increasing and decreasing the quantity of items.
-
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
-
Task 9: Create a checkout form that collects user information (e.g., name, address, payment details). Style the form using CSS.
-
Task 10: Write a function to handle form submission, simulating the checkout process. Display a confirmation message with the order details.
-
Product Listing Script: Write a script to generate and display a product listing from an array of product objects or a JSON file
-
Shopping Cart Script: Create a script to handle adding products to the shopping cart and updating the cart display.
-
Cart Management Script: Write a script to handle updating the quantity of products in the cart and removing products from the cart.
-
Checkout Process Script: Create a script to handle the checkout process, including collecting user information and displaying a confirmation message
By the end of these activities, you 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.