diff --git a/README.md b/README.md index fe3e75d..517c5fa 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,11 @@ Интерфейс работает так: есть форма выбора желаемого напитка, есть кнопка `"Добавить напиток"`, которая добавляет на страницу еще одну такую же форму заказа. Под формой есть кнопка `"Готово"` после нажатия на которую, появляется модальное окно с информацией о заказе. -1. Сделай так, чтобы при клике по кнопке `"Добавить напиток"` появлялась еще одна форма выбора напитка. Текст в заголовке `"Напиток №{номер по порядку}"` должен соответствовать номеру формы. +//1. Сделай так, чтобы при клике по кнопке `"Добавить напиток"` появлялась еще одна форма выбора напитка. Текст в заголовке `"Напиток №{номер по порядку}"` должен соответствовать номеру формы. -2. Добавь в правом верхнем углу каждого `fieldset` с напитком кнопку — крестик удаления. При клике по ней этот напиток должен убираться с экрана. Эта кнопка не должна работать, если напиток единственный. +//2. Добавь в правом верхнем углу каждого `fieldset` с напитком кнопку — крестик удаления. При клике по ней этот напиток должен убираться с экрана. Эта кнопка не должна работать, если напиток единственный. -3. Сделай, чтобы при нажатии на кнопку `"Готово"`, появлялось модальное окно с текстом `"Заказ принят!"`. +//3. Сделай, чтобы при нажатии на кнопку `"Готово"`, появлялось модальное окно с текстом `"Заказ принят!"`. Правила модального окна: @@ -17,11 +17,11 @@ - затемненный полупрозрачный фон, - справа сверху в модальном окне должна быть кнопка закрытия с крестиком. -4. Сделай, чтобы у модального окна был крестик для закрытия и при нажатии на него, модальное окно исчезало. +//4. Сделай, чтобы у модального окна был крестик для закрытия и при нажатии на него, модальное окно исчезало. -5. Сделай так, чтобы в модальном окне выводился текст `"Вы заказали {количество} напитков"`. В этом тексте должно быть подставленно актуальное количество напитков, которые выбрал пользователь. Сделай так, чтобы слово `"напитков"` склонялось в зависимости от количества: `"1 напиток"`, `"3 напитка"`, `"5 напитков"`, `"121 напиток"`. +//5. Сделай так, чтобы в модальном окне выводился текст `"Вы заказали {количество} напитков"`. В этом тексте должно быть подставленно актуальное количество напитков, которые выбрал пользователь. Сделай так, чтобы слово `"напитков"` склонялось в зависимости от количества: `"1 напиток"`, `"3 напитка"`, `"5 напитков"`, `"121 напиток"`. -6. Сделай в модальном окне, ниже надписи про количество напитков, таблицу такого вида: +//6. Сделай в модальном окне, ниже надписи про количество напитков, таблицу такого вида: | Напиток | Молоко | Дополнительно | | -------- | ------- | ---------------- | @@ -30,7 +30,7 @@ Данные для таблицы нужно получить из заполненной формы на странице. -7. \* Добавь в формы выбора напитка `textarea` с возможностью написать любой текст. Поле должно быть подписано `"И еще вот что"` +//7. \* Добавь в формы выбора напитка `textarea` с возможностью написать любой текст. Поле должно быть подписано `"И еще вот что"` Рядом с `textarea` должен выводиться текст, написанный в ней пользователем: на каждое изменение текста в поле, текст рядом тоже должен изменяться. Если в тексте введенном пользователем есть слова `"срочно"`, `"быстрее"` / `"побыстрее"`, `"скорее"` / `"поскорее"`, `"очень нужно"`, эти слова должны помещаться в тег `b`. Например, так: @@ -38,6 +38,6 @@ Результат вывода: `Сделайте мне капучино побыстрее! Очень нужно!` -8. \* Добавь в таблицу модального окна колонку `"Пожелания"`, которую заполняй текстом из `textarea`. +//8. \* Добавь в таблицу модального окна колонку `"Пожелания"`, которую заполняй текстом из `textarea`. -9. \* Сделай в модальном окне поле `input` с типом `time` и подписью `"Выберите время заказа"`. Внизу модального окна добавь кнопку `"Оформить"`. После нажатия на кнопку нужно проверить, если выбрано время раньше, чем текущее время, то покрасить границу поля ввода времени в красный, вывести `alert` с текстом `"Мы не умеем перемещаться во времени. Выберите время позже, чем текущее"`. Если время введено правильно, то по нажатию на кнопку `"Оформить"` закрывай модалку. +//9. \* Сделай в модальном окне поле `input` с типом `time` и подписью `"Выберите время заказа"`. Внизу модального окна добавь кнопку `"Оформить"`. После нажатия на кнопку нужно проверить, если выбрано время раньше, чем текущее время, то покрасить границу поля ввода времени в красный, вывести `alert` с текстом `"Мы не умеем перемещаться во времени. Выберите время позже, чем текущее"`. Если время введено правильно, то по нажатию на кнопку `"Оформить"` закрывай модалку. diff --git a/index.html b/index.html index ddc8250..bd5249c 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,14 @@ -
-
+ +
+
+

Напиток №1

+
+ +
+
+ +
+ +
+
+ +

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

