diff --git a/README.md b/README.md index fe3e75d..196fe7d 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,8 @@ 6. Сделай в модальном окне, ниже надписи про количество напитков, таблицу такого вида: + + | Напиток | Молоко | Дополнительно | | -------- | ------- | ---------------- | | Капучино | обычное | diff --git a/delete.png b/delete.png new file mode 100644 index 0000000..eed0870 Binary files /dev/null and b/delete.png differ diff --git a/index.html b/index.html index ddc8250..bc089d7 100644 --- a/index.html +++ b/index.html @@ -7,63 +7,93 @@
-
-

Напиток №1

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

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

+

Вы заказали 1 напиток

+ + + + + + + +
НапитокМолокоДополнительноПожелания
+

Выберите время заказа

+ + +
+
+ + diff --git a/index.js b/index.js index e69de29..656eb2d 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,130 @@ +let form = document.querySelector('.beverage'); +let addDrink = document.querySelector('.add-button'); +let forms = document.querySelector('.beverages'); +let count = 1; + +addDrink.addEventListener('click', (e) => { + let newForm = form.cloneNode(true); + count += 1; + newForm.querySelector('.beverage-count').innerHTML = 'Напиток №' + count; + + forms.append(newForm); +}); + + +function deleteDrink (form) { + if (count != 1){ + form.remove(); + count -= 1; + } +} + +let submitButton = document.querySelector('.submit-button'); +let modalWindow = document.querySelector('.modal'); +let closeBtn = document.querySelector('.close') + +submitButton.addEventListener('click', function (evt) { + evt.preventDefault(); + modalWindow.querySelector('.drinks-count').innerHTML = `Вы заказали ${count} ${inclineWord(count)}`; + addItemsInTable(getData()); + + let orderTime = document.querySelector('.order-time'); + orderTime.onchange = (e) => { + let dateNow = new Date(); + let [hours, minutes] = e.target.value.split(':'); + let inputTime = new Date(); + inputTime.setHours(hours); + inputTime.setMinutes(minutes); + if (dateNow > inputTime) { + alert("Мы не умеем перемещаться во времени. Выберите время позже, чем текущее"); + orderTime.classList.add('error'); + } else { + orderTime.classList.remove('error'); + } + } + + modalWindow.classList.add('modal--show'); +}); + +function inclineWord (count) { + if (count % 10 == 1 && count % 100 != 11) + return 'напиток'; + else if ((2 <= count && count % 10 <= 4) && count % 100 != 12 && count % 100 != 13 && count % 100 != 14) + return 'напитка'; + else + return 'напитков'; +} + +closeBtn.addEventListener('click', function () { + modalWindow.classList.remove('modal--show'); +}) + + +function getData() { + let orders = document.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; + } + } + result.drinks.push({ + drink: order.querySelector('[name="drink"]').value, + milk: milk, + additionally: additionally, + somethingElse: order.querySelector('[name="somethingElse"]').value + }); + j++; + } + + return result; +} + +function addItemsInTable(data) { + let table = document.querySelector(".table-form") + console.log(data) + for (let i of data.drinks) { + let 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); + td = document.createElement('td'); + td.textContent = i.somethingElse; + tr.append(td); + + table.append(tr) + } + return table; +} + +let arr = ["срочно", "быстрее","побыстрее","скорее","поскорее","очень нужно"]; +let textarea = document.querySelector('textarea'); + +const textareaFunc = (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; \ No newline at end of file diff --git a/styles.css b/styles.css index 68f5581..1605b33 100644 --- a/styles.css +++ b/styles.css @@ -32,9 +32,10 @@ border: none; background: none; padding: 10px; - color: rgba(0, 27, 255, 0.82); + color: rgba(0, 26, 255, 0.82); font-size: 14px; - text-decoration: underline dashed; + text-decoration: none; + border:rgba(0, 26, 255, 0.82) 1px solid; cursor: pointer; } @@ -45,3 +46,72 @@ border-radius: 5px; } + + +.delete-drink { + float: right; + width: 25px; + height: 25px; + border-radius: 50%; + background-color: white; + border-style: none; + background-image: url("https://cdn-icons-png.flaticon.com/512/1617/1617543.png"); + background-size: contain; +} + +.modal { + display: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.modal--show { + display: flex; + align-items: center; +} + +.modal::after { + content: ""; + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; + } + +.modal-content { + position: relative; + width: 500px; + margin: 100px auto; + padding: 15px 15px 15px 30px; + background-color: #ffef95; + border-radius: 10px; + box-shadow: -1px 5px 12px 0 rgba(89, 90, 90, 0.3); + z-index: 2; +} + +table { + border: black 2px solid; + border-collapse: collapse; + padding: 5px; + margin: 10px; +} + +td, th { + border: 1px solid #333; + padding: 5px; +} + +textarea { + margin: 0; + display: block; +} + +.error { + border: red 2px solid; +} \ No newline at end of file