E-commerce Website

This project is an E-commerce website built using Vanilla JavaScript, Bootstrap, and SASS. It provides a platform for users to browse products, add them to their cart, and proceed to checkout.

Features

• Product Listing: Users can view a list of products with details such as name, price, and image.
• Product Search: Users can search for specific products using keywords.
• Product Details: Users can click on a product to view its detailed information.
• Shopping Cart: Users can add products to their shopping cart and manage the quantities.
• Checkout Process: Users can proceed to checkout, enter their shipping and payment details, and place an order.
• Order History: Users can view their order history and track the status of their orders.
• Responsive Design: The website is responsive and works well on different devices and screen sizes.

Technologies Used

• Vanilla JavaScript: The website is built using pure JavaScript without any frameworks or libraries.
• Bootstrap: The Bootstrap framework is used for styling and layout.
• SASS: SASS (Syntactically Awesome Style Sheets) is used as a CSS preprocessor to enhance the styling capabilities.

Project Structure

The project has the following directory structure:

.
├── index.html
├── style
│   └── bootstrap
│       ├── bootstrap.js
│       ├── bootstrap.css
│   └── global
│       ├── _global.scss
│       ├── _mixins.scss
│       ├── _animation.scss
│       ├── _nav.scss
│   └── pages
│       ├── index.css
│       ├── index.scss
├── javasript
│   ├── main.js
│   └── index.js
└── images

• index.html: The main HTML file that defines the structure of the website.
• css/main.css: The compiled CSS file generated from the SASS code.
• js/main.js: The main JavaScript file that initializes the application and handles user interactions.
• js/index.js: index page functions.
• sass/index.scss: The index SASS file that imports other SASS partials and defines the overall styling.

Getting Started

To run the E-commerce website locally, follow these steps:

1. Clone the repository: git clone https://github.com/omar-kamal-elkhabbaty/E-commerce
2. Navigate to the project directory: cd e-commerce-website
3. Open the index.html file in your preferred web browser.

Customization

If you want to customize the website, you can modify the following files:

• index.html: Update the HTML structure and content.
• js/main.js: Modify the JavaScript code to add new functionalities or change existing ones.
• sass/*.scss: Update the SASS files to customize the styling.

Contributing

Contributions to this project are welcome. If you find any issues or want to add new features, feel free to open an issue or submit a pull request.

Contact

• You can contact with us omar.muhammed.kamal@gmail.com