Green Mart 🛒

Description 🥸

GreenMart is an e-commerce website built using HTML, CSS, and JavaScript, with styling and layout enhancements provided by the Bootstrap framework. It fetches product data from the FakeStoreAPI and dynamically generates product cards to display on the webpage.

Tags Used in Building This Project 🏷️

1. HTML 🖥️: Utilized for structuring the content of the website.
2. CSS 🎨: Employed for styling and layout design, including custom styles and Bootstrap classes.
3. JavaScript 💻: Used for dynamic functionality, such as fetching data from the FakeStoreAPI and creating interactive elements.
4. Bootstrap 🚀: Integrated to enhance responsiveness and provide pre-designed components for faster development.
5. Fetch API 🔄: Used in JavaScript for making HTTP requests to fetch data from external sources, such as the FakeStoreAPI.

Features

• Product Display 🛍️: Fetches product data from the FakeStoreAPI and dynamically generates product cards with information such as title, description, price, image, and email.
• Responsive Design 📱💻: Utilizes Bootstrap for responsive design, ensuring the website looks great and functions well on various devices and screen sizes.
• Modal 🔔: Includes a modal for user interaction, such as entering details or subscribing to a newsletter.
• Navigation 🧭: Provides easy navigation through the website with a responsive navbar and dropdown menu.
• Footer 👣: Includes a footer section with quick links, customer service information, and social media links.
• Error Handling ⚠️: Demonstrates error handling using JavaScript to catch and handle errors that may occur during data fetching.

Installation 💻

1. Clone the repository or download the ZIP file.
2. Open the index.html file in a web browser.

Usage 🚀

1. Browsing Products 🛍️: Upon opening the website, users can browse through the displayed products.
2. Shopping Interaction 🛒: Clicking on the "Start Shopping" button on any product card opens a modal for further interaction.
3. Easy Navigation 🧭: Users can navigate through different sections of the website using the navbar and dropdown menu.
4. Footer Links 🔗: The footer provides quick links, customer service information, and social media links for additional interaction.

Credits 🙌

• Bootstrap: Used for responsive design and styling.
• FakeStoreAPI: Provides product data for demonstration purposes.

License 📝

This project is licensed under the MIT License - see the LICENSE file for details.