From 6acb02f312d1559a0c1510ef393561dfac2e78b0 Mon Sep 17 00:00:00 2001 From: DrLiivesey <144256050+DrLiivesey@users.noreply.github.com> Date: Thu, 23 Nov 2023 13:37:44 +0500 Subject: [PATCH] =?UTF-8?q?=D0=91=D0=B8=D0=BA=D1=87=D1=83=D1=80=D0=BA?= =?UTF-8?q?=D0=B8=D0=BD=20=D0=A0.=D0=90.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 35 ++++++++++--- index.js | 151 +++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 77 +++++++++++++++++++++++++++ 3 files changed, 256 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index ddc8250..a8501af 100644 --- a/index.html +++ b/index.html @@ -7,8 +7,10 @@
-
-

Напиток №1

+
+ +

Напиток №1

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

+
@@ -63,6 +70,20 @@

Напиток №1

+
+
+ +

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

+

+ + + + + + +
НапитокМолокоДополнительно
+
+
diff --git a/index.js b/index.js index e69de29..42035fb 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,151 @@ +let beverageCount = 1; +let beverageCounter = 1; +let deleteButton = document.querySelector('.delete-button'); +let textArea = document.querySelector('.text-area'); + +const addButton = document.querySelector('.add-button'); +const modalWindow = document.querySelector('.modal-window'); +const modalWindowContent = document.querySelector('.modal-window-content'); +const modalWindowButton = document.querySelector('.submit-button'); + + +const translation = {'espresso': 'Эспрессо', +'capuccino': 'Капучино', +'cacao': 'Какао', +'usual': 'обычное', +'no-fat': 'обезжиренное', +'soy': 'соевое', +'coconut': 'кокосовое', +'whipped cream': 'взбитые сливки', +'marshmallow': 'зефирки', +'chocolate': 'шоколад', +'cinnamon': 'корица'} + + +function defineEnding(number, words) { + return words[(number % 100 > 4 && number % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(number % 10 < 5) ? Math.abs(number) % 10 : 5]]; +} + +function addBeverage() { + ++beverageCounter; + ++beverageCount; + document.querySelector('.add-button').insertAdjacentHTML('beforebegin', ` +
+ +

Напиток №${beverageCounter}

+ +
+ Сделайте напиток на + + + + +
+
+ Добавьте к напитку: + + + + +
+
+ +

+
+
`); + const deleteButtons = document.getElementsByClassName('delete-button') + Array.from(deleteButtons).forEach(function(deleteButton) { + deleteButton.addEventListener('click', deleteBevarage); + }); + const textAreas = document.getElementsByClassName('text-area'); + Array.from(textAreas).forEach(function(textArea) { + textArea.addEventListener('keyup', printWishes); + }); +} + +function deleteBevarage(event) { + if (beverageCount > 1) { + const fieldsetID = event.target.parentNode.id; + document.getElementById(fieldsetID).remove(); + --beverageCount; + } +} + +function showModalWindow(event) { + event.preventDefault(); + modalWindow.style.display = 'block'; + modalWindowContent.style.display = 'inline'; + for (let fieldset of document.querySelectorAll('fieldset')) { + const beverageType = translation[fieldset.querySelector('select').value]; + let milkType; + for (const radioButton of document.querySelectorAll(`input[name="milk${fieldset.id}"]`)) { + if (radioButton.checked) { + milkType = translation[radioButton.value]; + } + } + let additionaly = []; + for (const checkBox of document.querySelectorAll(`.additionaly${fieldset.id} .checkbox-field input`)) { + if (checkBox.checked) { + additionaly.push(translation[checkBox.value]); + } + } + document.querySelector('.table').insertAdjacentHTML('beforeend', ` + + ${beverageType} + ${milkType} + ${additionaly.join(', ')} + `) + }; + modalWindowContent.querySelector('p').textContent = `Вы заказали ${beverageCount} ` + defineEnding(beverageCount, ['напиток', 'напитка', 'напитков']); +} + +function hideModalWindow() { + modalWindow.style.display = 'none'; + modalWindowContent.style.display = 'none'; +} + +function printWishes(event) { + let inputText = event.target.value; + const attentionWords = ['срочно', 'быстрее', 'побыстрее', 'скорее', 'поскорее', 'очень нужно']; + for (const word of attentionWords) { + inputText = inputText.replace(new RegExp(word, 'i'), `$&`) + }; + event.target.nextSibling.nextSibling.innerHTML = inputText; +} + +addButton.addEventListener('click', addBeverage); +deleteButton.addEventListener('click', deleteBevarage); +modalWindowButton.addEventListener('click', showModalWindow); +modalWindowContent.addEventListener('click', hideModalWindow); +textArea.addEventListener('keyup', printWishes); \ No newline at end of file diff --git a/styles.css b/styles.css index 68f5581..30cfc84 100644 --- a/styles.css +++ b/styles.css @@ -44,4 +44,81 @@ border: 2px solid orange; border-radius: 5px; } +.delete-button img { + width: 15px; + height: 15px; +} + +.delete-button { + position: relative; + bottom: 0px; + left: 200px; +} + +.modal-window { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0,0,0); + background-color: rgba(0,0,0,0.4); +} + +.modal-window-content { + display: none; + position: fixed; + z-index: 2; + width: 500px; + height: 25%; + overflow: auto; + background-color: rgb(255, 255, 255); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 2%; +} + +.modal-window-content h2 { + position: fixed; + text-align: center; + top: 5%; + left: 50%; + transform: translate(-50%, -50%); +} +.modal-window-content img { + position: relative; + width: 7%; + height: 7%; + margin-left: 93%; + margin-top: 1%; +} + +.modal-window-content p { + position: fixed; + left: 50%; + transform: translate(-50%, 50%); +} + +.text-output { + word-break: break-word; + width: 170px; +} + +.table, tr, td, th { + border: 1px solid black; +} + +.table { + width: 400px; + height: 20px; + table-layout: fixed; + border-collapse: collapse; + margin-top: 50px; + margin-left: auto; + margin-right: auto; +}