diff --git a/index.html b/index.html index ddc8250..2d25e87 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,21 @@ - - - Заказ кофе - - - -
+ + + Заказ кофе + + + + +
+
-

Напиток №1

+

Напиток №1

+
-
- -
-
- -
- +
+
+
+ +
+
+ +
+ - - - + + + \ No newline at end of file diff --git a/index.js b/index.js index e69de29..b443be3 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,186 @@ +let r = new RegExp("\d+"); +let count = 2; +let arr = ["срочно", "быстрее","побыстрее","скорее","поскорее","очень нужно"]; + +let form = document.querySelector("form") +let formDrink = document.querySelector(".form-drink"); +let bodyForm = document.querySelector(".forms-drinks"); +let addFormDrink = document.querySelector(".add-button"); +let submitButton = document.querySelector(".submit-button"); +let textarea = formDrink.querySelector("textarea"); + +const textareaFunc = (e) => { + console.log(e); + let text = e.target; + for (let i of arr) { + if (text.value.includes(i) && !text.value.includes(`${i}`)) { + text.value = text.value.replace(i, `${i}`); + } + } +}; +textarea.oninput = textareaFunc; + + +addFormDrink.addEventListener("click", (e) => { + let newCoffee = formDrink.cloneNode(true); + let h4 = newCoffee.querySelector("h4"); + h4.textContent = h4.textContent.slice(0, -1) + count; + newCoffee.innerHTML = newCoffee.innerHTML.replace(/milk\d+/g, `milk${count}`); + newCoffee.id = `form${count}`; + newCoffee.querySelector("textarea").oninput = textareaFunc; + bodyForm.append(newCoffee); + + count++; + + let deleteFormDrink = document.createElement("button"); + deleteFormDrink.textContent = "Удалить ?" + deleteFormDrink.addEventListener("click", (e) => { + newCoffee.remove(); + let allDrinks = document.querySelectorAll(".form-drink"); + count--; + + let i = 1; + for (const coffee of allDrinks) { + let title = coffee.querySelector("h4"); + title.textContent = title.textContent.slice(0, -1) + i; + coffee.id = `form${i}`; + coffee.innerHTML = coffee.innerHTML.replace(/milk\d+/g, `milk${i}`); + i++; + } + }); + newCoffee.querySelector(".remove-element").append(deleteFormDrink); +}) + +submitButton.addEventListener("click", (e) => { + e.preventDefault(); + let data = getData(); + + console.log(data); + let fon = document.createElement("div"); + let dialogWindow = document.createElement("div"); + let closeButton = document.createElement("button"); + + closeButton.textContent = "закрыть"; + closeButton.classList.add("close-button"); + closeButton.addEventListener("click", (e) => { + fon.remove(); + }); + + fon.append(dialogWindow); + fon.classList.add("acceptance"); + + dialogWindow.textContent = `Ваш заказ оформлен Вы заказали ${data.count} drink(s)`; + dialogWindow.classList.add("acceptance-window"); + dialogWindow.append(closeButton); + dialogWindow.append(createTable(data)); + + let time = document.createElement("input"); + time.type = "time"; + time.style.float = "right"; + time.style.margin = "20px"; + time.onchange = (e) => { + let now = new Date(); + let [hours, minutes] = e.target.value.split(":"); + let inputValue = new Date(); + inputValue.setHours(hours); + inputValue.setMinutes(minutes) + if (now > inputValue) { + alert("Мы не умеем перемещаться во времени. Выберите время позже, чем текущее"); + time.classList.add("error"); + } else { + time.classList.remove("error"); + } + } + + + let submit = document.createElement("button"); + submit.textContent = "Отправить"; + submit.type = "submit" + submit.addEventListener("click", (e) => { + if (time.classList.contains("error") || !time.value) { + e.preventDefault(); + alert("Укажите корректное время"); + } else { + form.submit(); + } + }); + + dialogWindow.append(submit) + dialogWindow.append(time); + document.body.append(fon); +}); + +function getData() { + let orders = form.querySelectorAll('fieldset'); + let result = { + count: orders.length, + drinks: [] + }; + + let j = 1; + for (let order of orders) { + let additionally = ""; + for (let i of order.querySelectorAll('[name="options"]')) { + if (i.checked) + additionally += i.value + ", "; + } + let milk = ""; + for (let i of order.querySelectorAll(`[name="milk${j}"]`)) { + if (i.checked) { + milk = i.value; + break; + } + } + + console.log(order); + result.drinks.push({ + drink: order.querySelector('[name="drink"]').value, + milk: milk, + additionally: additionally, + somethingElse: order.querySelector('[name="somethingElse"]').value + }); + j++; + } + + return result; +} + +function createTable(data) { + let table = document.createElement("table"); + let tr = document.createElement("tr"); + let th = document.createElement("th"); + th.textContent = "Напиток"; + tr.append(th); + th = document.createElement("th"); + th.textContent = "Молоко"; + tr.append(th); + th = document.createElement("th"); + th.textContent = "Дополнительно"; + tr.append(th); + table.append(tr); + th = document.createElement("th"); + th.textContent = "Пожелания"; + tr.append(th); + table.append(tr); + + for (let i of data.drinks) { + tr = document.createElement("tr"); + let td = document.createElement("td"); + td.textContent = i.drink; + tr.append(td); + td = document.createElement("td"); + td.textContent = i.milk; + tr.append(td); + td = document.createElement("td"); + td.textContent = i.additionally; + tr.append(td); + table.append(tr); + td = document.createElement("td"); + td.textContent = i.somethingElse; + tr.append(td); + table.append(tr); + } + + table.classList.add("table-form"); + return table; +} \ No newline at end of file diff --git a/styles.css b/styles.css index 68f5581..b007a35 100644 --- a/styles.css +++ b/styles.css @@ -1,33 +1,33 @@ +body{ + background-color: rgba(212, 206, 206, 0.69); + padding: 0; + margin: 0; +} + .beverage { - border: 1px solid #eee; + border: 1px solid #3f3c3c; margin: 15px 0; padding: 15px; } - .beverage-count { margin: 0 0 15px; } - .field { 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,7 +37,6 @@ text-decoration: underline dashed; cursor: pointer; } - .submit-button { font-size: 16px; padding: 7px 15px; @@ -45,3 +44,42 @@ border-radius: 5px; } +.acceptance { + position: fixed; + display: flex; + margin: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.41); +} + +.acceptance-window { + color: red; + background-color: white; + width: 500px; + min-height: 150px; + margin: auto; +} + +.close-button { + float: right; + margin: 10px; + margin-right: 20px; +} + +.table-form { + border: black 5px solid; + border-collapse: collapse; + padding: 5px; + margin: 10px; +} + +td,th { + border: black 2px solid; +} + +.error { + border: red 2px solid; +} \ No newline at end of file