https://github.com/sad0xer/e-com-localstorage
It is a simple E-Commerce website developed using HTML, CSS, JavaScript. This website allows user to add product into cart and see the cost of all products.
https://github.com/sad0xer/e-com-localstorage
e-commerce-project open-source web-development
Last synced: 6 months ago
JSON representation
It is a simple E-Commerce website developed using HTML, CSS, JavaScript. This website allows user to add product into cart and see the cost of all products.
- Host: GitHub
- URL: https://github.com/sad0xer/e-com-localstorage
- Owner: SAD0XER
- Created: 2024-04-08T07:34:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-20T16:33:36.000Z (over 1 year ago)
- Last Synced: 2024-04-20T18:08:13.239Z (over 1 year ago)
- Topics: e-commerce-project, open-source, web-development
- Language: JavaScript
- Homepage: https://e-com-local-storage.vercel.app
- Size: 13.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌐E-Commerce website using Local Storage🏪
📑The Initial Guidelines for the project📚
### Here are the key tasks that need to be completed in this project:
```txt
✅ Check if the API call was made.
✅ Check if the filter is working.
✅ Students can loop through the data and append it in the JavaScrip DOM.
✅ Add a product to the cart and check the alert.
✅ Add the same product to the cart and check the alert.
✅ Go To the cart page and check if able to show on DOM & the total price is working fine.
✅ Check the quantity part. See if the total gets updated when the quantity changes.
✅ Check the delete product part.
```
### Problem Statement:
- In this application, we have 2 different pages:
1. index.html(Home Page)
2. cart.html(Cart Page)
#### index.html(Home Page):
- First, make an API request with fetch in this API end-point:-
`https://dbioz2ek0e.execute-api.ap-south-1.amazonaws.com/mockapi/get-tech-products`.
- If you successfully do that you will get some e-commerce product data(Array of Objects).
- In the template, there is a div with an id:- `product-container`.
- You have to loop over the data and create small cards based on the data and append them to the above-mentioned div.
- Show 4 cards per row with a display grid.
- Here we also have a select tag with an id:- `filter`.
- Using this select tag you should be able to filter the products with their category.
- Use array.filter() method to filter the products by their category.
- Each Product card should have a button with the text: `Add To Cart`.
- When clicked on this button product data should be added to local storage with a key `cart`.
- The user should not be able to add the same product to the cart multiple times.
- If adding to cart is successful show an alert with the text: `Product Added To Cart` else show an alert with the text: `Product Already in Cart`.
#### cart.html(Cart Page):
- On this page, all the data will come from the localstorage with the key `cart`.
- Loop over the localstorage data and show them in smaller cards inside and div with id:- `cart-container` (Given in the template).
- Now each of the cards also has a span tag where you can see the quantity of the product. By default, the quantity should be 1.
- there are also two buttons and by using them you can increment/decrement the quantity.
- Each card should also have a button with the text `Remove`. Clicking on that this particular cart should be deleted.
- Please follow this structure for the cards:
```html
Brand
Price
Details
Category
+ -> increment button
quantity
- -> decrement button Remove -> Remove
button
```
- Please make sure all the buttons have the same text as the given structure.
- In the template, we also have a span tag with id:- `cart-total`.
- Here you have to show the total value of the cart.
- Make sure whenever the quantity gets modified the total price is updated. (Total is = sum of (quantity \* price) of all products in cart).
- Please take a look at the below image for a better understanding:
## Description📃
It is a simple **E-Commerce** website developed using `HTML`, `CSS` and `JavaScript`. This website allows users to add products to a cart and see the cost of all products.
## Features🤩
- User can **sort** and **filter** product by its categories.
- User can **add** products in the **cart**.
- User can see **loader** is loading on the page while **API** is fetching products.
- If any **error** occurs while getting a response from the server then an **alert** will pop up showing the error **message**.
- Whenever a new product is **added** or **removed** from the cart it will **update** the **UI** accordingly.
- There will be a `Cart` button which when clicked will redirect the user to the cart page where the user can **view** all the **products** in the **cart**.
- The cart **total amount** will be updated whenever a new item is **added** or **removed** from the cart.
## Installation🏗️
1. Clone the repository: `git clone https://github.com/SAD0XER/E-Com-LocalStorage.git`.
2. Navigate to the project directory/folder `E-Com-LocalStorage`.
3. Copy the file path of the `index.html` file and open it in your browser to access the user registration page.
## Technologies Used🧑💻
- **Frontend**: `HTML`, `CSS` and `JavaScript`
- **Backend**: `JavaScript`
- **Database**: `LocalStorage` (**P.S**: _We have used localStorage as a database for storing data temporarily._)
## Acknowledgments🤗
**Special thanks to [Arbaz Hussain](https://github.com/Arbaz86) for his help.**