From 61bafdc6e0243b9fc6170ea4bb27a883c401ea99 Mon Sep 17 00:00:00 2001 From: Pavuuk <88192739+Pavuuk@users.noreply.github.com> Date: Thu, 11 Nov 2021 23:25:13 +0500 Subject: [PATCH 1/4] master --- index.html | 2 +- index.js | 29 +++++++++++++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index ddc8250..a4b333f 100644 --- a/index.html +++ b/index.html @@ -57,7 +57,7 @@

Напиток №1

- +
diff --git a/index.js b/index.js index e69de29..c970575 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,29 @@ +document.getElementById('add-button').onclick = addList; + +function addList() +{ + let list = document.querySelectorAll ('fieldset'); + let clone = list[0].cloneNode(true); + let countOfmenu = list.length; + clone.children[0].innerHTML = 'Напиток №' + (countOfmenu + 1); + rec = clone.querySelectorAll('input[type="x"]'); + for (let x of rec) x.name = 'milk' + countOfmenu; + list[countOfmenu - 1].after(clone); +} +function moveList() +{ + let list = document.querySelectorAll ('fieldset'); + let move = this.parentNode; + if (list.length > 1) + { + move.remove(); + list = document.querySelectorAll ('fieldset'); + for (let i = 0; i < list.length; i++) + { + rec = list[i].querySelectorAll('input[type="x"]'); + for (let x of rec) x.name = 'milk' + i; + list[i].children[0].innerHTML = 'Напиток №' + (i + 1); + } + + }; +} \ No newline at end of file From 5558985e3516dd48a9f45b5aa1f373566bddd7b1 Mon Sep 17 00:00:00 2001 From: Pavuuk <88192739+Pavuuk@users.noreply.github.com> Date: Fri, 12 Nov 2021 15:26:55 +0500 Subject: [PATCH 2/4] =?UTF-8?q?=D0=9D=D0=BE=D0=B2=D0=BE=D0=B6=D0=B8=D0=BB?= =?UTF-8?q?=D0=BE=D0=B2=D0=B0=20=D0=95=D0=BA=D0=B0=D1=82=D0=B5=D1=80=D0=B8?= =?UTF-8?q?=D0=BD=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 69 ++++-------------- index.js | 200 ++++++++++++++++++++++++++++++++++++++++++++++------- styles.css | 72 +++++++++++++++++++ 3 files changed, 261 insertions(+), 80 deletions(-) diff --git a/index.html b/index.html index a4b333f..fcc350e 100644 --- a/index.html +++ b/index.html @@ -6,64 +6,23 @@ -
-
-

Напиток №1

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

Ваш заказ

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

Ваш заказ

-
-
-
-
- -
-
- +
diff --git a/index.js b/index.js index c970575..445b049 100644 --- a/index.js +++ b/index.js @@ -1,29 +1,179 @@ -document.getElementById('add-button').onclick = addList; - -function addList() -{ - let list = document.querySelectorAll ('fieldset'); - let clone = list[0].cloneNode(true); - let countOfmenu = list.length; - clone.children[0].innerHTML = 'Напиток №' + (countOfmenu + 1); - rec = clone.querySelectorAll('input[type="x"]'); - for (let x of rec) x.name = 'milk' + countOfmenu; - list[countOfmenu - 1].after(clone); +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 moveList() -{ - let list = document.querySelectorAll ('fieldset'); - let move = this.parentNode; - if (list.length > 1) - { - move.remove(); - list = document.querySelectorAll ('fieldset'); - for (let i = 0; i < list.length; i++) - { - rec = list[i].querySelectorAll('input[type="x"]'); - for (let x of rec) x.name = 'milk' + i; - list[i].children[0].innerHTML = 'Напиток №' + (i + 1); + +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 "Корица"; + } + } } \ No newline at end of file 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; } From 18ca32c92037bd61d18bbef2daa31e720542204d Mon Sep 17 00:00:00 2001 From: Pavuuk <88192739+Pavuuk@users.noreply.github.com> Date: Fri, 19 Nov 2021 14:05:47 +0500 Subject: [PATCH 3/4] Delete index.js --- index.js | 179 ------------------------------------------------------- 1 file changed, 179 deletions(-) delete mode 100644 index.js diff --git a/index.js b/index.js deleted file mode 100644 index 445b049..0000000 --- a/index.js +++ /dev/null @@ -1,179 +0,0 @@ -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 "Корица"; - } - } -} \ No newline at end of file From e58c61e0035e41039f3ba6ebd5b9f588454bda65 Mon Sep 17 00:00:00 2001 From: Pavuuk <88192739+Pavuuk@users.noreply.github.com> Date: Fri, 19 Nov 2021 14:23:21 +0500 Subject: [PATCH 4/4] Create index.js --- index.js | 179 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 index.js diff --git a/index.js b/index.js new file mode 100644 index 0000000..fbc3735 --- /dev/null +++ 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 "Корица"; + } + } +}