+
+ +
+ +
+
+
diff --git a/index.js b/index.js index e69de29..ca467bc 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,119 @@ +let formCount = 1; +let ordcount = 1; + +const naming ={ + "espresso": "Эспрессо", + "capuccino": "Капучино", + "cacao": "Какао", + "usual": "Обычное", + "no-fat": "Обезжиренное", + "soy": "Соевое", + "coconut": "Кокосовое", + "whipped cream": "Взбитые сливки", + "marshmallow": "Зефирки", + "chocolate": "Шоколад", + "cinnamon": "Корица" +}; + + +document.querySelector('#input-wishes').addEventListener('input' ,(event) => {replaseMarkers(event)}); + +document.querySelector(".add-button").addEventListener('click', () => { + ordcount++; + let fieldSets = document.querySelectorAll(".beverage"); + let newForm = fieldSets[fieldSets.length - 1].cloneNode(true); + let wishes = newForm.querySelector('#input-wishes'); + wishes.value = ''; + newForm.querySelector('.wish').innerHTML = ''; + wishes.addEventListener('input' ,(event) => {replaseMarkers(event)}); + + for (let form of newForm.querySelectorAll('input[type=radio]')) { + form.name = `milk${ordcount}`; + } + newForm.querySelector('h4').innerHTML = `Напиток №${++formCount}`; + fieldSets[fieldSets.length - 1].after(newForm); +}); + +const markers =['скорее' , 'Скорее' , 'быстрее', 'срочно', 'очень нужно' , 'Быстрее', 'Срочно', 'Очень нужно']; + +function replaseMarkers(event){ + let content = event.target.value; + for (let word of markers){ + content = content.replace(word , `${word}`); + } + event.target.parentElement.querySelector('.wish').innerHTML = `${content}`; +} + +document.addEventListener('click',(event) => { + if (formCount > 1 && event.target.classList.contains('close-button')) { + formCount--; + ordcount--; + event.target.parentElement.remove(); + for (let [order , item] of document.querySelectorAll('fieldset').entries()){ + item.querySelector('h4').innerHTML = `Напиток №${order + 1}`; + } + } +}); + +const keyWord = ['напиток' , 'напитка', 'напитков']; +function getPhrase(count){ + if (count == 1) return keyWord[0]; + if (count == 0) return keyWord[2]; + else return (count > 1 && count < 5) ? keyWord[1] : keyWord[2]; +} + +document.querySelector(".submit-button").addEventListener('click', () => { + let window = document.querySelector(".modal-overlay"); + window.style.display = 'block'; + let modal = document.querySelector(".modal-info"); + let count = (ordcount < 21)?getPhrase(ordcount):getPhrase(ordcount%10); + modal.innerHTML = `

Вы заказали ${ordcount} ${count}

`; + let modalTable = document.createElement('table'); + modalTable.innerHTML = 'НапитокМолокоДополнительноПожелания'; + modalTable.classList.add('modal-table'); + makeTable(modalTable); + modal.append(modalTable); +}); + +document.querySelector('#beverage-time').addEventListener('focus' , (event) => { + event.target.classList.remove('eror'); +}); + +document.querySelector(".submit-modal").addEventListener('click', () => { + timeInput = document.querySelector('#beverage-time'); + let time = timeInput.value.split(':').map((x) => Number(x)); + const currentTime = [new Date().getHours(),new Date().getMinutes()].map((x) => Number(x)); + if (currentTime[0]>time[0] || currentTime[1]>time[1] ){ + timeInput.classList.add('eror'); + alert('Мы не умеем перемещаться во времени. Выберите время позже, чем текущее!'); + } + else document.querySelector(".modal-overlay").style.display = 'none'; +}); + + +function makeTable(modalTable){ + for (let beverage of document.querySelectorAll(".beverage")){ + let infoRow = modalTable.querySelector('tbody').insertRow(); + for (let item of getDrinkInfo(beverage)){ + infoRow.insertCell().append(document.createTextNode(item.toString())); + } + } +} + + +function getDrinkInfo(beverage){ + let add = Array.from(beverage.querySelectorAll('input[type=checkbox]:checked')).map((x) => naming[x.value]); + let milk = naming[beverage.querySelectorAll('input[type=radio]:checked')[0].value]; + let type = naming[ + beverage.querySelector('#drink-type').options[beverage.querySelector('#drink-type').selectedIndex].value + ]; + let wishes = beverage.querySelector('#input-wishes').value; + return [type , milk , add , wishes]; +} + +document.querySelector(".close-button-modal").addEventListener('click', () => { + document.querySelector(".modal-overlay").style.display = 'none'; +}); + + + diff --git a/styles.css b/styles.css index 68f5581..88860a9 100644 --- a/styles.css +++ b/styles.css @@ -1,9 +1,68 @@ +body{ + font-size: 22px; +} +.beverage-list{ + display: inline-flex; +} +.eror{ + border:2px solid red; +} +.select-time{ + margin: 10px; +} +.submit-modal{ + font-size: 16px; + padding: 7px 15px; + border: 2px solid orange; + border-radius: 5px; +} +.modal-overlay{ + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.4); +} +.close-button-modal{ + position:absolute; + top:0px; + right: 0px; +} +.modal-window{ + display: block; + padding: 20px; + position: absolute; + width:500px; + z-index: 2; + margin-top: 300px; + margin-left:450px; + background-color: aliceblue; +} + +.modal-window h4{ + text-align: center; +} .beverage { - border: 1px solid #eee; - margin: 15px 0; + position: relative; + border: 1px solid #eae; + margin: 15px; padding: 15px; } +.modal-info th,td{ + border: 1px solid black; + border-collapse: collapse; +} + +.close-button{ + position:absolute; + top:0px; + right: 0px; +} .beverage-count { margin: 0 0 15px; }