From 916259c075e51baa6726a9f86fde1ab8b412faa5 Mon Sep 17 00:00:00 2001
From: debebantur <stepan.filippov@yandex.ru>
Date: Thu, 11 Nov 2021 23:40:07 +0500
Subject: [PATCH 1/2] 1-5

---
 index.html |  2 +-
 index.js   | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index ddc8250..30feae9 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <form>
+    <form class='form'>
       <fieldset class="beverage">
         <h4 class="beverage-count">Напиток №1</h4>
         <label class="field">
diff --git a/index.js b/index.js
index e69de29..d2a7d9a 100644
--- a/index.js
+++ b/index.js
@@ -0,0 +1,67 @@
+const addButton = document.querySelector('.add-button');
+const submitButton = document.querySelector('.submit-button');
+const form = document.querySelector('.form');
+let drinksCount = 1;
+
+submitButton.onclick = function(){
+}
+
+addButton.onclick = function(){
+    drinksCount++;
+    let fieldset = document.createElement('form');
+    fieldset.innerHTML = `<fieldset class="beverage">
+    <h4 class="beverage-count">Напиток №${drinksCount}</h4>
+    <label class="field">
+      <span class="label-text">Я буду</span>
+      <select>
+        <option value="espresso">Эспрессо</option>
+        <option value="capuccino" selected>Капучино</option>
+        <option value="cacao">Какао</option>
+      </select>
+    </label>
+    <div class="field">
+      <span class="checkbox-label">Сделайте напиток на</span>
+      <label class="checkbox-field">
+        <input type="radio" name="milk" value="usual" checked />
+        <span>обычном молоке</span>
+      </label>
+      <label class="checkbox-field">
+        <input type="radio" name="milk" value="no-fat" />
+        <span>обезжиренном молоке</span>
+      </label>
+      <label class="checkbox-field">
+        <input type="radio" name="milk" value="soy" />
+        <span>соевом молоке</span>
+      </label>
+      <label class="checkbox-field">
+        <input type="radio" name="milk" value="coconut" />
+        <span>кокосовом молоке</span>
+      </label>
+    </div>
+    <div class="field">
+      <span class="checkbox-label">Добавьте к напитку:</span>
+      <label class="checkbox-field">
+        <input type="checkbox" name="options" value="whipped cream" />
+        <span>взбитых сливок</span>
+      </label>
+      <label class="checkbox-field">
+        <input type="checkbox" name="options" value="marshmallow" />
+        <span>зефирок</span>
+      </label>
+      <label class="checkbox-field">
+        <input type="checkbox" name="options" value="chocolate" />
+        <span>шоколад</span>
+      </label>
+      <label class="checkbox-field">
+        <input type="checkbox" name="options" value="cinnamon" />
+        <span>корицу</span>
+      </label>
+    </div>
+  </fieldset>`;
+  let clos = document.createElement('button');
+  clos.onclick = function(){
+      form.removeChild(fieldset);
+  }
+  fieldset.appendChild(clos);
+  document.body.appendChild(fieldset);
+}
\ No newline at end of file

From 2582e38a53cf16d4e495c6dd88664c5229cb0a2e Mon Sep 17 00:00:00 2001
From: debebantur <stepan.filippov@yandex.ru>
Date: Thu, 18 Nov 2021 22:33:08 +0500
Subject: [PATCH 2/2] =?UTF-8?q?=D0=B2=D1=81=D1=91=20=D0=B4=D0=BE=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=BD=D1=86=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html |  55 +----------------
 index.js   | 173 ++++++++++++++++++++++++++++++++++++++++++++++-------
 styles.css |  58 ++++++++++++++++++
 3 files changed, 211 insertions(+), 75 deletions(-)

