🛒 API-project--JS

A modern, responsive e-commerce web application built with HTML5, Bootstrap 5, and JavaScript (ES6+). This application fetches live product data from the FakeStore API and displays products dynamically in responsive grid cards, with dedicated product detail pages.

🚀 Live Demo: https://api-project-2zopz4up3-milan139127.vercel.app/

---

🌐 Live Demo

🔗 Experience the live project here:
👉 View Live Demo on Vercel

---

📸 Output Preview

---

✨ Features

• ⚡ Real-time API Integration: Uses JavaScript Fetch API with modern async/await syntax to retrieve products from FakeStore API.
• 🛍️ Product Catalog (index.html): Dynamically renders product cards with images, titles, descriptions, pricing, and "View Product" buttons.
• 🔍 Single Product Details (product.html): Uses URL search parameters (?id=${id}) to load and display individual product information and high-resolution images.
• 📱 Fully Responsive Layout: Styled with Bootstrap 5 for seamless experience across mobile, tablet, and desktop screens.
• 🛡️ Error Handling: Graceful error catching using try...catch blocks during API calls.

---

🛠️ Tech Stack

Technology	Description
HTML5	Semantic structure and markup
CSS3 & Bootstrap 5	Responsive layout and UI styling
JavaScript (ES6+)	DOM manipulation, Async/Await, Fetch API, URLSearchParams
FakeStore API	REST API providing dummy e-commerce product data

---

📁 Project Structure

API-project--JS/
│
├── index.html              # Home page: fetches and displays all products
├── product.html            # Detail page: fetches and displays single product details
├── script.js               # JavaScript file
├── api-project-output.png  # Output screenshot preview
└── README.md               # Project documentation

---

🚀 Getting Started

Follow these steps to run the project locally on your machine:

1. Clone the repository

git clone https://github.com/mkalsariya9127/API-project--JS.git

2. Navigate to project folder

cd API-project--JS

3. Run the project

Simply open index.html in your web browser, or use the Live Server extension in VS Code.

---

🔗 API Endpoints Used

• Get All Products:
  GET https://fakestoreapi.com/products

• Get Single Product:
  GET https://fakestoreapi.com/products/{id}

---

👤 Author

• GitHub: @mkalsariya9127

---

⭐ If you found this project helpful, please give it a star!