Прототип интернет-магазина

Корзина и товары Lesson 1, Advanced JS, Shashkov

by shurikation

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Интернет-магазин</title>
</head>
<body>
  <header>
  
  <div class="cart-warpper">
  <h4>Cart</h4>
    <button class='btn-cart' type='button'>Buy</button>
    </div>
  </header>
  
  <main>
  <div class="product-wrapper">
    <div class="products"></div>
    </div>
  </main>
</body>
</html>

CSS

.cart-warpper {
  background-color: #31DA1A;
  height: 80px;
};

.product-wrapper {
  width: 300px;
  height: 700px;
  background-color: #259D15;
};

.product-item {
  background-color: #259D15;
  height: 300px;
  width: 100px;
}

JavaScript

//Версии фидла:
// #0 - #63: Урок 1 - Продвинутый JS + готовое ДЗ (но лучше на флешке найти файлы Шторма и сопоставить)
// #63 - #103: Урок 2 - Продвинутый JS + готовое ДЗ (но лучше на флешке найти файлы Шторма и сопоставить)

//Урок 3 в отдельном файле уже

const products = [
	{id: 1, title: 'Notebook', price: 100},
  {id: 2, title: 'Mouse', price: 200},
  {id: 3, title: 'Keyboard', price: 400},
  {id: 4, title: 'Gamepad', price: 800, img: 'Ссылка на заглушку'},
];

const renderProduct = (item) => 
				`<div class='product-item'>
  			<h3>${item.title}</h3>
        <p>${item.price}</p>
        <button class='buy-btn'>Add</button></div>`;
 				

//Вариант 2:
/* const renderProduct = ({title, price}) => //деструктуризация объекта
        `<div class='product-item'>
        <h3>${title}</h3>
        <p>${price}</p>
        <button class='buy-btn'>Add</button></div>`;
 */

const renderProducts = (list) => 
/* 	document.querySelector('.products').innerHTML = list.map(item => renderProduct(item)); */
  document.querySelector('.products').insertAdjacentHTML('beforeend', productList); //этот способ более производительнее, чем innerHTML, и даже чем document.creatElement вроде так. Метод более правильно работает, формирует узел и вставляет его в разметку, в отличие от appendChild

//map - это итеративный метод, который переберает массив, и каждый раз вызывает коллбэк функцию с новым элементом в массиве

renderProducts(products);
  
  //map это итеративный метод, который переберает массив, и каждый раз вызывает коллбэк функцию с новым элементом в массиве

//******************Еще вариант*****************//
const goods = [
	{title: 'Mouse', price: 400},
  {title: 'Keyboard', price: 400},
  {title: 'Laptop', price: 400},
  {title: 'Router', price: 400},
  
]; //В барузере есть помимо всего прочего оптимизатор. Перед выполнением кода его оптимизирует. И const хорошо поддаются оптимизации, пожтому их надо ставить как можно чаще. Это экономия на спичках, но важно.

const...