├── img
    └── favicon.png
├── components
    ├── Spinner
    │   ├── Spinner.css
    │   ├── Spinner.js
    │   └── img
    │   │   └── spinner.svg
    ├── Header
    │   ├── Header.css
    │   └── Header.js
    ├── Error
    │   ├── Error.css
    │   └── Error.js
    ├── Shopping
    │   ├── Shopping.css
    │   ├── img
    │   │   └── close.svg
    │   └── Shopping.js
    └── Products
    │   ├── Products.css
    │   └── Products.js
├── constants
    └── root.js
├── index.js
├── utils
    └── localStorageUtil.js
├── css
    └── index.css
├── index.html
└── server
    └── catalog.json


/img/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/letscode-dev/js-guitar-shop/HEAD/img/favicon.png


--------------------------------------------------------------------------------
/components/Spinner/Spinner.css:
--------------------------------------------------------------------------------
 1 | .spinner-container {
 2 |     position: fixed;
 3 |     top: 0;
 4 |     left: 0;
 5 | 	display: flex;
 6 | 	width: 100%;
 7 | 	height: 100vh;
 8 | 	justify-content: center;
 9 | 	align-items: center;
10 | }
11 | .spinner__img {
12 | 	width: 200px;
13 | 	height: 200px;
14 | }
15 | 


--------------------------------------------------------------------------------
/constants/root.js:
--------------------------------------------------------------------------------
1 | const ROOT_PRODUCTS = document.getElementById('products');
2 | const ROOT_HEADER = document.getElementById('header');
3 | const ROOT_SHOPPING = document.getElementById('shopping');
4 | const ROOT_SPINNER = document.getElementById('spinner');
5 | const ROOT_ERROR = document.getElementById('error');
6 | 


--------------------------------------------------------------------------------
/components/Header/Header.css:
--------------------------------------------------------------------------------
 1 | .header-container {
 2 |     display: flex;
 3 |     height: 50px;
 4 |     padding: var(--spacing-small);
 5 |     background-color: var(--color-medium);
 6 | }
 7 | .header-counter {
 8 |     margin-left: auto;
 9 |     padding-right: var(--spacing-small);
10 |     font-weight: bold;
11 |     cursor: pointer;
12 | }
13 | 


--------------------------------------------------------------------------------
/components/Error/Error.css:
--------------------------------------------------------------------------------
 1 | .error-container {
 2 | 	display: flex;
 3 | 	justify-content: center;
 4 | 	align-items: center;
 5 | 	width: 100%;
 6 | 	height: 100vh;
 7 | }
 8 | .error-message {
 9 | 	min-width: 400px;
10 | 	padding: 20px 40px;
11 | 	border-left: 7px solid var(--color-error-dark);
12 | 	text-align: center;
13 | 	background-color: var(--color-error-light);
14 | 	color: var(--color-white);
15 | 	box-shadow: var(--box-shadow);
16 | }
17 | 


--------------------------------------------------------------------------------
/components/Error/Error.js:
--------------------------------------------------------------------------------
 1 | class Error {
 2 |     render() {
 3 |         const html = `
 4 |         	<div class="error-container">
 5 |                 <div class="error-message">
 6 |                     <h3>Нет доступа!</h3>
 7 |                     <p>Попробуйти зайти позже</p>
 8 |                 </div>
 9 |         	</div>
10 |         `;
11 | 
12 |         ROOT_ERROR.innerHTML = html;
13 |     }
14 | }
15 | 
16 | const errorPage = new Error();
17 | 


--------------------------------------------------------------------------------
/components/Spinner/Spinner.js:
--------------------------------------------------------------------------------
 1 | class Spinner {
 2 |     handleClear() {
 3 |         ROOT_SPINNER.innerHTML = '';
 4 |     }
 5 | 
 6 |     render() {
 7 |         const html = `
 8 |         	<div class="spinner-container">
 9 |         		<img class="spinner__img" src="components/Spinner/img/spinner.svg" />
10 |         	</div>
11 |         `;
12 | 
13 |         ROOT_SPINNER.innerHTML = html;
14 |     }
15 | }
16 | 
17 | const spinnerPage = new Spinner();
18 | 


