diff --git a/README.md b/README.md index fe3e75d..94fe4f2 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. Сделай в модальном окне, ниже надписи про количество напитков, таблицу такого вида: | Напиток | Молоко | Дополнительно | | -------- | ------- | ---------------- | @@ -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..2fd14e7 100644 --- a/index.html +++ b/index.html @@ -1,69 +1,97 @@ - - - Заказ кофе - - - + + + + Заказ кофе + + + + +
-
-

Напиток №1

- -
- Сделайте напиток на - - - - -
-
- Добавьте к напитку: - - -
+ + + +
- +
- +
- - - + + + + \ No newline at end of file diff --git a/index.js b/index.js index e69de29..4ab6a84 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,140 @@ +let addButton = document.querySelector(".add-button"); +let closeButton = document.querySelector('.close-button') +let beverage = document.querySelector(".beverage"); +let counter = 1; +let guestWish=document.createElement('p'); + +addButton.onclick = function () { + counter++; + const newForm = beverage.cloneNode(true); + newForm.innerHTML = newForm.innerHTML.replace("Напиток №1", `Напиток №${counter}`); + newForm.id = `form${counter}`; + for(let i of newForm.querySelectorAll('.milkselect')){ + i.name=`milk${counter}` + } + document.querySelector(".beverages").append(newForm); +} + +function closeClick(elem) { + if (counter > 1) { + let elemNum = +elem.id.slice(4); + elem.remove(); + for(let drink of document.querySelectorAll('.beverage')){ + let num = +drink.id.slice(4); + if(elemNum { + let drinkCount = document.createElement('p'); + drinkCount.textContent =`Вы заказали ${counter} ${findEnding()}`; + document.querySelector('.modal-content').append(drinkCount); + + let table = createTable(); + document.querySelector('.modal-content').append(table); + + document.querySelector('.modal-content').append(guestWish); + + let finishButton = document.createElement('button'); + finishButton.textContent='Оформить'; + finishButton.classList.add('confirm'); + document.querySelector('.modal-content').append(finishButton); + + finishButton.addEventListener('click',function(event){ + verifyTime(event); + }); + + document.querySelector('.modal').style.display="block"; +}); + +function findEnding(){ + n = Math.abs(+counter) % 100; + var n1 = n % 10; + if (n > 10 && n < 20) { return 'напитков' } + if (n1 > 1 && n1 < 5) { return 'напитка' } + if (n1 == 1) { return 'напиток' } + return 'напитков'; +} + +tableHeaders = ['Тип напитка','На каком молоке','Дополнительно']; + +function createTable() { + const table = document.createElement('table'); + const header = document.createElement('tr'); + + for (let colName of tableHeaders) { + let cell = document.createElement('th'); + cell.textContent = colName; + header.append(cell); + } + + table.append(header); + + let beverages = document.getElementsByClassName('beverage'); + for (let beverage of beverages) { + let datas = getFormInfo(beverage); + + let row = document.createElement('tr'); + + for (let data of datas) { + let cell = document.createElement('td'); + cell.textContent = data; + row.append(cell); + } + table.append(row); + } + + return table; +} + +function getFormInfo(beverage) { + + let beverageNames = beverage.querySelectorAll('select option'); + let beverageName = Array.from(beverageNames).find(c => c.selected).textContent; + + let names = beverage.querySelectorAll('.field input'); + let checkedNames = Array + .from(names) + .filter(c => c.checked) + .map(c => c.parentNode.querySelector('span').textContent); + + let milkName = checkedNames.shift(); + let other = checkedNames.join(','); + + if (!other) + other = ' - '; + + return [beverageName, milkName, other]; +} + +document.querySelector('.modalClose').addEventListener('click', function(){ + document.querySelector('.modal').style.display="none"; +}); + +function wish(commentInput, commentOutput) { + const check = new RegExp(/(срочно)|(быстрее)|(побыстрее)|(скорее)|(поскорее)|(очень нужно)/gi); + commentOutput.innerHTML = commentInput.value.replace(check, "$&"); + guestWish= `Пожелание клиента:${commentOutput.innerHTML}`; + +} + +function verifyTime(event){ + let time = document.getElementById('thistime').value.split(':'); + let now = new Date(); + if (!(time==""||+time[0]>now.getHours()||(+time[0]==+now.getHours()&&+time[1]>=now.getMinutes()))){ + document.getElementById('thistime').classList.add('wrongTime'); + event.preventDefault(); + alert('Мы не умеем перемещаться во времени. Выберите время позже, чем текущее'); + } + + +}; + + + diff --git a/styles.css b/styles.css index 68f5581..4770c5a 100644 --- a/styles.css +++ b/styles.css @@ -45,3 +45,55 @@ border-radius: 5px; } +.close-button{ + float: right; +} + +.modal { + display: none; + position: fixed; + z-index: 2000; + left:0; + top:0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0,0,0,0.5); +} + + +.modal-content{ + background-color: #fefefe; + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; + height: auto; +} + +.modalClose{ + color:#aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + + +td,th { + padding: 10px 15px; + text-align: center; + min-width: 100px; + border: 1px solid brown ; +} + +.confirm{ + float: right; + font-size: 16px; + padding: 7px 15px; + border: 2px solid orange; + border-radius: 5px; +} + +.wrongTime{ + border-color: red; +}