VazhikVM · VazhikVM · Sep 21, 2021
diff --git a/img/Image1.png b/img/Image1.png
diff --git a/img/Image2.png b/img/Image2.png
diff --git a/img/Image3.png b/img/Image3.png
diff --git a/img/Image4.png b/img/Image4.png
diff --git a/img/Image5.png b/img/Image5.png
diff --git a/img/Image6.png b/img/Image6.png
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Lesson-6.</title>
+	<link rel="stylesheet" href="style.css" />
+</head>
+<body>
+	<div id="wrapper">
+		<h1>Lesson-6.</h1>
+		<h3><b>Task-1.</b> Продолжаем реализовывать модуль корзины:<br>
+		— Добавлять в объект корзины выбранные товары по клику на кнопке «Купить» без
+		перезагрузки страницы;<br>
+		— Привязать к событию покупки товара пересчет корзины и обновление ее внешнего
+		вида.<br>
+		<b>Task-2*.</b> У товара может быть несколько изображений. Нужно:<br>
+		— Реализовать функционал показа полноразмерных картинок товара в модальном окне;<br>
+		— Реализовать функционал перехода между картинками внутри модального окна.</h3>
+
+		<div id="catalog"></div>
+		<footer id="basket"></footer>
+		<div id="popup"></div>
+	</div>
+	<script type="text/javascript" src="script.js"></script>
+
+</body>
+</html>
+
diff --git a/script.js b/script.js
@@ -0,0 +1,134 @@
+// создаем объект каталога
+function Item(product, image, description, price, discount=0) {
+    this.product = product;
+    this.image = `img/${image}.png`;
+    this.description = description;
+    this.price = price;
+    this.discount = discount
+}
+
+let catalodList = []
+
+catalodList.push(new Item('Lloyd', 'Image1', 'Make a BIG impression', 95, 20));
+catalodList.push(new Item('Djay', 'Image2', 'Has a removable, fabric robe', 17));
+catalodList.push(new Item('Zein', 'Image3', 'Individual sets of building', 15));
+catalodList.push(new Item('Kai', 'Image4', 'Components are dropped', 32, 10));
+catalodList.push(new Item('Master Voo', 'Image5', 'Models carry brick-built', 22));
+catalodList.push(new Item('Mech', 'Image6', 'The perfect building toys for kids', 22));
+
+// создаем отображение каталога
+function drowItems() {
+    catalodList.forEach(function (item, i) {
+        drowItem(item, i);
+    })
+}
+
+const $catalog = document.querySelector('#catalog');
+function drowItem(item, id) {
+    $catalog.insertAdjacentHTML('beforeend', 
+    `<div id="item-${id}" class="prod_item">
+        <div class="item">
+            <div class="image"><img src="${item.image}"></div>
+            <div class="description"><h4>${item.product}</h4>${item.description}
+                <div class="price">Цена: 
+                    <span>${item.price}</span> руб.
+                </div>
+            </div>
+        </div>
+        <div class="sale">
+            <span class='offer ${item.discount > 0 ? 'show' : ''}'>Скидка: ${item.discount}%</span>
+            <div data-id="${id}" class="button">В корзину</div>
+        </div>
+    </div>`);
+}
+drowItems(catalodList);
+
+
+// ----------- создаем объект корзины -----------
+let shoppingCart = [];
+
+// ----------- руками для теста напихаем -----------
+// shoppingCart.push(new basketItem('product_name_1', 10, 10));
+// shoppingCart.push(new basketItem('product_name_2', 5));
+// shoppingCart.push(new basketItem('product_name_3', 15));
+// -------------------------------------------------
+
+let emptyBasket = 'Ваша корзина пуста.';
+
+function basketItem(product, price, discount=0) {
+    this.product = product;
+    this.price = price;
+    this.discount = discount;
+    this.finalPrice = function() {
+        if (this.discount != 0) {
+            return this.price - this.price*this.discount/100;
+        } else {
+            return this.price;
+        }
+    }
+}
+
+// получаем итоговую сумму
+function totalSumm(shoppingCart) {
+    return shoppingCart.reduce(function (acc, price) {
+        return acc + price.finalPrice();
+    }, 0);
+}
+
+// так по приколу, правильные окончания
+function correctEnding (){
+    let corEnd = '';
+    if (shoppingCart.length == 1) {
+        corEnd = '';
+    } else if (shoppingCart.length > 1 && shoppingCart.length <= 4) {
+        corEnd = 'а';
+    } else {
+        corEnd = 'ов';
+    }
+    return corEnd;
+}
+
+// создаем отображение корзины
+function drowTotal (shoppingCart) {
+    const $basket = document.querySelector('#basket');
+    $basket.textContent = '';
+
+    if (shoppingCart == 0) {
+        $basket.insertAdjacentHTML('beforeend', `<div class="total">${emptyBasket}</div>`);
+    } else {
+        $basket.insertAdjacentHTML('beforeend', 
+        `<div class="total">
+            <p>В корзине: ${shoppingCart.length} 
+            товар${correctEnding()} на сумму ${totalSumm(shoppingCart)} рублей.</p>
+            <a class="buy" href="#">Купить</a>
+        </div>`);
+    }
+}
+drowTotal(shoppingCart);
+
+// событие - добавление объекта в корзину
+$catalog.addEventListener('click', function (e) {
+    if (e.target.className ==='button' ) {
+        const id = Number(e.target.getAttribute('data-id'));
+        const choice = catalodList[id];
+        shoppingCart.push(new basketItem(choice.product, choice.price, choice.discount));
+
+        drowTotal(shoppingCart);
+    } 
+});
+
+// работаем с #popup
+const $popup = document.querySelector('#popup');
+
+$popup.addEventListener('click', function(e) {
+    $popup.style.display = 'none';
+});
+
+ $catalog.addEventListener('click', function(e) {
+    if( e.target.tagName === 'IMG' ) {
+        $popup.textContent = '';
+        $popup.style.display = 'flex';
+        $popup.insertAdjacentHTML('beforeend',
+            `<img src="${e.target.getAttribute('src')}" class="scale">`);
+    }
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,144 @@
+*{
+	margin: 0;
+	padding: 0;
+}
+h1{
+	color: rgb(0, 0, 0);
+	width: 100%;
+	margin: 0 auto;
+	display: block;
+	text-align: center;
+	padding: 30px 0 0;
+}
+h3{
+	color: rgb(0, 0, 0);
+	display: block;
+	padding: 20px;
+	margin: 20px;
+	border: 1px dotted rgb(0, 0, 0);
+	border-radius: 5px;
+	font-weight: 200;
+	width: 100%;
+	background: rgb(197, 178, 178);
+}
+
+#wrapper{
+	display: flex;
+	width: 800px;
+	margin: 0 auto;
+	flex-direction: column;
+	align-items: center;
+	position: relative;
+}
+#catalog{
+	display: flex;
+	min-height: 100px;
+	width: 100%;
+	padding: 20px;
+	border: 1px dotted rgb(0, 0, 0);
+	border-radius: 5px;
+	flex-direction: column;
+	margin-bottom: 100px;
+}
+.prod_item{
+	display: flex;
+	width: 100%;
+	margin: 10px 0;
+	box-shadow: 0 0 6px 1px lightblue;
+	justify-content: space-between;
+}
+.item{
+	display: flex;
+	margin-left: 10px;
+}
+.image{
+	height: 100%;
+}
+.image:hover{
+	cursor: zoom-in; 
+}
+
+.description{
+	height: 100%;
+	margin-left: 30px;
+}
+.description h4{
+	font-size: 2em;
+	padding: 10px 0;
+}
+.price{
+	color: darkslateblue;
+}
+.price span{
+	font-size: 3em;
+}
+.offer{
+	visibility: hidden;
+	margin-left: 30px;
+	background: lightcoral;
+	font-size: 1.5em;
+}
+.show{
+	visibility: visible;
+	padding: 5px;
+}
+.sale{
+	display: flex;
+	width: 200px;
+	flex-direction: column;
+	align-items: flex-end;
+    justify-content: inherit;
+	margin: 10px;
+}
+.button{
+	display: block;
+	width: 100%;
+	background: lightblue;
+	padding: 10px;
+	text-align: center;
+	font-size: larger;
+	cursor: pointer;
+}
+.button:hover{
+	background: #4a93ab;
+}
+
+footer{
+	display: flex;
+	background: aqua;
+	position: fixed;
+	bottom: 0px;
+	height: 40px;
+	width: 100%;
+	margin-top: 30px;
+	padding: 20px;
+	align-items: center;
+	justify-content: center;
+}
+.total{
+	display: flex;
+	width: 800px;
+	font-size: 2em;
+	justify-content: space-between;
+	align-items: center;
+}
+.buy{
+	color: red;
+	display: block;
+	padding: 3px 10px;
+	border: 2px solid red;
+	text-decoration: none;
+}
+#popup{
+	position: fixed;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    background: rgba(100, 113, 113, 0.82);
+    display: none;
+    height: 100vh;
+    cursor: zoom-out;
+}
+.scale{
+	transform: scale(2);
+}