diff --git a/img/Image1.png b/img/Image1.png new file mode 100644 index 0000000..48c910f Binary files /dev/null and b/img/Image1.png differ diff --git a/img/Image2.png b/img/Image2.png new file mode 100644 index 0000000..ee6ac03 Binary files /dev/null and b/img/Image2.png differ diff --git a/img/Image3.png b/img/Image3.png new file mode 100644 index 0000000..4f72818 Binary files /dev/null and b/img/Image3.png differ diff --git a/img/Image4.png b/img/Image4.png new file mode 100644 index 0000000..7cf6397 Binary files /dev/null and b/img/Image4.png differ diff --git a/img/Image5.png b/img/Image5.png new file mode 100644 index 0000000..e17af7a Binary files /dev/null and b/img/Image5.png differ diff --git a/img/Image6.png b/img/Image6.png new file mode 100644 index 0000000..4b395db Binary files /dev/null and b/img/Image6.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..08bc3e7 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + Lesson-6. + + + +
+

Lesson-6.

+

Task-1. Продолжаем реализовывать модуль корзины:
+ — Добавлять в объект корзины выбранные товары по клику на кнопке «Купить» без + перезагрузки страницы;
+ — Привязать к событию покупки товара пересчет корзины и обновление ее внешнего + вида.
+ Task-2*. У товара может быть несколько изображений. Нужно:
+ — Реализовать функционал показа полноразмерных картинок товара в модальном окне;
+ — Реализовать функционал перехода между картинками внутри модального окна.

+ +
+ + +
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..1f3bfca --- /dev/null +++ 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', + `
+
+
+

${item.product}

${item.description} +
Цена: + ${item.price} руб. +
+
+
+
+ Скидка: ${item.discount}% +
В корзину
+
+
`); +} +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', `
${emptyBasket}
`); + } else { + $basket.insertAdjacentHTML('beforeend', + `
+

В корзине: ${shoppingCart.length} + товар${correctEnding()} на сумму ${totalSumm(shoppingCart)} рублей.

+ Купить +
`); + } +} +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', + ``); + } +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..31b5f36 --- /dev/null +++ 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); +} \ No newline at end of file