Адельмурдина Элина

index.html

@@ -9,6 +9,9 @@
     <form>
       <fieldset class="beverage">
         <h4 class="beverage-count">Напиток №1</h4>
+        <div class="header">
+          <h4 class="beverage-count">Напиток №1</h4>
+        </div>
         <label class="field">
           <span class="label-text">Я буду</span>
           <select>
@@ -58,11 +61,20 @@ <h4 class="beverage-count">Напиток №1</h4>
       </fieldset>
       <div>
         <button type="button" class="add-button">+ Добавить напиток</button>
+        <button type="button" class="add-button" id="add-button">+ Добавить напиток</button>
       </div>
       <div style="margin-top: 30px">
         <button type="submit" class="submit-button">Готово</button>
       </div>
     </form>
+
+    <div class="modal-window hidden" id="modal-window">
+      <div class="header">
+        <h2>Заказ принят!</h2>
+        <button class="close-button">X</button>
+      </div>
+    </div>
+    <div id="overlay" class="overlay hidden"></div>
 
     <script src="index.js"></script>
   </body>

index.js

@@ -0,0 +1,133 @@
+const form = document.getElementsByTagName('form')[0];
+const addButton = document.getElementById("add-button");
+const modalWindow = document.getElementById("modal-window");
+const modalWindowHeader = modalWindow.getElementsByTagName('h2')[0];
+const closeModalWindowBtn = modalWindow.getElementsByClassName("close-button")[0];
+const overlay = document.getElementById("overlay");
+
+let count = 2;
+
+addButton.addEventListener("click", (ev) => {
+    let beverages = document.getElementsByClassName("beverage");
+    let beverage = beverages[beverages.length - 1];
+    let newBeverage = beverage.cloneNode(true);
+
+    let inputs = newBeverage.querySelectorAll('input');
+    for (let input of inputs) {
+        input.name += (count - 1);
+    }
+
+    let beverageCount = newBeverage.getElementsByClassName("beverage-count")[0];
+    beverageCount.textContent = "Напиток №" + count++;
+
+    let closeButton = document.createElement("button");
+    closeButton.classList.add("close-button");
+    closeButton.textContent = 'X';
+    closeButton.addEventListener('click', ev => {
+        newBeverage.remove();
+        count--;
+    });
+
+    let header = newBeverage.getElementsByClassName('header')[0];
+    header.appendChild(closeButton);
+
+    beverage.after(newBeverage);
+});
+
+let bookCount;
+let table;
+
+form.addEventListener('submit', ev => {
+    ev.preventDefault();
+
+    console.log(ev);
+
+    bookCount = document.createElement("p");
+    bookCount.textContent = 'Вы заказали ' + (count - 1) + ' ' + getPhraseByNumber(count - 1);
+    modalWindowHeader.after(bookCount);
+
+    table = getBookItemsTable();
+
+    modalWindow.append(table);
+    modalWindow.classList.remove('hidden');
+    overlay.classList.remove('hidden');
+});
+
+closeModalWindowBtn.addEventListener('click', ev => {
+    modalWindow.classList.add('hidden');
+    bookCount.remove();
+    table.remove();
+    overlay.classList.add('hidden');
+});
+
+function getPhraseByNumber(number) {
+    if (number == 1) {
+        return 'напиток';
+    }
+
+    if (2 <= number <= 4) {
+        return 'напитка';
+    }
+
+    if (5 <= number <= 20) {
+        return 'напитков';
+    }
+
+    let numberStr = number.toString();
+    let lastSymbol = numberStr[numberStr.length - 1];
+
+    return getPhraseByNumber(parseInt(lastSymbol));
+}
+
+tableHeaders = ['Напиток','Молоко','Дополнительно'];
+
+function getBookItemsTable() {
+    const table = document.createElement('table');
+    const header = document.createElement('tr');
+
+    for (let columnName of tableHeaders) {
+        let cell = document.createElement('th');
+        cell.textContent = columnName;
+        header.append(cell);
+    }
+
+    table.append(header);
+
+    let beverages = document.getElementsByClassName('beverage');
+
+    for (let beverage of beverages) {
+        let datas = getBeverageData(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 getBeverageData(beverage) {
+
+    let beverageNames = beverage.querySelectorAll('select option');
+    let beverageName = Array.from(beverageNames).find(c => c.selected).textContent;
+    console.log(beverageName);
+
+    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];
+}

styles.css

@@ -1,47 +1,97 @@
 .beverage {
-    border: 1px solid #eee;
-    margin: 15px 0;
-    padding: 15px;
+  border: 1px solid #eee;
+  margin: 15px 0;
+  padding: 15px;
 }
 
 .beverage-count {
-    margin: 0 0 15px;
+  margin: 0 0 15px;
 }
 
 .field {
-    display: block;
-    margin-bottom: 10px;
+  display: block;
+  margin-bottom: 10px;
 }
 
 .label-text {
-    display: inline-block;
-    width: 80px;
+  display: inline-block;
+  width: 80px;
 }
 
 .checkbox-label {
-    margin-bottom: 5px;
-    display: inline-block;
+  margin-bottom: 5px;
+  display: inline-block;
 }
 
 .checkbox-field {
-    margin: 5px 0;
-    display: block;
+  margin: 5px 0;
+  display: block;
 }
 
 .add-button {
-    border: none;
-    background: none;
-    padding: 10px;
-    color: rgba(0, 27, 255, 0.82);
-    font-size: 14px;
-    text-decoration: underline dashed;
-    cursor: pointer;
+  border: none;
+  background: none;
+  padding: 10px;
+  color: rgba(0, 27, 255, 0.82);
+  font-size: 14px;
+  text-decoration: underline dashed;
+  cursor: pointer;
 }
 
 .submit-button {
-    font-size: 16px;
-    padding: 7px 15px;
-    border: 2px solid orange;
-    border-radius: 5px;
+  font-size: 16px;
+  padding: 7px 15px;
+  border: 2px solid orange;
+  border-radius: 5px;
 }
 
+.close-button {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  padding: 5px;
+  border: 1px solid lightskyblue;
+  background-color: transparent;
+}
+
+.header {
+  position: relative;
+}
+
+.hidden {
+  display: none;
+}
+
+.modal-window {
+  position: absolute;
+  z-index: 3;
+  padding: 0 20px 20px;
+  top: 40%;
+  left: 30%;
+  width: 45%;
+  height: auto;
+  background-color: white;
+  border-radius: 10px;
+  border: 1px solid lightskyblue;
+}
+
+.modal-window table {
+  border-collapse: collapse;
+}
+
+.modal-window td {
+  padding: 10px 15px;
+  text-align: center;
+  min-width: 100px;
+  border: 1px solid skyblue;
+}
+
+.overlay {
+  z-index: 2;
+  position: fixed;
+  background-color: rgba(204, 204, 204, 0.5);
+  top: -15px;
+  left: -15px;
+  right: -15px;
+  bottom: -15px;
+}