diff --git a/index.html b/index.html
index 30feae9..66a2b65 100644
--- a/index.html
+++ b/index.html
@@ -6,63 +6,12 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <form class='form'>
-      <fieldset class="beverage">
-        <h4 class="beverage-count">Напиток №1</h4>
-        <label class="field">
-          <span class="label-text">Я буду</span>
-          <select>
-            <option value="espresso">Эспрессо</option>
-            <option value="capuccino" selected>Капучино</option>
-            <option value="cacao">Какао</option>
-          </select>
-        </label>
-        <div class="field">
-          <span class="checkbox-label">Сделайте напиток на</span>
-          <label class="checkbox-field">
-            <input type="radio" name="milk" value="usual" checked />
-            <span>обычном молоке</span>
-          </label>
-          <label class="checkbox-field">
-            <input type="radio" name="milk" value="no-fat" />
-            <span>обезжиренном молоке</span>
-          </label>
-          <label class="checkbox-field">
-            <input type="radio" name="milk" value="soy" />
-            <span>соевом молоке</span>
-          </label>
-          <label class="checkbox-field">
-            <input type="radio" name="milk" value="coconut" />
-            <span>кокосовом молоке</span>
-          </label>
-        </div>
-        <div class="field">
-          <span class="checkbox-label">Добавьте к напитку:</span>
-          <label class="checkbox-field">
-            <input type="checkbox" name="options" value="whipped cream" />
-            <span>взбитых сливок</span>
-          </label>
-          <label class="checkbox-field">
-            <input type="checkbox" name="options" value="marshmallow" />
-            <span>зефирок</span>
-          </label>
-          <label class="checkbox-field">
-            <input type="checkbox" name="options" value="chocolate" />
-            <span>шоколад</span>
-          </label>
-          <label class="checkbox-field">
-            <input type="checkbox" name="options" value="cinnamon" />
-            <span>корицу</span>
-          </label>
-        </div>
-      </fieldset>
-      <div>
+      <div id="add-button-container">
         <button type="button" class="add-button">+ Добавить напиток</button>
       </div>
-      <div style="margin-top: 30px">
+      <div id = "submit-button-container" style="margin-top: 30px">
         <button type="submit" class="submit-button">Готово</button>
       </div>
-    </form>
 
     <script src="index.js"></script>
   </body>
diff --git a/index.js b/index.js
index d2a7d9a..43cbfbd 100644
--- a/index.js
+++ b/index.js
@@ -1,67 +1,196 @@
 const addButton = document.querySelector('.add-button');
 const submitButton = document.querySelector('.submit-button');
 const form = document.querySelector('.form');
-let drinksCount = 1;
+let drinksCount = 0;
+createForm();
+addButton.onclick = createForm;
+submitButton.onclick = function () {
+  let window = document.createElement('div');
+  window.classList.add('modal-container');
+  window.innerHTML = `
+  <div class="modal-window">
+        <div class="modal-window-header">
+          <h1 class = "modal-window-title">Ваш заказ принят!</h1>
+          <button class="deletion">X</button>
+        </div>       
+          <h3>${generateModalHeader()}</h3>
+        <div class = "table-container">
+        <table class = "order-table"> 
+        <tr>
+          <th>Напиток</th>
+          <th>Молоко</th>
+          <th>Дополнительно</th>
+          <th>Пожелания</th>
+        </tr>
+        </table>
+        </div>
+        <div>
+        <lable>Выберите время заказа</lable>
+        <input class = "time" type = "time"></input>
+        <button class = "submit">Заказать</button>
+        </div>
+  </div>
+  `;
+  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('.deletion');
+  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 = `<td>${data.get('drink')}</td>
+    <td>${data.get('milk')}</td>
+    <td>${data.getAll('options').toString().replace(',', ', ')}</td>
+    <td>${data.get('comment')}</td>`;
+    table.appendChild(row);
+  }
+}
 