--------------------------------------------------------------------------------
/components/Header/Header.js:
--------------------------------------------------------------------------------
 1 | class Header {
 2 |     handlerOpenShoppingPage() {
 3 |         shoppingPage.render();
 4 |     }
 5 | 
 6 |     render(count) {
 7 |         const html = `
 8 |             <div class="header-container">
 9 |                 <div class="header-counter" onclick="headerPage.handlerOpenShoppingPage();">
10 |                     🔥 ${count}
11 |                 </div>
12 |             </div>
13 |         `;
14 | 
15 |         ROOT_HEADER.innerHTML = html;
16 |     }
17 | };
18 | 
19 | const headerPage = new Header();
20 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | function render() {
 2 | 	const productsStore = localStorageUtil.getProducts();
 3 | 
 4 | 	headerPage.render(productsStore.length);
 5 | 	productsPage.render();	
 6 | }
 7 | 
 8 | spinnerPage.render();
 9 | 
10 | let CATALOG = [];
11 | 
12 | // https://api.myjson.com/bins/jvsbu
13 | fetch('server/catalog.json')
14 |     .then(res => res.json())
15 |     .then(body => {
16 | 		CATALOG = body;
17 | 
18 | 		setTimeout(() => {
19 | 			spinnerPage.handleClear();
20 | 			render();
21 | 		}, 1000);
22 |     })
23 |     .catch(() => {
24 |         spinnerPage.handleClear();
25 |     	errorPage.render();
26 |     })
27 | 


--------------------------------------------------------------------------------
/components/Spinner/img/spinner.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="211px" height="211px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
3 | <circle cx="50" cy="50" r="28" stroke-width="4" stroke="#bfbfbf" stroke-dasharray="43.982297150257104 43.982297150257104" fill="none" stroke-linecap="round" transform="rotate(217.184 50 50)">
4 |   <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.0989010989010988s" keyTimes="0;1" values="0 50 50;360 50 50"></animateTransform>
5 | </circle>
6 | <!-- [ldio] generated by https://loading.io/ --></svg>


--------------------------------------------------------------------------------
/components/Shopping/Shopping.css:
--------------------------------------------------------------------------------
 1 | .shopping-container {
 2 | 	position: fixed;
 3 | 	top: 50%;
 4 | 	left: 50%;
 5 | 	width: 97%;
 6 | 	height: 97vh;
 7 | 	margin: auto;
 8 | 	padding: var(--spacing-large);
 9 | 	transform: translate(-50%, -50%);
10 | 	background-color: var(--color-white);
11 | 	box-shadow: var(--box-shadow);
12 | }
13 | .shopping-element__name {
14 | 	padding: var(--spacing-medium);
15 | 	font-weight: bold;
16 | }
17 | .shopping-element__price {
18 | 	padding: var(--spacing-medium);
19 | 	color: var(--color-unaccent);
20 | }
21 | .shopping__close {
22 | 	position: absolute;
23 | 	top: 20px;
24 | 	right: 20px;
25 | 	width: 35px;
26 | 	height: 35px;
27 | 	background-image: url(img/close.svg);
28 | 	background-repeat: no-repeat;
29 | 	background-position: center center;
30 | 	background-size: contain;
31 | 	cursor: pointer;
32 | }
33 | 


--------------------------------------------------------------------------------
/utils/localStorageUtil.js:
--------------------------------------------------------------------------------
 1 | class LocalStorageUtil {
 2 |     constructor() {
 3 |         this.keyName = 'products';
 4 |     }
 5 |     getProducts() {
 6 |         const productsLocalStorage = localStorage.getItem(this.keyName);
 7 |         if (productsLocalStorage !== null) {
 8 |             return JSON.parse(productsLocalStorage);
 9 |         }
10 |         return [];
11 |     }
12 |     putProducts(id) {
13 |         let products = this.getProducts();
14 |         let pushProduct = false;
15 |         const index = products.indexOf(id);
16 | 
17 |         if (index === -1) {
18 |             products.push(id);
19 |             pushProduct = true;
20 |         } else {
21 |             products.splice(index, 1);
22 |         }
23 | 
24 |         localStorage.setItem(this.keyName, JSON.stringify(products));
25 | 
26 |         return { pushProduct, products };
27 |     }
28 | };
29 | 
30 | const localStorageUtil = new LocalStorageUtil();
31 | 


