Irit-Basic-JS · SolarHunger · Nov 12, 2021 · Nov 12, 2021
diff --git 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 @@
 
 Результат вывода: `Сделайте мне капучино <b>побыстрее</b>! <b>Очень нужно</b>!`
 
-8. \* Добавь в таблицу модального окна колонку `"Пожелания"`, которую заполняй текстом из `textarea`.
+-8. \* Добавь в таблицу модального окна колонку `"Пожелания"`, которую заполняй текстом из `textarea`.
 
-9. \* Сделай в модальном окне поле `input` с типом `time` и подписью `"Выберите время заказа"`. Внизу модального окна добавь кнопку `"Оформить"`. После нажатия на кнопку нужно проверить, если выбрано время раньше, чем текущее время, то покрасить границу поля ввода времени в красный, вывести `alert` с текстом `"Мы не умеем перемещаться во времени. Выберите время позже, чем текущее"`. Если время введено правильно, то по нажатию на кнопку `"Оформить"` закрывай модалку.
+-9. \* Сделай в модальном окне поле `input` с типом `time` и подписью `"Выберите время заказа"`. Внизу модального окна добавь кнопку `"Оформить"`. После нажатия на кнопку нужно проверить, если выбрано время раньше, чем текущее время, то покрасить границу поля ввода времени в красный, вывести `alert` с текстом `"Мы не умеем перемещаться во времени. Выберите время позже, чем текущее"`. Если время введено правильно, то по нажатию на кнопку `"Оформить"` закрывай модалку.
diff --git a/index.html b/index.html
@@ -1,69 +1,97 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Заказ кофе</title>
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Заказ кофе</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <div='beverages'>
     <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>
+      <div class='beverages'>
+        <fieldset class="beverage">
+          <h4 class="beverage-count">Напиток №1</h4>
+          <button class='close-button' onclick='closeClick(this.parentNode)'>X</button>
+          <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" class='milkselect' value="usual" checked />
+              <span>обычном молоке</span>
+            </label>
+            <label class="checkbox-field">
+              <input type="radio" name="milk" class='milkselect' value="no-fat" />
+              <span>обезжиренном молоке</span>
+            </label>
+            <label class="checkbox-field">
+              <input type="radio" name="milk" class='milkselect' value="soy" />
+              <span>соевом молоке</span>
+            </label>
+            <label class="checkbox-field">
+              <input type="radio" name="milk" class='milkselect' 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>
+          <div class="field">
+            <label>
+              И еще вот что:
+              <textarea oninput="wish(this, this.parentNode.parentNode.children[1])"></textarea>
+            </label>
+            <p name="wish"></p>
+          </div>
+        </fieldset>
+      </div>
+
+      <div id='myModal' class='modal'>
+        <div class="modal-content">
+          <button class='modalClose' onclick="closeModal()">X</button>
+          <h2>Ваш заказ принят </h2>
           <label class="checkbox-field">
-            <input type="checkbox" name="options" value="cinnamon" />
-            <span>корицу</span>
-          </label>
+            Выберите время к которому мы приготовим ваш заказ:
+            <input type="time"  id='thistime' name="timeInput"/>
+          </label>  
         </div>
-      </fieldset>
+
+      </div>
+
+      </div>
       <div>
-        <button type="button" class="add-button">+ Добавить напиток</button>
+        <button type="button" class="add-button" type="button">+ Добавить напиток</button>
       </div>
       <div style="margin-top: 30px">
-        <button type="submit" class="submit-button">Готово</button>
+        <button type="button" class="submit-button" >Готово</button>
       </div>
     </form>
 
-    <script src="index.js"></script>
-  </body>
-</html>
+</body>
+<script src="index.js"></script>
+
+</html>
diff --git 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<num){
+               drink.id= `form${num-1}`;
+               drink.querySelector(".beverage-count").textContent = `Напиток №${num - 1}`;;
+           }
+       }
+
+       counter-=1;
+    }
+}
+
+document.querySelector('.submit-button').addEventListener('click', () => {   
+    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, "<b>$&</b>");
+    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
@@ -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;
+}