Irit-Basic-JS · Leatherman01 · Jun 9, 2021
diff --git a/index.html b/index.html
@@ -6,12 +6,30 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <form>
+  <div class = "hidden">
+    <div class = "lightbox">
+      <div class = "lightbox-head">
+        <div class = "countOfCoffee">Заказ принят!</div>
+        <div class="close lightboxClose" onclick="document.querySelector('.hidden').style.display='none';"></div>
+      </div>
+      <table></table>
+      <form class = "lightbox-form">
+        <label class="time-label">
+          <span class="time-text">Выберите время заказа</span>
+          <input type="time" name="order-time" class="order-time">
+        </label>
+        <div><input type="submit"></div>
+      </form>
+    </div>
+  </div>
+  <div class="beverages">
+    <form id = "form1" class = "beverage-form">
       <fieldset class="beverage">
         <h4 class="beverage-count">Напиток №1</h4>
+        <div class="close" onclick="deleteCoffee(this.parentNode.parentNode)"></div>
         <label class="field">
           <span class="label-text">Я буду</span>
-          <select>
+          <select name="type">
             <option value="espresso">Эспрессо</option>
             <option value="capuccino" selected>Капучино</option>
             <option value="cacao">Какао</option>
@@ -55,14 +73,21 @@ <h4 class="beverage-count">Напиток №1</h4>
             <span>корицу</span>
           </label>
         </div>
+        <div class="field">
+          <label class="textarea">
+            <textarea name="comment" onchange="cloneText(this)"></textarea>
+            <span class="comment-text"></span>
+          </label>
+        </div>
       </fieldset>
-      <div>
-        <button type="button" class="add-button">+ Добавить напиток</button>
-      </div>
-      <div style="margin-top: 30px">
-        <button type="submit" class="submit-button">Готово</button>
-      </div>
     </form>
+  </div>
+  <div>
+    <button type="button" class="add-button" onclick="addCoffee()">+ Добавить напиток</button>
+  </div>
+  <div style="margin-top: 30px">
+    <button type="submit" class="submit-button" onclick="showLightbox()">Готово</button>
+  </div>
 
     <script src="index.js"></script>
   </body>

