├── files
├── cart.html
├── index.html
├── main.js
└── style.css
└── images
├── blackhoddie.jpg
├── blacktshirt.jpg
├── cover.jpg
├── greyhoddie.jpg
└── greytshirt.jpg
/files/cart.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Shopping Cart
11 |
12 |
13 |
14 |
15 |
27 |
28 |
29 |
40 |
41 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/files/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Shopping Cart
11 |
12 |
13 |
14 |
15 |
27 |
28 |
29 |
30 |
31 |
32 |
Grey Tshirt
33 |
$15,00
34 |
Add Cart
35 |
36 |
37 |
38 |
39 |
Grey Hoddie
40 |
$20,00
41 |
Add Cart
42 |
43 |
44 |
45 |
46 |
Black Tshirt
47 |
$10,00
48 |
Add Cart
49 |
50 |
51 |
52 |
53 |
Black Hoddie
54 |
$25,00
55 |
Add Cart
56 |
57 |
58 |
123 |
${item.name}
124 |
$${item.price},00
126 |
127 |
128 | ${item.inCart}
129 |
130 |
131 | $${item.inCart * item.price},00
`;
132 | });
133 |
134 | productContainer.innerHTML += `
135 |
136 |
Basket Total
137 | $${cart},00
138 | `
139 |
140 | deleteButtons();
141 | manageQuantity();
142 | }
143 | }
144 |
145 | function manageQuantity() {
146 | let decreaseButtons = document.querySelectorAll('.decrease');
147 | let increaseButtons = document.querySelectorAll('.increase');
148 | let currentQuantity = 0;
149 | let currentProduct = '';
150 | let cartItems = localStorage.getItem('productsInCart');
151 | cartItems = JSON.parse(cartItems);
152 |
153 | for(let i=0; i < increaseButtons.length; i++) {
154 | decreaseButtons[i].addEventListener('click', () => {
155 | console.log(cartItems);
156 | currentQuantity = decreaseButtons[i].parentElement.querySelector('span').textContent;
157 | console.log(currentQuantity);
158 | currentProduct = decreaseButtons[i].parentElement.previousElementSibling.previousElementSibling.querySelector('span').textContent.toLocaleLowerCase().replace(/ /g,'').trim();
159 | console.log(currentProduct);
160 |
161 | if( cartItems[currentProduct].inCart > 1 ) {
162 | cartItems[currentProduct].inCart -= 1;
163 | cartNumbers(cartItems[currentProduct], "decrease");
164 | totalCost(cartItems[currentProduct], "decrease");
165 | localStorage.setItem('productsInCart', JSON.stringify(cartItems));
166 | displayCart();
167 | }
168 | });
169 |
170 | increaseButtons[i].addEventListener('click', () => {
171 | console.log(cartItems);
172 | currentQuantity = increaseButtons[i].parentElement.querySelector('span').textContent;
173 | console.log(currentQuantity);
174 | currentProduct = increaseButtons[i].parentElement.previousElementSibling.previousElementSibling.querySelector('span').textContent.toLocaleLowerCase().replace(/ /g,'').trim();
175 | console.log(currentProduct);
176 |
177 | cartItems[currentProduct].inCart += 1;
178 | cartNumbers(cartItems[currentProduct]);
179 | totalCost(cartItems[currentProduct]);
180 | localStorage.setItem('productsInCart', JSON.stringify(cartItems));
181 | displayCart();
182 | });
183 | }
184 | }
185 |
186 | function deleteButtons() {
187 | let deleteButtons = document.querySelectorAll('.product ion-icon');
188 | let productNumbers = localStorage.getItem('cartNumbers');
189 | let cartCost = localStorage.getItem("totalCost");
190 | let cartItems = localStorage.getItem('productsInCart');
191 | cartItems = JSON.parse(cartItems);
192 | let productName;
193 | console.log(cartItems);
194 |
195 | for(let i=0; i < deleteButtons.length; i++) {
196 | deleteButtons[i].addEventListener('click', () => {
197 | productName = deleteButtons[i].parentElement.textContent.toLocaleLowerCase().replace(/ /g,'').trim();
198 |
199 | localStorage.setItem('cartNumbers', productNumbers - cartItems[productName].inCart);
200 | localStorage.setItem('totalCost', cartCost - ( cartItems[productName].price * cartItems[productName].inCart));
201 |
202 | delete cartItems[productName];
203 | localStorage.setItem('productsInCart', JSON.stringify(cartItems));
204 |
205 | displayCart();
206 | onLoadCartNumbers();
207 | })
208 | }
209 | }
210 |
211 | onLoadCartNumbers();
212 | displayCart();
213 |
--------------------------------------------------------------------------------
/files/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | font-family: 'Roboto', sans-serif;
6 | }
7 |
8 | header {
9 | background-image: url('images/cover.jpg');
10 | background-repeat: no-repeat;
11 | background-size: cover;
12 | background-position: center;
13 | height: 150px;
14 | position: relative;
15 | }
16 |
17 | .overlay {
18 | position: absolute;
19 | z-index: 1;
20 | top: 0;
21 | left: 0;
22 | height: 100%;
23 | right: 0;
24 | bottom: 0;
25 | padding: 0 !important;
26 | margin: 0 !important;
27 | background-color: rgba(10,10,10,0.3);
28 | }
29 |
30 | nav {
31 | position: absolute;
32 | top: 0;
33 | right: 0;
34 | left: 0;
35 | z-index: 2;
36 | display: flex;
37 | flex-wrap: wrap;
38 | justify-content: space-between;
39 | padding: 50px 60px 0 60px;
40 | }
41 |
42 | nav li {
43 | list-style: none;
44 | display: inline-block;
45 | padding-right: 10px;
46 | padding-left: 10px;
47 | }
48 |
49 | nav li span {
50 | padding-left: 5px;
51 | }
52 |
53 | li a {
54 | padding: 5px;
55 | background-color: #fff;
56 | text-decoration: none;;
57 | }
58 |
59 | .cart ion-icon {
60 | vertical-align: bottom;
61 | font-size: 20px;
62 | padding-right: 5px;
63 | }
64 |
65 | .cart a {
66 | background-color: royalblue;
67 | color: #fff;
68 | cursor: pointer;
69 | text-decoration: none;
70 | }
71 |
72 | .container,
73 | .container-products {
74 | display: flex;
75 | justify-content: center;
76 | flex-wrap: wrap;
77 | margin-top: 50px;
78 | padding-bottom: 100px;;
79 | }
80 |
81 | .image {
82 | margin-right: 20px;
83 | margin-left: 20px;
84 | position: relative;
85 | overflow: hidden;
86 | }
87 |
88 | .add-cart {
89 | position: absolute;
90 | width: 100%;
91 | background-color: darkgrey;
92 | transition: all 0.3s ease-in-out;
93 | opacity: 0;
94 | cursor: pointer;
95 | text-align: center;
96 | }
97 |
98 | .image:hover .cart1,
99 | .image:hover .cart2,
100 | .image:hover .cart3,
101 | .image:hover .cart4 {
102 | bottom: 50px;
103 | opacity: 1;
104 | padding: 10px;
105 | text-decoration: none;
106 | }
107 |
108 | /* ----------------- CART PAGE --------------- */
109 |
110 | .container-products {
111 | max-width: 650px;
112 | justify-content: space-around;
113 | margin: 0 auto;
114 | margin-top: 50px;
115 | }
116 |
117 | .container-products ion-icon {
118 | font-size: 25px;
119 | color: blue;
120 | margin-left: 10px;
121 | margin-right: 10px;
122 | cursor: pointer;
123 | }
124 |
125 | .product-header {
126 | width: 100%;
127 | max-width: 650px;
128 | display: flex;
129 | justify-content: flex-start;
130 | border-bottom: 4px solid lightgray;
131 | margin: 0 auto;
132 | }
133 |
134 | .product-title {
135 | width: 45%;
136 | }
137 |
138 | .price {
139 | width: 15%;
140 | border-bottom: 1px solid lightgray;
141 | display: flex;
142 | align-items: center;
143 | }
144 |
145 | .quantity {
146 | width: 30%;
147 | border-bottom: 1px solid lightgray;
148 | display: flex;
149 | align-items: center;
150 | }
151 |
152 | .total {
153 | width: 10%;
154 | border-bottom: 1px solid lightgray;
155 | display: flex;
156 | align-items: center;
157 | }
158 |
159 | .product {
160 | width: 45%;
161 | display: flex;
162 | justify-content: space-around;
163 | align-items: center;
164 | padding: 10px 0;
165 | border-bottom: 1px solid lightgray;
166 | }
167 |
168 | .product ion-icon {
169 | cursor: pointer;
170 |
171 | }
172 |
173 | .products {
174 | width: 100%;
175 | display: flex;
176 | flex-wrap: wrap;
177 | }
178 |
179 | .products img {
180 | width: 75px;
181 | }
182 |
183 | .basketTotalContainer {
184 | display: flex;
185 | justify-content: flex-end;
186 | width: 100%;
187 | padding: 10px 0;
188 | }
189 |
190 | .basketTotalTitle {
191 | width: 30%;
192 | }
193 |
194 | .basketTotal {
195 | width: 10%;
196 | }
197 |
198 | @media(max-width: 500px) {
199 | nav h2 {
200 | width: 100%;
201 | text-align: center;
202 | margin-bottom: 10px;;
203 | }
204 |
205 | .sm-hide {
206 | display: none;;
207 | }
208 |
209 | .products,
210 | .product-header {
211 | justify-content: center;
212 | }
213 |
214 | .basketTotalContainer {
215 | padding-right: 8%;
216 | }
217 | }
218 |
--------------------------------------------------------------------------------
/images/blackhoddie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnable-content/js-shopping-cart/f9140bdc9f4431fb61399f378186133c71e95693/images/blackhoddie.jpg
--------------------------------------------------------------------------------
/images/blacktshirt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnable-content/js-shopping-cart/f9140bdc9f4431fb61399f378186133c71e95693/images/blacktshirt.jpg
--------------------------------------------------------------------------------
/images/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnable-content/js-shopping-cart/f9140bdc9f4431fb61399f378186133c71e95693/images/cover.jpg
--------------------------------------------------------------------------------
/images/greyhoddie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnable-content/js-shopping-cart/f9140bdc9f4431fb61399f378186133c71e95693/images/greyhoddie.jpg
--------------------------------------------------------------------------------
/images/greytshirt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnable-content/js-shopping-cart/f9140bdc9f4431fb61399f378186133c71e95693/images/greytshirt.jpg
--------------------------------------------------------------------------------