diff --git a/cute.png b/cute.png new file mode 100644 index 0000000..e66945c Binary files /dev/null and b/cute.png differ diff --git a/index.html b/index.html index ddc8250..67753b8 100644 --- a/index.html +++ b/index.html @@ -6,17 +6,22 @@ -
+
+
+
-

Напиток №1

+ +

Напиток №1

+ +
Сделайте напиток на
+
Добавьте к напитку:
+ +
+
И вот еще что:
+ +
-
- -
-
- -
+
+ +
+ +
+
+ +
+ + + diff --git a/index.js b/index.js index e69de29..f36b1f4 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,64 @@ +let baseForm = document.querySelector('.beverage-form'); +let addButton = document.querySelector('.add-button'); +let submitButton = document.querySelector('.submit-button'); +let deleteButton = document.querySelector('.delete-button'); +let counter = 1; + +function cloneForm(){ + counter++; + let clone = baseForm.cloneNode(true); + clone.querySelector('.bev-num').innerHTML = String(counter); + clone.id = `form${counter}`; + document.querySelector(".beverages").append(clone); + if (counter != 1){ + let delClone = clone.querySelector('.delete-button'); + delClone.addEventListener('click', () => { + clone.remove(); + counter--; + }) + } +} + +function submit(event) { + event.preventDefault(); + let modalWindow = document.querySelector('.modal'); + let closeButton = document.querySelector('.modal-close') + let orderDetail = 'напитков'; + if ((counter % 10 == 1) && (counter % 100 != 11)) + orderDetail = 'напиток'; + else if (counter % 10 >= 2 && counter % 10 <= 4 && counter % 100 != 12 && counter % 100 != 14) + orderDetail = 'напитка'; + modalWindow.classList.add('active'); + document.querySelector('.modal-description').textContent = `Вы заказали ${counter} ${orderDetail}`; + document.querySelector("table").innerHTML = makeTable(document.querySelectorAll(".beverage-form")); + closeButton.addEventListener('click', () => { + modalWindow.classList.remove('active') + }) +} + +function makeTable(forms){ + let rows = 'НапитокМолокоДополнительноПожелания'; + forms.forEach(form=> { + const fromData = new FormData(form); + rows += "" + convertToRow(fromData) + ""; + }) + return rows; +} + +function convertToRow(formData){ + const convertion = {"espresso": "Эспрессо", "capuccino": "Капучино", "cacao": "Какао", + "usual": "на обычном молоке", "no-fat": "на обезжиренном молоке", "soy": "на соевом молоке", "coconut":"на кокосовом молоке", + "whipped cream": "взбитых сливок", "marshmallow": "зефирок", "chocolate":"шоколад", "cinnamon":"корицу"}; + return `${convertion[formData.get('type')]} + ${convertion[formData.get('milk')]} + ${formData.getAll('options').map(option => convertion[option])} + ${formData.get('comment')}`; +} + +addButton.addEventListener('click', cloneForm); +submitButton.addEventListener('click', submit); + +cloneText = (textarea) =>{ + let text = textarea.value.replace(/(срочно)|(быстрее)|(побыстрее)|(скорее)|(поскорее)|(очень нужно)/gi,"$&"); + textarea.parentNode.querySelector("span").innerHTML = text; +} \ No newline at end of file diff --git a/styles.css b/styles.css index 68f5581..d1c5fde 100644 --- a/styles.css +++ b/styles.css @@ -45,3 +45,93 @@ border-radius: 5px; } +.delete-button{ + height: 25px; + width: 25px; + position: absolute; + left: 250px; +} + +.cute{ + position: fixed; + bottom: 0px; + right: 10px; +} + +.modal{ + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1000; + background: rgba(0, 0, 0, 0.75); + display: flex; + justify-content: center; + align-items: center; + overflow-y: scroll; + padding: 60px 15px; + visibility: hidden; +} + +.modal-content{ + width: 100%; + max-width: 500px; + height: auto; + display: flex; + padding: 0px 0px 20px 0px; + justify-content: center; + align-items: center; + flex-direction: column; + background: #f9f9f9; + border-radius: 3px; + position: relative; + box-shadow: 0 5px 15px black; +} + +.modal-close{ + background: #ff0000; + height: 30px; + width: 30px; + display: flex; + justify-content: center; + align-items: center; + border: none; + position: absolute; + right: 0; + top: 0; + background: none; + cursor: pointer; +} + +.modal-description { + margin: 0px 0px 20px 0px; + font-size: 1.125rem; +} + +.active { + position: fixed; + top: 0; + visibility: visible; + opacity: 1; +} + +table{ + text-align: center; + width: 480px; + margin: 10px; + border-collapse: collapse; +} + +td{ + border-top: 1px solid grey; +} + +.textarea{ + display: flex; + align-items:flex-start; +} + +.comment-text{ + margin-left: 50px; +} \ No newline at end of file diff --git a/x.png b/x.png new file mode 100644 index 0000000..d0db9cb Binary files /dev/null and b/x.png differ