IritRTF · StepanElk · Nov 16, 2023
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. Сделай в модальном окне, ниже надписи про количество напитков, таблицу такого вида:
 
 | Напиток  | Молоко  | Дополнительно    |
 | -------- | ------- | ---------------- |
@@ -30,14 +30,14 @@
 
 Данные для таблицы нужно получить из заполненной формы на странице.
 
-7. \* Добавь в формы выбора напитка `textarea` с возможностью написать любой текст. Поле должно быть подписано `"И еще вот что"`
+//7. \* Добавь в формы выбора напитка `textarea` с возможностью написать любой текст. Поле должно быть подписано `"И еще вот что"`
 
 Рядом с `textarea` должен выводиться текст, написанный в ней пользователем: на каждое изменение текста в поле, текст рядом тоже должен изменяться. Если в тексте введенном пользователем есть слова `"срочно"`, `"быстрее"` / `"побыстрее"`, `"скорее"` / `"поскорее"`, `"очень нужно"`, эти слова должны помещаться в тег `b`. Например, так:
 
 Текст пользователя: `Сделайте мне капучино побыстрее! Очень нужно!`
 
 Результат вывода: `Сделайте мне капучино <b>побыстрее</b>! <b>Очень нужно</b>!`
 
-8. \* Добавь в таблицу модального окна колонку `"Пожелания"`, которую заполняй текстом из `textarea`.
+//8. \* Добавь в таблицу модального окна колонку `"Пожелания"`, которую заполняй текстом из `textarea`.
 
-9. \* Сделай в модальном окне поле `input` с типом `time` и подписью `"Выберите время заказа"`. Внизу модального окна добавь кнопку `"Оформить"`. После нажатия на кнопку нужно проверить, если выбрано время раньше, чем текущее время, то покрасить границу поля ввода времени в красный, вывести `alert` с текстом `"Мы не умеем перемещаться во времени. Выберите время позже, чем текущее"`. Если время введено правильно, то по нажатию на кнопку `"Оформить"` закрывай модалку.
+//9. \* Сделай в модальном окне поле `input` с типом `time` и подписью `"Выберите время заказа"`. Внизу модального окна добавь кнопку `"Оформить"`. После нажатия на кнопку нужно проверить, если выбрано время раньше, чем текущее время, то покрасить границу поля ввода времени в красный, вывести `alert` с текстом `"Мы не умеем перемещаться во времени. Выберите время позже, чем текущее"`. Если время введено правильно, то по нажатию на кнопку `"Оформить"` закрывай модалку.
diff --git a/index.html b/index.html
@@ -6,12 +6,14 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <form>
-      <fieldset class="beverage">
+    <form onsubmit="return false">
+      <section class = "beverage-list">
+        <fieldset class="beverage">
+
         <h4 class="beverage-count">Напиток №1</h4>
         <label class="field">
           <span class="label-text">Я буду</span>
-          <select>
+          <select id="drink-type">
             <option value="espresso">Эспрессо</option>
             <option value="capuccino" selected>Капучино</option>
             <option value="cacao">Какао</option>
@@ -55,13 +57,36 @@ <h4 class="beverage-count">Напиток №1</h4>
             <span>корицу</span>
           </label>
         </div>
+        <div class = "wishes">
+          <label class="checkbox-field">И вот ещё что..<br>
+            <textarea id="input-wishes" cols="30" rows="5"></textarea>
+            <div class="wish" ></div>
+          </label>
+        </div>
+        <button class="close-button" onclick="return false">&#10060;</button>
       </fieldset>
+
+      </section>   
       <div>
         <button type="button" class="add-button">+ Добавить напиток</button>
       </div>
       <div style="margin-top: 30px">
         <button type="submit" class="submit-button">Готово</button>
       </div>
+
+      <div class="modal-overlay">
+        <section class="modal-window">
+          <button class="close-button-modal" onclick="return false">&#10060;</button>
+          <h4>Заказ принят!</h4>
+          <div class="modal-info"></div>
+          <label class = "select-time"> Выберите время заказа
+            <input type="time" id="beverage-time" >
+          </label>
+          <div>
+            <button type="time" class="submit-modal">Оформить</button>
+          </div>
+        </section>
+      </div>     
     </form>
 
     <script src="index.js"></script>

diff --git 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 , `<b>${word}</b>`);
+    }
+    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 = `<p>Вы заказали ${ordcount} ${count}</p>`;
+    let modalTable = document.createElement('table');
+    modalTable.innerHTML = '<tr><th>Напиток</th><th>Молоко</th><th>Дополнительно</th><th>Пожелания</th></tr>';
+    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
@@ -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;
 }