--------------------------------------------------------------------------------
/components/Shopping/img/close.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 224.512 224.512" style="enable-background:new 0 0 224.512 224.512;" xml:space="preserve">
 5 | <g>
 6 | 	<polygon style="fill:#010002;" points="224.507,6.997 217.521,0 112.256,105.258 6.998,0 0.005,6.997 105.263,112.254 
 7 | 		0.005,217.512 6.998,224.512 112.256,119.24 217.521,224.512 224.507,217.512 119.249,112.254 	"/>
 8 | </g>
 9 | <g>
10 | </g>
11 | <g>
12 | </g>
13 | <g>
14 | </g>
15 | <g>
16 | </g>
17 | <g>
18 | </g>
19 | <g>
20 | </g>
21 | <g>
22 | </g>
23 | <g>
24 | </g>
25 | <g>
26 | </g>
27 | <g>
28 | </g>
29 | <g>
30 | </g>
31 | <g>
32 | </g>
33 | <g>
34 | </g>
35 | <g>
36 | </g>
37 | <g>
38 | </g>
39 | </svg>
40 | 


--------------------------------------------------------------------------------
/css/index.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 | 	--color-light: #f8f9fa;
 3 | 	--color-medium: #e8e8e8;
 4 | 	--color-dark: #a1a1a1;
 5 | 	--color-unaccent: #808080;
 6 | 	--color-white: #fff;
 7 | 	--color-error-light: #f26b6b;
 8 | 	--color-error-dark: #d65c5c;
 9 | 
10 | 	--spacing-small: 10px;
11 | 	--spacing-medium: 15px;
12 | 	--spacing-large: 30px;
13 | 
14 | 	--border-radius: 3px;
15 | 	--linear-gradient: linear-gradient(to right, #e2f87c, #d6f567, #c8f151, #b9ee38, #a8eb12);
16 | 	--box-shadow: 
17 | 		0 16px 24px 2px rgba(33,37,41,.02), 
18 | 		0 6px 30px 5px rgba(33,37,41,.04), 
19 | 		0 8px 10px -5px rgba(33,37,41,.1);
20 | }
21 | 
22 | * {
23 | 	box-sizing: border-box;
24 | }
25 | body {
26 | 	margin: 0;
27 | 	padding: 0;
28 | 	font-family: sans-serif;
29 | 	line-height: 1.7;
30 | 	background: var(--color-light);
31 | }
32 | 
33 | ::-webkit-scrollbar {
34 | 	width: 8px;
35 | }
36 | ::-webkit-scrollbar-thumb {
37 | 	background-color: var(--color-dark);
38 | 	border-radius: 5px;
39 | }
40 | ::-webkit-scrollbar-track {
41 | 	background-color: var(--color-white);
42 | }
43 | 


--------------------------------------------------------------------------------
/components/Products/Products.css:
--------------------------------------------------------------------------------
 1 | .products-container {
 2 | 	display: grid;
 3 |     grid-gap: 45px;
 4 | 	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 5 | 	width: 80%;
 6 | 	max-width: 1200px;
 7 | 	margin: var(--spacing-large) auto;
 8 | }
 9 | .products-element {
10 | 	display: flex;
11 | 	flex-direction: column;
12 | 	justify-content: flex-end;
13 | 	padding: 25px 20px;
14 | 	border-radius: var(--border-radius);
15 | 	background-color: var(--color-white);
16 | 	box-shadow: var(--box-shadow);
17 | }
18 | .products-element__name {
19 | 	margin-bottom: auto;
20 | 	text-transform: uppercase;
21 | 	font-weight: bold;
22 | }
23 | .products-element__img {
24 | 	width: 100%;
25 | 	height: 270px;
26 | 	margin-top: var(--spacing-medium);
27 | 	object-fit: contain;
28 | }
29 | .products-element__price {
30 | 	margin-top: var(--spacing-medium);
31 | 	color: var(--color-unaccent);
32 | }
33 | .products-element__btn {
34 | 	margin-top: var(--spacing-medium);
35 | 	padding: var(--spacing-small) var(--spacing-medium);
36 | 	border: 1px solid var(--color-unaccent);
37 | 	border-radius: var(--border-radius);
38 | 	cursor: pointer;
39 | 	outline: none;
40 | 	background: none;
41 | 	font-family: inherit;
42 | 	font-size: inherit;
43 | }
44 | .products-element__btn_active {
45 | 	border: 1px solid transparent;
46 | 	background-image: var(--linear-gradient);
47 | }
48 | 


