JavaScript Amazon Project 🛒

A small demo e-commerce frontend inspired by Amazon, built using plain HTML, CSS, and JavaScript (ES Modules).
This project demonstrates core frontend fundamentals such as DOM manipulation, modular JavaScript, and cart state management — without any framework or build tools.

---

✨ Features

• Dynamically renders product listings
• Add products to a shopping cart
• Updates cart quantity in real time
• Uses JavaScript ES Modules (import / export)
• Simple and clean project structure
• No framework, no build step

---

🧰 Tech Stack

• HTML5
• CSS3
• JavaScript (ES Modules)

---

📁 Project Structure

. ├── amazon.html / index.html # Main UI (entry point)

├── script/

│ ├── amazon.js # Main app logic (render products, handle cart)

│ └── cart.js # Cart data (exports cartItems array)

├── data/

│ └── products.js # Sample product data

├── images/

│ ├── products/ # Product images

│ └── ratings/ # Rating star images

├── .git/ # Git metadata

└── README.md

yaml Copy code

---

⚙️ How It Works

1. Product Data
   data/products.js exports a products array containing product objects.

2. Rendering Products
   script/amazon.js loops through the products and dynamically generates the product grid using JavaScript.

3. Add to Cart Logic

   • Clicking Add to Cart checks whether the product already exists in cartItems
   • If it exists → quantity increases
   • If it does not exist → product is added to the cart

4. Cart Quantity Update
   The total quantity of items in the cart is calculated and displayed in the cart icon.

---

▶️ How to Run Locally

⚠️ Note: ES Modules require files to be served over HTTP.

Option 1: Using Node.js

npx serve .
Open the URL shown in the terminal.

Option 2: Using VS Code Live Server
Install the Live Server extension

Open the project folder in VS Code

Right-click amazon.html

Select Open with Live Server

🚧 Project Status
This project is currently under active development.

Planned improvements include:

Enhancing cart UI feedback

Supporting quantity selection

Refactoring and cleaning code

Improving responsiveness

📌 Learning Outcomes
JavaScript ES Modules

DOM manipulation

Event handling

Basic state management (cart logic)

Frontend project structuring