diff --git a/index.html b/index.html index ddc8250..fcc350e 100644 --- a/index.html +++ b/index.html @@ -6,64 +6,23 @@ -
-
-

Напиток №1

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

Ваш заказ

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

Ваш заказ

-
-
-
-
- -
-
- + diff --git a/index.js b/index.js index e69de29..fbc3735 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,179 @@ +let countOnMenu = 0 +const submitButton = document.querySelector(".submit-button"); +const addButton = document.querySelector(".add-button"); + +function createForm() { + const form = document.createElement("form") + form.classList.add("beverage-form") + + form.innerHTML = + `
+
+

Напиток №${countOnMenu + 1}

+
+ +
+ Сделайте напиток на + + + + +
+
+ Добавьте к напитку: + + + + +
+
`; + + return form; +} + +submitButton.onclick = () => { + const mod = new ModalWindow(); + mod.show() +} + +addButton.onclick = () => { + const form = createForm(); + addForm(form); +} + +function addForm(form) { + document.body.insertBefore(form, document.getElementById("add-button-container")); + countOnMenu++ + + const fieldSetHeader = form.querySelector(".beverage-header"); + fieldSetHeader.appendChild(createReButton(form)); +} + +function createReButton(form) { + const reButton = document.createElement("div"); + + reButton.classList.add("remove-button"); + reButton.textContent = "X"; + + reButton.onclick = function () { + if (countOnMenu <= 1) return; + document.body.removeChild(form); + countOnMenu--; + updateDrinkNumbers(); + }; + + return reButton; +} + +function updateDrinkNumbers() { + const numberDrink = document.querySelectorAll(".beverage-count"); + for (let i = 0; i < countOnMenu; i++) + numberDrink[i].textContent = `Напиток №${i + 1}`; +} + +class ModalWindow { + + constructor() { + this.modalContainer = document.querySelector(".mod-container"); + + const modalClose = document.getElementById("mod-close"); + modalClose.onclick = () => this.hide(); + + const modalText = this.modalContainer.querySelector(".mod-text"); + const ending = countOnMenu % 10 === 1 ? "ок" : + countOnMenu % 10 >= 2 && countOnMenu % 10 <= 4 ? "ка" : "ков"; + modalText.textContent = `Вы заказали ${countOnMenu} напит${ending}`; + + this.modalContainer.querySelector(".mod-body").appendChild(this.createOrderTable()); + }; + + createOrderTable() { + const table = document.createElement("table"); + table.classList.add("order-table"); + table.innerHTML = ` + + Напиток + Молоко + Дополнительно + + `; + + for (let form of document.querySelectorAll(".beverage-form")) { + const formData = new FormData(form); + const dataKeys = ["coffee", "milk", "options"]; + + const tableRow = document.createElement("tr"); + + for (let key of dataKeys) { + const column = document.createElement("td"); + + const values = formData.getAll(key).map(e => ModalWindow.#translate(e)); + column.textContent = values.join(", "); + + tableRow.appendChild(column); + } + + table.appendChild(tableRow); + } + + return table; + } + + hide() { + this.modalContainer.querySelector(".order-table").remove(); + this.modalContainer.style.visibility = "hidden"; + }; + + show() { + this.modalContainer.style.visibility = "visible"; + }; + + static #translate(word) { + switch(word) { + case "espresso": return "Эспрессо"; + case "capuccino": return "Капучино"; + case "cacao": return "Какао"; + + case "usual": return "Обычное молоко"; + case "no-fat": return "Обезжиренное молоко"; + case "soy": return "Соевое молоко"; + case "coconut": return "Кокосовое молоко"; + + case "whipped-cream": return "Взбитые сливки"; + case "marshmallow": return "Зефирки"; + case "chocolate": return "Шоколад"; + case "cinnamon": return "Корица"; + } + } +} diff --git a/styles.css b/styles.css index 68f5581..bc81056 100644 --- a/styles.css +++ b/styles.css @@ -2,6 +2,12 @@ border: 1px solid #eee; margin: 15px 0; padding: 15px; + display: inline-block; +} + +.beverage-header { + display: flex; + justify-content: space-between; } .beverage-count { @@ -43,5 +49,71 @@ padding: 7px 15px; border: 2px solid orange; border-radius: 5px; + cursor: pointer; +} + +.remove-button { + cursor: pointer; + font-weight: bold; + padding: 4px 4px; + margin: 4px; + height: 100%; + border: 2px solid black; + border-radius: 5px; + transition: 0.3s; +} + +.remove-button:hover { + background-color: #ff6767; + transition: 0.1s; +} + +.order-table{ + table-layout: fixed; + width: 100%; + border-collapse: collapse; +} + +.order-table th, .order-table { + border: 1px solid black; +} + +.order-table td { + border:1px solid grey; +} + +.modal-container { + visibility: hidden; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.4); + position: fixed; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.modal { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + width: 750px; + position: fixed; + background-color: white; + padding: 15px; +} + +.modal-header { + display: flex; + justify-content: space-between; +} + +.modal-footer { + margin-top: 15px; +} + +#modal-close { + cursor: pointer; }