diff --git a/index.html b/index.html index ddc8250..14e0903 100644 --- a/index.html +++ b/index.html @@ -1,69 +1,43 @@ - - + + Заказ кофе - - - -
-
-

Напиток №1

- -
- Сделайте напиток на - - - - -
-
- Добавьте к напитку: - - - - -
-
-
+ + + + +
-
-
- -
- - - - - +
+ +
+ +
+
+
+

Заказ принят!

+ +
+ + + + + + + + + + +
НапитокМолокоДополнительноПожелания
+
+ + +
+
+
+ + + \ No newline at end of file diff --git a/index.js b/index.js index e69de29..f9bd4d3 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,159 @@ +let beverages = document.getElementsByClassName("beverage"); + +document.querySelector("form").prepend(Beverage(1, 1)); + +let totalBeverageCount = 1; +document.querySelector(".add-button").addEventListener("click", function () { + beverages[beverages.length - 1].after(Beverage(beverages.length + 1, ++totalBeverageCount)); +}); + +document.querySelector(".submit-button").addEventListener("click", function () { + document.querySelector(".modal-wrapper").style.display = "flex"; + document.querySelector(".beverage-count").textContent = "Вы заказали " + beverageDeclension(beverages.length); + let tableBody = document.querySelector(".beverages-table tbody"); + tableBody.innerHTML = ""; + for (let b of beverages) { + tableBody.append(toTableRow(b)); + } +}); + +function beverageDeclension(count) { + if (count % 10 === 1 && !(count % 100 === 11)) + return `${count} напиток`; + else if (count % 10 > 1 && count % 10 < 5 && (count % 100 < 12 || count % 100 > 14)) + return `${count} напитка`; + else + return `${count} напитков`; +} + +let localizationDir = { + "espresso": "Эспрессо", + "capuccino": "Капучино", + "cacao": "Какао", + "usual": "обычное", + "no-fat": "обезжиренное", + "soy": "соевое", + "coconut": "кокосовое", + "whipped cream": "взбитые сливки", + "marshmallow": "зефир", + "chocolate": "шоколад", + "cinnamon": "корица" +}; + +function toTableRow(beverage) { + let row = document.createElement("tr"); + + let type = row.insertCell(); + for (let coffeeType of beverage.querySelectorAll(".coffee-type option")) { + if (coffeeType.selected) type.textContent = localizationDir[coffeeType.value]; + } + + let milk = row.insertCell(); + for (let milkType of beverage.querySelectorAll(".coffee-milk input")) { + if (milkType.checked) milk.textContent = localizationDir[milkType.value]; + } + + let options = row.insertCell(); + options.textContent = Array.from(beverage.querySelectorAll(".coffee-options input")) + .filter(c => c.checked) + .map(c => localizationDir[c.value]) + .join(", "); + + let wishes = row.insertCell(); + wishes.innerHTML = beverage.querySelector(".coffee-wishes .textarea-duplicate").innerHTML; + + return row; +} + +document.querySelector(".close-button").addEventListener("click", function () { + document.querySelector(".modal-wrapper").style.display = "none"; +}); + +function removeBeverage(event) { + if (beverages.length > 1) { + event.currentTarget.parentNode.remove(); + refreshBeveragesNumbers(); + } +} + +function refreshBeveragesNumbers() { + Array.from(beverages) + .forEach((e, i) => e.querySelector(".beverage-number").textContent = `Напиток №${i + 1}`); +} + +function duplicate(event) { + event.target.parentNode.querySelector(".textarea-duplicate").innerHTML = event.target.value + .replace(/срочно|быстрее|побыстрее|скорее|поскорее|очень нужно/gi, match => `${match}`) +} + +document.querySelector(".checkout-button").addEventListener("click", function () { + let timeField = document.getElementById("time-field"); + let time = timeField.value.split(":"); + if ((+time[0] * 60 + +time[1]) < (new Date().getHours() * 60 + new Date().getMinutes())) { + timeField.style.borderColor = "red"; + alert("Мы не умеем перемещаться во времени. Выберите время позже, чем текущее") + } else { + timeField.style.borderColor = "black"; + document.querySelector(".modal-wrapper").style.display = "none"; + } +}) + +function Beverage(number, id) { + let beverage = document.createElement("fieldset"); + beverage.className = "beverage"; + beverage.innerHTML = `

Напиток №${number}

+ + +
+ Сделайте напиток на + + + + +
+
+ Добавьте к напитку: + + + + +
+
+ +
`; + return beverage; +} \ No newline at end of file diff --git a/styles.css b/styles.css index 68f5581..08ed79a 100644 --- a/styles.css +++ b/styles.css @@ -1,10 +1,11 @@ .beverage { + position: relative; border: 1px solid #eee; margin: 15px 0; padding: 15px; } -.beverage-count { +.beverage-number { margin: 0 0 15px; } @@ -12,22 +13,18 @@ display: block; margin-bottom: 10px; } - .label-text { display: inline-block; width: 80px; } - .checkbox-label { margin-bottom: 5px; display: inline-block; } - .checkbox-field { margin: 5px 0; display: block; } - .add-button { border: none; background: none; @@ -37,11 +34,49 @@ text-decoration: underline dashed; cursor: pointer; } - .submit-button { font-size: 16px; padding: 7px 15px; border: 2px solid orange; border-radius: 5px; + margin-top: 30px; +} + +.modal-wrapper { + position: fixed; + display: none; + align-items: center; + justify-content: center; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); +} + +.modal { + position: relative; + width: 500px; + border: 2px solid black; + background-color: white; + text-align: center; + padding: 10px; +} + +.remove-button, .close-button { + position: absolute; + top: 5px; + right: 5px; + color: white; + background-color: red; +} + +.beverages-table { + margin: 10px auto; + border-collapse: collapse; } +.beverages-table th, .beverages-table td { + border: 1px solid black; + padding: 5px; +} \ No newline at end of file