-
Сделайте напиток на
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
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