FarmHome E-commerce Website

Overview

FarmHome is an intuitive e-commerce platform designed to provide customers with an easy-to-use interface for browsing and purchasing fresh fruits, vegetables, and meat products. The website emphasizes a visually appealing layout, responsive design, and enhanced user interaction features to ensure a seamless shopping experience.

---

Key Features

1. Homepage

• Slideshow: Highlighting promotional offers with smooth automatic transitions.
• Navigation Bar: Easy access to different sections of the website such as categories, products, and contact.

2. Category-Based Shopping

• Organized product categories (Vegetables, Fruits, Meat) for hassle-free browsing.
• Dynamic filtering options to view specific categories or all products.

3. Product Display

• Detailed product cards with:
  • High-quality images
  • Pricing, discounts, and quantity input
  • "Add to Cart" button for seamless shopping

4. Search and Filter

• Search Box: Enables users to search for products by name with live filtering.
• Category Filter: Filters products dynamically based on selected categories (All, Fruits, Vegetables, Meat).

5. User Authentication

• Login Form: Secure login with email validation.
• Remember Me & Forgot Password: Enhances usability and account recovery.

6. Shopping Cart

• Cart displays selected items, prices, and quantities.
• Interactive "Delete" button for removing items from the cart.
• Total price calculation and checkout button for completing purchases.

7. Contact Section

• Email subscription form for updates and promotions.
• Footer includes company information, social media links, and quick navigation links.

---

Technologies Used

Frontend

• HTML5 & CSS3: For structuring and styling the webpage.
• JavaScript: To handle dynamic interactions such as filtering, searching, and animations.
• Font Awesome: For icons and visual enhancement.

Key Functionalities in JavaScript

• Search Functionality: Filters products by matching search input with product names.
• Dynamic Category Filtering: Toggles product visibility based on the selected category.
• Slideshow Animation: Automatically transitions between promotional banners.
• Email Validation: Ensures valid email input during login.
• Interactive Shopping Cart: Displays selected items with dynamic add/remove options.

---

Installation & Usage

1. Clone the Repository:

   git clone https://github.com/username/farmhome.git

2. Open the index.html File: Simply open the file in your browser to view the website.

3. Customize Content:

   • Update images, text, and promotional offers in index.html.
   • Modify styles in style.css for branding purposes.
   • Enhance or add functionalities in scripts.js.

---

Project Highlights

User-Centric Design

• Responsive Layout: Optimized for various screen sizes with smooth navigation across devices.
• Engaging Visuals: High-quality images, animations, and a clean interface.

Code Efficiency

• Reusable CSS classes and modular JavaScript functions ensure maintainable and scalable code.
• Follows best practices for web development, including separation of concerns and semantic HTML.

Dynamic Features

• Real-time search and filter improve user experience by enabling quick product discovery.
• Interactive shopping cart provides an overview of selected items, enhancing customer satisfaction.

---

Reflection

The FarmHome project was designed to mimic a professional e-commerce platform while focusing on functionality and user engagement. Through this project, we honed skills in frontend development, dynamic scripting with JavaScript, and responsive design principles. Future improvements could include backend integration for order management, user authentication, and payment processing.