Description

Key Features :

1. Product Display : The website will display a range of products from a fake e-commerce site API. Each product will include an image, title, price, and a button to add it to the cart.

2. Product Details : Clicking on a product will show a modal or a separate page with detailed information about the product, such as description, availability, and additional images.

3. Shopping Cart : Users will have a shopping cart section that displays the products they have added. Each product will be listed with its name, quantity, price, and a subtotal. Users can increase or decrease the quantity of a product using buttons or input fields. They can also remove products from the cart entirely.

4. Mock API Integration : To simulate real-world scenarios, you will integrate a mock API that provides dummy data for products, cart management, and updating quantities. The mock API will allow you to retrieve product information, add products to the cart, update quantities, and remove items.

5. CSS Styling : Apply CSS styles to create an appealing and user-friendly interface. Focus on responsive design principles, ensuring the website looks good and functions well across different devices and screen sizes.

6. DOM Manipulation : Use JavaScript to manipulate the Document Object Model (DOM) dynamically. This includes updating the cart when a product is added or removed, adjusting quantities, and calculating subtotals. DOM manipulation is essential for reflecting user actions and maintaining an interactive experience.

7. Search Functionality : Users can search for specific products using the search bar.

8. User Authentication : The website provides user authentication functionality, allowing users to create accounts, log in, and log out.

Learning Goals :

By building the Green-Bag website, you will gain practical experience with the following concepts :

1. HTML Structure : Create the layout and structure of the website using HTML tags, ensuring semantic markup for better accessibility and search engine optimization.

2. CSS Styling : Apply CSS properties to style the website, including colors, typography, layout, and responsiveness. Use media queries to adapt the design to different screen sizes.

3. Mock API Integration : Make HTTP requests to the mock API to fetch product data and update the cart. Handle API responses and errors, and populate the website with the retrieved information.

4. DOM Manipulation : Use JavaScript to manipulate the DOM based on user actions. Update the cart dynamically, adjust quantities, and calculate subtotals.

5. Event Handling : Implement event listeners to capture user interactions, such as clicking on buttons, updating quantities, and removing items from the cart.

6. Form Validation : Validate user input when adjusting quantities or removing items, ensuring that only valid actions are processed.