diff --git a/index.html b/index.html index ddc8250..e49ef1c 100644 --- a/index.html +++ b/index.html @@ -6,64 +6,13 @@ -
-
-

Напиток №1

- -
- Сделайте напиток на - - - - -
-
- Добавьте к напитку: - - - - -
-
-
+
-
+
- - + \ No newline at end of file diff --git a/index.js b/index.js index e69de29..009e1fa 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,201 @@ +let counter = 0; + +const form = document.querySelector('.form'); +const addBut = document.querySelector('.add-button'); +const submBut = document.querySelector('.submit-button'); + +createNewForm(); +addBut.onclick = createNewForm; +submBut.onclick = function () { + let window = document.createElement('div'); + window.classList.add('modal-container'); + window.innerHTML = ` +
+
+

Ваш заказ принят!

+ +
+

${generateModalHeader()}

+
+ + + + + + + +
НапитокМолокоДополнительноПожелания
+
+
+ Выберите время заказа + + +
+
+ `; + let subButon = window.querySelector('.submit'); + subButon.onclick = function (){ + let time = window.querySelector('.time').value; + let sysTime = new Date(); + if(time.split(':')[0] < sysTime.getHours()){ + alert('Мы не умеем перемещаться во времени. Выберите время позже, чем текущее'); + } + else{ + if(time.split(':')[0] ==sysTime.getHours() && time.split(':')[1] < sysTime.getMinutes()) + alert('Мы не умеем перемещаться во времени. Выберите время позже, чем текущее'); + else + document.body.removeChild(window); + } + } + collectDataFromForms(window); + let button = window.querySelector('.close-Button'); + button.onclick = function () { + document.body.removeChild(window); + } + document.body.appendChild(window); +} + +function collectDataFromForms(window) { + let table = window.querySelector('.order-table'); + let forms = document.querySelectorAll('.form'); + for (let form of forms) { + let row = document.createElement('tr'); + let data = new FormData(form); + row.innerHTML = `${data.get('drink')} + ${data.get('milk')} + ${data.getAll('options').toString().replace(',', ', ')} + ${data.get('comment')}`; + table.appendChild(row); + } +} + +function generateModalHeader() { + let str = `Вы заказали ${counter} `; + let drink = 'напитков' + + if (!(counter % 100 > 10 && counter % 100 < 20)) { + switch (counter + % 10) { + case 1: + drink = 'напиток'; + break; + case 2: + drink = 'напитка'; + break; + case 3: + drink = 'напитка'; + break; + case 4: + drink = 'напитка'; + break; + } + } + str += drink; + return str; +} + +function CreateCommentSection(){ + let container = document.createElement('div'); + container.classList.add('field') + container.innerHTML = `
+ И еще
вот что: + +

+
`; + let textArea = container.querySelector('.comment'); + let textRepeat = container.querySelector('.comment-repeat'); + textArea.oninput = function (){ + let text = textArea.value; + let reg = /срочно|быстрее|побыстрее|скорее|поскорее|очень нужно/gmi; + text = text.replace(reg, x => `${x}`); + textRepeat.innerHTML = text; + } + return container; +} + +function CreateRemovingButton(newForm) { + let clos = document.createElement('button'); + clos.textContent = 'X'; + clos.classList.add('close-Button'); + + clos.onclick = function () { + if (counter + == 1) { + alert('Невозможно удалить последний заказ') + return; + } + counter--; + document.body.removeChild(newForm); + changeNames(); + } + return clos; +} +function changeNames() { + let headers = document.querySelectorAll('.beverage-count'); + for (let i = 0; i < counter; i++) { + headers[i].textContent = `Напиток №${i + 1}`; + } +} + +function createNewForm() { + counter++; + let newForm = document.createElement('form'); + newForm.classList.add('form'); + newForm.innerHTML = `
+
+

Напиток №${counter + }

+
+ +
+ Сделайте напиток на + + + + +
+
+ Добавьте к напитку: + + + + +
+
`; + let clos = CreateRemovingButton(newForm); + let comment = CreateCommentSection(); + newForm.querySelector('.form-header').appendChild(clos); + newForm.querySelector('.beverage').appendChild(comment); + document.body.insertBefore(newForm, document.getElementById("add-button-container")); + } \ No newline at end of file diff --git a/styles.css b/styles.css index 68f5581..da2784e 100644 --- a/styles.css +++ b/styles.css @@ -1,11 +1,19 @@ +html{ + background-color: #7999e1; + font-family:monospace; + font-size: larger; +} + .beverage { - border: 1px solid #eee; + border: 1px solid rgb(0, 0, 0); + background-color: rgb(106, 219, 219); margin: 15px 0; padding: 15px; } .beverage-count { margin: 0 0 15px; + font-size: xx-large; } .field { @@ -41,7 +49,65 @@ .submit-button { font-size: 16px; padding: 7px 15px; - border: 2px solid orange; + border: 2px solid black; + font-weight: 800; border-radius: 5px; } +.form-header{ + display: flex; + justify-content: space-between; +} + +.close-Button{ + width: 35px; + height: 35px; + background-color: rgb(233, 0, 0); + font-size: large; +} + + +.modal-container { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: rgba(105, 105, 105, 0.5); + display: flex; + align-items: center; + justify-content: center; +} + +.modal-window { + width: 666px; + height: auto; + position: fixed; + background-color: #FFD37B; + padding: 15px; + text-align: center; +} + +.modal-window-header{ + display: flex; + justify-content: space-between; + align-items: flex-start; +} + +.modal-window-title{ + margin: 0; +} + +.order-table{ + display:inline; + align-items: center; + justify-content: center; + word-break: break-all; +} + + th { + border: 2px solid black; + } + td { + border: 1px solid gray; + } \ No newline at end of file