From 7a442db07afc927f187c2f1def1324fca903eb7f Mon Sep 17 00:00:00 2001 From: dclxxxvi Date: Fri, 12 Nov 2021 17:55:09 +0500 Subject: [PATCH] 1-6 done --- index.html | 140 +++++++++++++++++++++++++++++------------------------ index.js | 77 +++++++++++++++++++++++++++++ styles.css | 78 +++++++++++++++++++++++++++++ 3 files changed, 233 insertions(+), 62 deletions(-) diff --git a/index.html b/index.html index ddc8250..05760de 100644 --- a/index.html +++ b/index.html @@ -1,69 +1,85 @@ - - + + Заказ кофе - - - -
-
-

Напиток №1

- -
- Сделайте напиток на - - - - + + + +
-
- -
-
- -
+
+ +
+
+ + +
+
+
+

Напиток №1

+ + +
+ Сделайте напиток на + + + + +
+
+ Добавьте к напитку: + + + + +
+
+
+
+ +
+
+ +
- - + + diff --git a/index.js b/index.js index e69de29..d50e5a5 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,77 @@ +let count = 1; +const example = document.querySelector(".beverage-form"); +const conversion = { + "espresso": "Эспрессо", + "capuccino": "Капучино", + "cacao": "Какао", + "usual": "обычное молоко", + "no-fat": "обезжиренное молоко", + "soy": "соевое молоко", + "coconut": "кокосовое молоко", + "whipped cream": "взбитые сливки", + "marshmallow": "зефир", + "chocolate": "шоколад", + "cinnamon": "корица" +}; + +function deleteCoffee(elem) { + if (count === 1) + return; + count--; + let numToDel = getNumber(elem); + elem.parentNode.removeChild(elem); + for (let drink of document.querySelectorAll(".beverage-form")) { + const numOfCoffee = getNumber(drink); + if (numOfCoffee > numToDel) { + drink.id = `form${numOfCoffee - 1}`; + drink.querySelector(".beverage-count").textContent = `Напиток №${numOfCoffee - 1}`; + } + } +} + +getNumber = (elem) => { + return +elem.id.slice(4); +}; + +function showLightbox() { + document.querySelector(".hidden").style.display = "flex"; + document.querySelector(".countOfCoffee").textContent = getText(count); + document.querySelector("table").innerHTML = makeTable(document.querySelectorAll(".beverage-form")); +} + +getText = (countOfCoffee) => { + const orderText = `Вы заказали ${countOfCoffee}`; + if (countOfCoffee % 10 === 1 && !(countOfCoffee % 100 === 11)) + return `${orderText} напиток`; + else if (countOfCoffee % 10 > 1 && countOfCoffee % 10 < 5 && (countOfCoffee % 100 < 12 || countOfCoffee % 100 > 14)) + return `${orderText} напитка`; + else + return `${orderText} напитков`; +} + +function addCoffee() { + count++; + const newDrink = example.cloneNode(true); + newDrink.id = `form${count}`; + newDrink.innerHTML = newDrink.innerHTML.replace("Напиток №1", `Напиток №${count}`); + document.querySelector(".beverages").append(newDrink); +} + +makeTable = (forms) => { + let rows = 'НапитокМолокоДополнительно'; + forms.forEach(form => { + const fromData = new FormData(form); + rows += "" + convertToRow(fromData) + ""; + }) + return rows; +} + +convertToRow = (formData) => { + return ` + ${conversion[formData.get('type')]} + ${conversion[formData.get('milk')]} + ${formData.getAll('options').map(option => conversion[option]).join(", ")}`; +} + +addCoffee(); +deleteCoffee(example); diff --git a/styles.css b/styles.css index 68f5581..8921ae4 100644 --- a/styles.css +++ b/styles.css @@ -1,7 +1,9 @@ .beverage { + position: relative; border: 1px solid #eee; margin: 15px 0; padding: 15px; + width: 300px; } .beverage-count { @@ -45,3 +47,79 @@ border-radius: 5px; } +.lightbox { + width: 500px; + position: relative; + background-color: #FFFFFF; + z-index: 2; +} + +.lightbox-head { + display: flex; + justify-content: space-between; +} + +.textarea { + display: flex; + align-items: flex-start; +} + +.comment-text { + margin-left: 30px; +} + +.lightbox-form { + margin: 5px auto 10px 30px; +} + +.countOfCoffee { + margin: 10px auto auto 30px; + text-align: center; + font-size: medium; +} + +.lightboxClose { + top: 0; + right: 0; + position: relative; +} + +table { + text-align: center; + width: 480px; + margin: 10px; + border-collapse: collapse; + border: 1px solid black; +} + +table tr:nth-child(2n) { + background-color: lightgray; +} + +th { + border-bottom: 1px solid grey; +} + +td { + border-top: 1px solid grey; +} + +.close { + position: absolute; + top: 10px; + right: 10px; +} + +.hidden { + backdrop-filter: blur(2px); + background-color: rgba(0, 0, 0, 0.3); + height: 100%; + width: 100%; + position: fixed; + display: none; + justify-content: center; + align-items: center; + z-index: 5; + top: 0; + left: 0; +} \ No newline at end of file