diff --git a/index.js b/index.js
@@ -0,0 +1,79 @@
+let count = 1;
+const template = document.querySelector(".beverage-form");
+const convertion = {"espresso": "Эспрессо", "capuccino": "Капучино", "cacao": "Какао",
+    "usual": "на обычном молоке", "no-fat": "на обезжиренном молоке", "soy": "на соевом молоке", "coconut":"на кокосовом молоке",
+    "whipped cream": "взбитых сливок", "marshmallow": "зефирок", "chocolate":"шоколад", "cinnamon":"корицу"};
+
+function addCoffee(){
+    count ++;
+    const newCoffee = template.cloneNode(true);
+    newCoffee.id = `form${count}`;
+    newCoffee.innerHTML = newCoffee.innerHTML.replace("Напиток №1", `Напиток №${count}`);
+    document.querySelector(".beverages").append(newCoffee);
+}
+
+function deleteCoffee(element){
+    if (count === 1)
+        return;
+    count--;
+    let numOfDel = getNumber(element);
+    element.parentNode.removeChild(element);
+    for (coffee of document.querySelectorAll(".beverage-form")){
+        const numOfCoffee = getNumber(coffee);
+        if (numOfCoffee > numOfDel){
+            coffee.id = `form${numOfCoffee-1}`;
+            coffee.querySelector(".beverage-count").textContent = `Напиток №${numOfCoffee-1}`;
+        }
+    }
+}
+
+getNumber = (element) => {return +element.id.slice(4)};
+
+function showLightbox(){
+    document.querySelector(".hidden").style.display = "flex";
+    document.querySelector(".countOfCoffee").textContent = getText(count);
+    document.querySelector("table").innerHTML = makeTable(document.querySelectorAll(".beverage-form"));
+}
+
+getText = (countOfCoffee) => {
+    if (countOfCoffee % 10 === 1 && !(countOfCoffee % 100 === 11))
+        return `Вы заказали ${countOfCoffee} напиток`;
+    else if (countOfCoffee % 10 > 1 && countOfCoffee % 10 < 5 && (countOfCoffee % 100 < 12 || countOfCoffee % 100 > 14))
+        return `Вы заказали ${countOfCoffee} напитка`;
+    else return `Вы заказали ${countOfCoffee} напитков`;
+}
+
+makeTable = (forms) => {
+    let rows = '<tr><th>Напиток</th><th>Молоко</th><th>Дополнительно</th><th>Пожелания</th></tr>';
+    forms.forEach(form=>{
+        const fromData = new FormData(form);
+        rows += "<tr>" + convertToRow(fromData) + "</tr>";
+    })
+    return rows;
+}
+
+convertToRow = (formData) => {
+    return `<td>${convertion[formData.get('type')]}</td>
+    <td>${convertion[formData.get('milk')]}</td>
+    <td>${formData.getAll('options').map(option => convertion[option]).join(", ")}</td>
+    <td>${formData.get('comment')}</td>`;
+}
+
+cloneText = (textarea) =>{
+    let text = textarea.value.replace(/(срочно)|(быстрее)|(побыстрее)|(скорее)|(поскорее)|(очень нужно)/gi, "<b>$&</b>");
+    textarea.parentNode.querySelector("span").innerHTML = text;
+}
+const lightboxForm = document.querySelector(".lightbox-form");
+lightboxForm.onsubmit = (el) =>{
+    const form = new FormData(lightboxForm);
+    const orderTime = form.get('order-time').split(':').map(num=>+num);
+    const now = new Date();
+    const nowTime = [now.getHours(), now.getMinutes()];
+    if (orderTime.length === 1 || nowTime[0] > orderTime[0] || nowTime[0] === orderTime[0] && nowTime[1] > orderTime[1]){
+        lightboxForm.querySelector("input").style.border = "1px red solid";
+        alert("Мы не умеем перемещаться во времени. Выберите время позже, чем текущее");
+        return false;
+    }
+}
+addCoffee();
+deleteCoffee(template);
diff --git a/styles.css b/styles.css
@@ -1,4 +1,5 @@
 .beverage {
+    position: relative;
     border: 1px solid #eee;
     margin: 15px 0;
     padding: 15px;
@@ -45,3 +46,99 @@
     border-radius: 5px;
 }
 
+.close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 40px;
+    height: 40px;
+    border-radius: 40px;
+    cursor: pointer;
+}
+.close:before {
+    content: '+';
+    color: black;
+    position: absolute;
+    z-index: 2;
+    transform: rotate(45deg);
+    font-size: 50px;
+    line-height: 1;
+    top: -5px;
+    left: 6px;
+    transition: all 0.3s cubic-bezier(0.77, 0, 0.2, 0.85);
+}
+.close:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    background: black;
+    transition: all 0.3s cubic-bezier(0.77, 0, 0.2, 0.85);
+    transform: scale(0.01);
+}
+.close:hover:after {
+    transform: scale(1);
+}
+.close:hover:before {
+    transform: scale(0.8) rotate(45deg);
+    color: #fff;
+}
+.hidden{
+    backdrop-filter: blur(2px);
+    background-color: rgba(0,0,0,.3);
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 5;
+    top: 0;
+    left: 0;
+}
+.lightbox {
+    width: 500px;
+    position: relative;
+    background-color: #f2eded;
+    z-index: 2;
+}
+.lightbox-head{
+    display: flex;
+    justify-content: space-between;
+}
+.countOfCoffee{
+    margin: 10px auto auto 30px;
+    text-align: center;
+    font-size: medium;
+}
+.lightboxClose{
+    top: 0px;
+    right: 0px;
+    position: relative;
+}
+table{
+    text-align: center;
+    width: 480px;
+    margin: 10px;
+    border-collapse: collapse;
+    border: 1px solid black;
+}
+th{
+    border-bottom: 1px solid grey;
+}
+td{
+    border-top: 1px solid grey;
+}
+.textarea{
+    display: flex;
+    align-items:flex-start;
+}
+.comment-text{
+    margin-left: 30px;
+}
+.lightbox-form{
+    margin: 5px auto 10px 30px;
+}