E-Commerce Product Listing Website using HTML, CSS, and JavaScript.

This project helped me practice JavaScript concepts and understand how to fetch product data from an API and display it dynamically on a webpage.

1. Fetching Product Data

I used the JavaScript fetch() method to retrieve product data from the DummyJSON API.

This project helped me practice JavaScript concepts and understand how to fetch product data from an API and display it dynamically on a webpage.

🛠️ Technologies Used

HTML — Created the webpage structure.

CSS — Designed product cards using CSS Grid, Flexbox, shadows, and hover effects.

JavaScript — Added functionality for fetching products, pagination, and cart management.

DummyJSON API — Retrieved sample product data.

2. Dynamic Product Cards

I used document.createElement() and appendChild() to create product cards dynamically using the data received from the API.

3. CSS Grid Layout

I used CSS Grid to display five product cards per row and added spacing between the cards.

4. Products Per Page

I created a dropdown menu to select how many products to display per page: 10, 20, or 30.

5. Next and Back Buttons

I implemented pagination using JavaScript variables such as limit and skip to navigate between product pages.

6. Add to Cart

I used an array to store selected products and displayed the cart item count using JavaScript.

7. Button Hover Effects

I added CSS hover effects to make the buttons more interactive.