The addToCart
project is a simple shopping cart implementation showcasing the addition of products into a cart and adjusting their quantities. This project is specifically tailored for "Lincolnshire Saddles Ltd.", a fictional saddle company.
- Add products to the shopping bag.
- View items in the shopping bag.
- Adjust the quantity of products in the shopping bag.
- See the total price of items in the bag.
- Clone the repository:
git clone https://github.com/chensov/addToCart.git cd addToCart
- Open in browser:
- Simply open the
index.html
file in your preferred web browser.
- Simply open the
-
Display Products: The products are fetched from a static array and displayed on the main page. Each product has a button to add it to the cart.
-
View Shopping Bag: Click on the shopping bag icon to view the items added to the cart. This will slide in a card showing the products, their quantities, and their prices.
-
Adjust Quantity: In the shopping bag, you can increase or decrease the quantity of a product. The total price and quantity of products in the cart are updated in real-time.
-
Close Shopping Bag: Click the
Close
button to hide the shopping bag.
The project primarily consists of:
- index.html - The main HTML structure.
- style.css - Contains the styling for the project.
- app.js - Contains the JavaScript logic for handling the cart functionality.
- Integrating a backend to persist bag data.
- Implementing user accounts and saving shopping bag states for users.
- Introducing more interactive UI/UX elements.