Skip to content

Latest commit

 

History

History
104 lines (88 loc) · 3.38 KB

README.md

File metadata and controls

104 lines (88 loc) · 3.38 KB
Raw

Apple Website Clone with Cart Features

Overview

This project is a clone of the Apple website featuring product listings and a functional shopping cart. It is built using HTML, CSS, and JavaScript. The website allows users to browse products, add them to the cart, view the cart, and remove items from the cart.

Features

  • Home Page: Displaying featured products and promotions.
  • Product Listings: Detailed pages for individual products with images, descriptions, and prices.
  • Shopping Cart: Allows users to add and remove products, view cart contents, and see the total price.

File Structure

apple-website-clone/
│
├── index.html             # Home page
├── product.html           # Product details page
├── cart.html              # Shopping cart page
│
├── css/
│   ├── style.css          # General styles
│   ├── product.css        # Styles for product page
│   └── cart.css           # Styles for cart page
│
├── js/
│   ├── main.js            # Main JavaScript file
│   ├── product.js         # JavaScript for product page
│   └── cart.js            # JavaScript for cart functionality
│
├── images/                # Product images and other assets
│
└── README.md              # This file

Setup and Installation

  1. Clone the repository: 
    git clone https://github.com/yourusername/apple-website-clone.git
  2. Navigate to the project directory: 
    cd apple-website-clone
  3. Open the index.html file in your browser to view the homepage: 
    open index.html

Usage

  1. Home Page:

    • Browse featured products.
    • Click on a product to view its details.

  2. Product Page:

    • View product image, description, and price.
    • Add product to the cart by clicking the "Add to Cart" button.

  3. Cart Page:

    • View all products added to the cart.
    • Increase or decrease product quantity.
    • Remove products from the cart.
    • View the total price of items in the cart.

Code Details

HTML

  • index.html: Contains the structure and content of the homepage.
  • product.html: Template for individual product pages, dynamically populated with product details.
  • cart.html: Contains the structure of the shopping cart page.

CSS

  • style.css: General styles used across the website.
  • product.css: Specific styles for the product detail page.
  • cart.css: Specific styles for the cart page.

JavaScript

  • main.js: Handles general interactions and dynamic content loading for the homepage.
  • product.js: Manages product details and the "Add to Cart" functionality.
  • cart.js: Controls the shopping cart, including adding/removing items and updating the total price.

Contributing

  1. Fork the repository.
  2. Create a new branch: 
    git checkout -b feature/YourFeature
  3. Make your changes and commit them: 
    git commit -m "Add your message here"
  4. Push to the branch: 
    git push origin feature/YourFeature
  5. Create a pull request.

License

This project is licensed under the MIT License.

Contact

For any questions or suggestions, please reach out to [email protected].

Thank you for checking out this project! We hope you find it useful and educational.