48 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
1 | let count = 0;
2 | let sum = 0;
3 | let cart = {};
4 |
5 | if (localStorage.getItem("count")) {
6 | count = parseInt(localStorage.getItem("count"));
7 | }
8 |
9 | if (localStorage.getItem("sum")) {
10 | sum = parseInt(localStorage.getItem("sum"));
11 | }
12 |
13 | if (localStorage.getItem("cart")) {
14 | cart = JSON.parse(localStorage.getItem("cart"));
15 | }
16 |
17 | updateCart();
18 |
19 | let btns = document.querySelectorAll(".products button");
20 |
21 | for (let i = 0; i < btns.length; i++) {
22 | let btn = btns[i];
23 | btn.addEventListener("click", add);
24 |
25 | // id = btn.dataset.id;
26 | // if (cart.indexOf(id) >= 0) {
27 | // btn.className = "added";
28 | // btn.textContent = "Remove";
29 | // }
30 | }
31 |
32 | function add(event) {
33 | let price = Number(event.target.dataset.price);
34 | let title = event.target.dataset.title;
35 | let id = event.target.dataset.id;
36 |
37 | if (id in cart) {
38 | cart[id].qty++;
39 | } else {
40 | let cartItem = {
41 | title: title,
42 | price: price,
43 | qty: 1
44 | };
45 | cart[id] = cartItem
46 | }
47 |
48 | count++;
49 | sum += price;
50 |
51 | console.log(cart);
52 |
53 | // let index = cart.indexOf(event.target.dataset.id);
54 | // if (index >= 0) {
55 | // cart.splice(index, 1);
56 | // count--;
57 | // sum -= price;
58 | // event.target.className = "";
59 | // event.target.textContent = "Add to cart";
60 | // } else {
61 | // cart.push(event.target.dataset.id);
62 | // count++;
63 | // sum += price;
64 | // event.target.className = "added";
65 | // event.target.textContent = "Remove";
66 | // }
67 | localStorage.setItem("cart", JSON.stringify(cart));
68 | updateCart();
69 | }
70 |
71 | function updateCart() {
72 | document.getElementById("sum").textContent = sum;
73 | document.getElementById("count").textContent = count;
74 | localStorage.setItem("sum", sum);
75 | localStorage.setItem("count", count);
76 | }
77 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Simple Shopping Cart Built with Pure JavaScript
2 |
3 | This project is a basic implementation of a shopping cart using only HTML, CSS, and JavaScript. The application allows users to add items to their cart, view their cart's contents, and see the total cost. The state of the cart is saved in the browser's local storage so that it persists between page reloads.
4 |
5 | 
6 |
7 | ## Table of Contents
8 |
9 | - [Simple Shopping Cart Built with Pure JavaScript](#simple-shopping-cart-built-with-pure-javascript)
10 | - [Table of Contents](#table-of-contents)
11 | - [Overview](#overview)
12 | - [Technologies Used](#technologies-used)
13 | - [Features](#features)
14 | - [Getting Started](#getting-started)
15 | - [How It Works](#how-it-works)
16 | - [Code Explanation](#code-explanation)
17 | - [Contributing](#contributing)
18 | - [License](#license)
19 |
20 | ## Overview
21 |
22 | In this exercise, you will build a simple shopping cart that allows users to add items to their cart, view the items in their cart, and see the total price. The cart is saved in the browser's local storage, so the items persist even if the page is refreshed.
23 |
24 | ## Technologies Used
25 |
26 | - **HTML:** Structure of the application.
27 | - **CSS:** Styling of the application.
28 | - **JavaScript:** Logic of the application, including:
29 | - Variables
30 | - Arrays
31 | - Objects
32 | - Functions
33 | - Event listeners
34 | - DOM manipulation
35 | - Local storage
36 |
37 | ## Features
38 |
39 | - **Add Items to Cart:** Users can select items to add to their cart.
40 | - **View Cart:** Users can see a list of items in their cart, along with the quantity and price of each item.
41 | - **Persistent Storage:** The cart data is stored in local storage, so it persists between page reloads.
42 | - **Empty Cart Warning:** If the cart is empty, the user is alerted and given an option to go back to the shopping page.
43 |
44 | ## Getting Started
45 |
46 | To get started with this project, follow these steps:
47 |
48 | 1. Clone the repository:
49 | ```bash
50 | git clone https://github.com/yourusername/shopping-cart-js.git
51 | ```
52 |
53 | 2. Open the `index.html` file in your browser to view the shopping cart.
54 |
55 | 3. Modify the code as needed to add more items or features.
56 |
57 | ## How It Works
58 |
59 | The shopping cart is represented as an object in JavaScript, where each item is stored with its unique ID as the key. The cart object is saved in local storage so that it persists even when the page is reloaded.
60 |
61 | When the cart page loads, the script checks if there are items in the cart. If there are, it dynamically creates table rows to display the items. If the cart is empty, a message is shown to the user, along with a link to go back to the shopping page.
62 |
63 | ## Code Explanation
64 |
65 | Below is a brief explanation of the core functionality in the script:
66 |
67 | ```javascript
68 | let cart = {};
69 |
70 | // Check if cart exists in local storage
71 | if (localStorage.getItem("cart")) {
72 | cart = JSON.parse(localStorage.getItem("cart"));
73 | } else {
74 | alert("Cart is empty");
75 |
76 | let text = "Cart is empty.";
77 | document.getElementById("table-container").innerHTML = text;
78 |
79 | let goBack = document.createElement("a");
80 | goBack.href = "index.html";
81 | goBack.textContent = "Go back";
82 | document.getElementById("table-container").appendChild(goBack);
83 | }
84 |
85 | // Populate the table with cart items
86 | let tbody = document.getElementById("tbody");
87 |
88 | for (let id in cart) {
89 | let item = cart[id];
90 |
91 | let tr = document.createElement('tr');
92 |
93 | let title_td = document.createElement('td');
94 | title_td.textContent = item.title;
95 | tr.appendChild(title_td);
96 |
97 | let price_td = document.createElement("td");
98 | price_td.textContent = item.price;
99 | tr.appendChild(price_td);
100 |
101 | let qty_td = document.createElement("td");
102 | qty_td.textContent = item.qty;
103 | tr.appendChild(qty_td);
104 |
105 | tbody.appendChild(tr);
106 | }
107 | ```
108 |
109 | - **Cart Initialization:** The script checks if the cart exists in local storage. If it does, it loads the cart; if not, it alerts the user that the cart is empty.
110 | - **DOM Manipulation:** The cart items are dynamically added to the table in the HTML using DOM manipulation methods such as `createElement` and `appendChild`.
111 | - **Persistent Storage:** The cart is stored and retrieved from local storage using `localStorage.setItem()` and `localStorage.getItem()`.
112 |
113 | ## Contributing
114 |
115 | If you would like to contribute to this project, please fork the repository and submit a pull request. All contributions are welcome!
116 |
117 | ## License
118 |
119 | This project is open-source and available under the [MIT License](LICENSE).
120 |
--------------------------------------------------------------------------------