-submitButton.onclick = function(){
+function generateModalHeader() {
+  let str = `Вы заказали ${drinksCount} `;
+  let drink = 'напитков'
+
+  if (!(drinksCount % 100 > 10 && drinksCount % 100 < 20)) {
+    switch (drinksCount % 10) {
+      case 1:
+        drink = 'напиток';
+        break;
+      case 2:
+        drink = 'напитка';
+        break;
+      case 3:
+        drink = 'напитка';
+        break;
+      case 4:
+        drink = 'напитка';
+        break;
+    }
+  }
+  str += drink;
+  return str;
 }
 
-addButton.onclick = function(){
-    drinksCount++;
-    let fieldset = document.createElement('form');
-    fieldset.innerHTML = `<fieldset class="beverage">
+function createForm() {
+  drinksCount++;
+  let newForm = document.createElement('form');
+  newForm.classList.add('form');
+  newForm.innerHTML = `<fieldset class="beverage">
+    <div class = "form-header">
     <h4 class="beverage-count">Напиток №${drinksCount}</h4>
+    </div>
     <label class="field">
       <span class="label-text">Я буду</span>
-      <select>
-        <option value="espresso">Эспрессо</option>
-        <option value="capuccino" selected>Капучино</option>
-        <option value="cacao">Какао</option>
+      <select name = 'drink'>
+        <option value="Эспрессо">Эспрессо</option>
+        <option value="Капучино" selected>Капучино</option>
+        <option value="Какао">Какао</option>
       </select>
     </label>
     <div class="field">
       <span class="checkbox-label">Сделайте напиток на</span>
       <label class="checkbox-field">
-        <input type="radio" name="milk" value="usual" checked />
+        <input type="radio" name="milk" value="обычное" checked />
         <span>обычном молоке</span>
       </label>
       <label class="checkbox-field">
-        <input type="radio" name="milk" value="no-fat" />
+        <input type="radio" name="milk" value="обезжиренное" />
         <span>обезжиренном молоке</span>
       </label>
       <label class="checkbox-field">
-        <input type="radio" name="milk" value="soy" />
+        <input type="radio" name="milk" value="соевое" />
         <span>соевом молоке</span>
       </label>
       <label class="checkbox-field">
-        <input type="radio" name="milk" value="coconut" />
+        <input type="radio" name="milk" value="кокосовое" />
         <span>кокосовом молоке</span>
       </label>
     </div>
     <div class="field">
       <span class="checkbox-label">Добавьте к напитку:</span>
       <label class="checkbox-field">
-        <input type="checkbox" name="options" value="whipped cream" />
+        <input type="checkbox" name="options" value="взбитые сливки" />
         <span>взбитых сливок</span>
       </label>
       <label class="checkbox-field">
-        <input type="checkbox" name="options" value="marshmallow" />
+        <input type="checkbox" name="options" value="зефир" />
         <span>зефирок</span>
       </label>
       <label class="checkbox-field">
-        <input type="checkbox" name="options" value="chocolate" />
+        <input type="checkbox" name="options" value="шоколад" />
         <span>шоколад</span>
       </label>
       <label class="checkbox-field">
-        <input type="checkbox" name="options" value="cinnamon" />
+        <input type="checkbox" name="options" value="корица" />
         <span>корицу</span>
       </label>
     </div>
   </fieldset>`;
+  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"));
+}
+
+function CreateCommentSection(){
+  let container = document.createElement('div');
+  container.classList.add('field')
+  container.innerHTML = `<div class = "field">
+  <span class="label-text">И еще вот что</span>
+  <textarea class = "comment" name="comment"></textarea>
+  <p class = "comment-repeat"></p>
+  </div>`;
+  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 => `<b>${x}</b>`);
+   textRepeat.innerHTML = text;
+ }
+ return container;
+}
+
+function CreateRemovingButton(newForm) {
   let clos = document.createElement('button');
-  clos.onclick = function(){
-      form.removeChild(fieldset);
+  clos.textContent = 'X';
+  clos.classList.add('deletion');
+
+  clos.onclick = function () {
+    if (drinksCount == 1) {
+      alert('Не удаляй!!! Это последнее, что у тебя осталось...')
+      return;
+    }
+    drinksCount--;
+    document.body.removeChild(newForm);
+    ReanameForms();
+  }
+  return clos;
+}
+function ReanameForms() {
+  let headers = document.querySelectorAll('.beverage-count');
+  for (let i = 0; i < drinksCount; i++) {
+    headers[i].textContent = `Напиток №${i + 1}`;
   }
-  fieldset.appendChild(clos);
-  document.body.appendChild(fieldset);
 }
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 68f5581..df3ecf3 100644
--- a/styles.css
+++ b/styles.css
@@ -1,5 +1,6 @@
 .beverage {
     border: 1px solid #eee;
+    background-color: blanchedalmond;
     margin: 15px 0;
     padding: 15px;
 }
@@ -45,3 +46,60 @@
     border-radius: 5px;
 }
 
+.form-header{
+    display: flex; 
+    justify-content: space-between;
+}
+
+.deletion{
+    width: 25px;
+    height: 25px;
+    background-color: rgb(236, 88, 88);
+}
+
+
+.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: 500px;
+    height: auto;
+    position: fixed;
+    background-color: rgb(190, 250, 94);
+    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;
+ } 
+