--------------------------------------------------------------------------------
/components/Shopping/Shopping.js:
--------------------------------------------------------------------------------
 1 | class Shopping {
 2 |     handlerClear() {
 3 |         ROOT_SHOPPING.innerHTML = '';
 4 |     }
 5 | 
 6 |     render() {
 7 |         const productsStore = localStorageUtil.getProducts();
 8 |         let htmlCatalog = '';
 9 |         let sumCatalog = 0;
10 | 
11 |         CATALOG.forEach(({ id, name, price }) => {
12 |             if (productsStore.indexOf(id) !== -1) {
13 |                 htmlCatalog += `
14 |                     <tr>
15 |                         <td class="shopping-element__name">⚡️ ${name}</td>
16 |                         <td class="shopping-element__price">${price.toLocaleString()} USD</td>
17 |                     </tr>
18 |                 `;
19 |                 sumCatalog += price;
20 |             }
21 |         });
22 | 
23 |         const html = `
24 |             <div class="shopping-container">
25 |                 <div class="shopping__close" onclick="shoppingPage.handlerClear();"></div>
26 |                 <table>
27 |                     ${htmlCatalog}
28 |                     <tr>
29 |                         <td class="shopping-element__name">💥 Сумма:</td>
30 |                         <td class="shopping-element__price">${sumCatalog.toLocaleString()} USD</td>
31 |                     </tr>
32 |                 </table>
33 |             </div>
34 |         `;
35 | 
36 |         ROOT_SHOPPING.innerHTML = html;
37 |     }
38 | };
39 | 
40 | const shoppingPage = new Shopping();
41 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<title>Guitar Shop</title>
 7 | 	<link rel="icon" type="image/png" href="img/favicon.png">
 8 | 	<link rel="stylesheet" href="css/index.css">
 9 | </head>
10 | <body>
11 | 
12 | 	<div id="header"></div>
13 | 	<div id="products"></div>
14 | 	<div id="shopping"></div>
15 | 	<div id="spinner"></div>
16 | 	<div id="error"></div>
17 | 
18 | 	<!-- Constants and Utils -->
19 | 	<script src="constants/root.js"></script>
20 | 	<script src="utils/localStorageUtil.js"></script>
21 | 
22 | 	<!-- Header -->
23 | 	<script src="components/Header/Header.js"></script>
24 | 	<link rel="stylesheet" href="components/Header/Header.css">
25 | 
26 | 	<!-- Products -->
27 | 	<script src="components/Products/Products.js"></script>
28 | 	<link rel="stylesheet" href="components/Products/Products.css">
29 | 
30 | 	<!-- Shopping -->
31 | 	<script src="components/Shopping/Shopping.js"></script>
32 | 	<link rel="stylesheet" href="components/Shopping/Shopping.css">
33 | 
34 |     <!-- Spinner -->
35 |     <script src="components/Spinner/Spinner.js"></script>
36 |     <link rel="stylesheet" href="components/Spinner/Spinner.css">
37 | 
38 |     <!-- Error -->
39 |     <script src="components/Error/Error.js"></script>
40 |     <link rel="stylesheet" href="components/Error/Error.css">
41 | 
42 | 	<script src="index.js"></script>
43 | 
44 | </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/server/catalog.json:
--------------------------------------------------------------------------------
 1 | [
 2 |     {
 3 |         "id": "el1",
 4 |         "name": "FENDER SQUIER BULLET STRAT HT HSS BLK",
 5 |         "img": "https://i.ibb.co/QJfqs4K/1.jpg",
 6 |         "price": 13600
 7 |     },
 8 |     {
 9 |         "id": "el2",
10 |         "name": "FENDER SQUIER AFFINITY",
11 |         "img": "https://i.ibb.co/pKrG5ZJ/2.jpg",
12 |         "price": 23900
13 |     },
14 |     {
15 |         "id": "el3",
16 |         "name": "IBANEZ GIO GRG121DX-BKF BLACK FLAT",
17 |         "img": "https://i.ibb.co/NnvcYhR/3.jpg",
18 |         "price": 21600
19 |     },
20 |     {
21 |         "id": "el4",
22 |         "name": "EPIPHONE LES PAUL STUDIO LT EBONY",
23 |         "img": "https://i.ibb.co/4Tg91WL/4.jpg",
24 |         "price": 19900
25 |     },
26 |     {
27 |         "id": "el5",
28 |         "name": "FENDER SQUIER BULLET TREM HSS AWT",
29 |         "img": "https://i.ibb.co/MC7sy1F/5.jpg",
30 |         "price": 14500
31 |     },
32 |     {
33 |         "id": "el6",
34 |         "name": "FENDER SQUIER BULLET MUSTANG HH BLK",
35 |         "img": "https://i.ibb.co/qNBWPb0/6.jpg",
36 |         "price": 14600
37 |     },
38 |     {
39 |         "id": "el7",
40 |         "name": "FENDER SQUIER BULLET STRAT HT AWT",
41 |         "img": "https://i.ibb.co/WH1h2wV/7.jpg",
42 |         "price": 13600
43 |     },
44 |     {
45 |         "id": "el8",
46 |         "name": "JACKSON JS22-7 DINKY SATIN BLACK",
47 |         "img": "https://i.ibb.co/2cBg9g9/8.jpg",
48 |         "price": 28700
49 |     },
50 |     {
51 |         "id": "el9",
52 |         "name": "JACKSON JS11 DINKY OLYMPIC WHITE",
53 |         "img": "https://i.ibb.co/wKxFRM8/9.jpg",
54 |         "price": 18100
55 |     },
56 |     {
57 |         "id": "el10",
58 |         "name": "YAMAHA PACIFICA 012 WH",
59 |         "img": "https://i.ibb.co/30qJcZX/10.jpg",
60 |         "price": 15990
61 |     }
62 | ]


