https://github.com/cudi7/javascript_shopping-cart
Simple shopping cart App using JavaScript, HTML and CSS
https://github.com/cudi7/javascript_shopping-cart
css html javascript shopping-cart
Last synced: about 1 year ago
JSON representation
Simple shopping cart App using JavaScript, HTML and CSS
- Host: GitHub
- URL: https://github.com/cudi7/javascript_shopping-cart
- Owner: Cudi7
- Created: 2021-05-28T10:55:07.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-05-28T11:01:19.000Z (about 5 years ago)
- Last Synced: 2025-04-05T11:23:42.716Z (over 1 year ago)
- Topics: css, html, javascript, shopping-cart
- Language: JavaScript
- Homepage: https://pensive-mccarthy-f9998a.netlify.app
- Size: 918 KB
- Stars: 15
- Watchers: 2
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shopping Cart app build with JavaScript
# Live demo
> https://pensive-mccarthy-f9998a.netlify.app
## Table of contents
- [General info](#general-info)
- [Code Examples](#code-examples)
- [Features](#features)
- [Contact](#contact)
## General info
- Responsive, build with HTML/CSS/JS.
## Code Examples
./js/products.js
```
// loop thorough data and display each field
function displayData(data) {
data.items.forEach((item, index) => {
const div = document.createElement('div');
div.classList.add('product-item');
div.id = item.sys.id;
div.innerHTML = `
${item.fields.title}
${item.fields.price} $
Add product
`;
productContainer.append(div);
});
loadListeners();
loadPreviousCart();
loadPreviousQtyCart();
}
function loadListeners() {
const addCartBtn = document.querySelectorAll('.add-cart');
addCartBtn.forEach((btn) => btn.addEventListener('click', handleAddProduct));
}
function loadPreviousCart() {
const prevCart = getLocalStorage('currentCart');
currentCart = prevCart ? prevCart : [];
prevCart && displayCartItems(currentCart);
}
function loadPreviousQtyCart() {
displayCartIcon('initialState');
}
```
## Features
- Everything saves to localStorage
- You can see your cart number updating as you add more items
You can:
- Add a product
- Change quantity
- Delete product
## Technology used
The project is created with:
- JavaScript
## Contact
Coded by Cudi - feel free to contact me!