--------------------------------------------------------------------------------
/components/Products/Products.js:
--------------------------------------------------------------------------------
 1 | class Products {
 2 |     constructor() {
 3 |         this.classNameActive = 'products-element__btn_active';
 4 |         this.labelAdd = 'Добавить в корзину';
 5 |         this.labelRemove = 'Удалить из корзины';
 6 |     }
 7 | 
 8 |     handlerSetLocatStorage(element, id) {
 9 |         const { pushProduct, products } = localStorageUtil.putProducts(id);
10 | 
11 |         if (pushProduct) {
12 |             element.classList.add(this.classNameActive);
13 |             element.innerText = this.labelRemove;
14 |         } else {
15 |             element.classList.remove(this.classNameActive);
16 |             element.innerText = this.labelAdd;
17 |         }
18 | 
19 |         headerPage.render(products.length);
20 |     }
21 | 
22 |     render() {
23 |         const productsStore = localStorageUtil.getProducts();
24 |         let htmlCatalog = '';
25 | 
26 |         CATALOG.forEach(({ id, name, price, img }) => {
27 |             let activeClass = '';
28 |             let activeText = '';
29 | 
30 |             if (productsStore.indexOf(id) === -1) {
31 |                 activeText = this.labelAdd;
32 |             } else {
33 |                 activeClass = ' ' + this.classNameActive;
34 |                 activeText = this.labelRemove;
35 |             }
36 | 
37 |             htmlCatalog += `
38 |                 <li class="products-element">
39 |                     <span class="products-element__name">${name}</span>
40 |                     <img class="products-element__img" src="${img}" />
41 |                     <span class="products-element__price">
42 |                         ⚡️ ${price.toLocaleString()} USD
43 |                     </span>
44 |                     <button class="products-element__btn${activeClass}" onclick="productsPage.handlerSetLocatStorage(this, '${id}');">
45 |                         ${activeText}
46 |                     </button>
47 |                 </li>
48 |             `;
49 |         });
50 | 
51 |         const html = `
52 |             <ul class="products-container">
53 |                 ${htmlCatalog}
54 |             </ul>
55 |         `;
56 | 
57 |         ROOT_PRODUCTS.innerHTML = html;
58 |     }
59 | };
60 | 
61 | const productsPage = new Products();
62 | 


--------------------------------------------------------------------------------