cards class add

GromovBoris · Jan 16, 2024 · 56727d8 · 56727d8
1 parent 0c97df0
commit 56727d8
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 47 deletions.
diff --git a/index.html b/index.html
@@ -222,53 +222,8 @@ <h2 class="title">Рассчитаем вашу потребность в кал
 
     <div class="menu">
       <h2 class="title">Наше меню на день</h2>
-
       <div class="menu__field">
-        <div class="container">
-          <div class="menu__item">
-            <img src="img/tabs/vegy.jpg" alt="vegy" />
-            <h3 class="menu__item-subtitle">Меню "Фитнес"</h3>
-            <div class="menu__item-descr">
-              Меню "Фитнес" - это новый подход к приготовлению блюд: больше
-              свежих овощей и фруктов. Продукт активных и здоровых людей. Это
-              абсолютно новый продукт с оптимальной ценой и высоким качеством!
-            </div>
-            <div class="menu__item-divider"></div>
-            <div class="menu__item-price">
-              <div class="menu__item-cost">Цена:</div>
-              <div class="menu__item-total"><span>229</span> грн/день</div>
-            </div>
-          </div>
-          <div class="menu__item">
-            <img src="img/tabs/elite.jpg" alt="elite" />
-            <h3 class="menu__item-subtitle">Меню “Премиум”</h3>
-            <div class="menu__item-descr">
-              В меню “Премиум” мы используем не только красивый дизайн упаковки,
-              но и качественное исполнение блюд. Красная рыба, морепродукты,
-              фрукты - ресторанное меню без похода в ресторан!
-            </div>
-            <div class="menu__item-divider"></div>
-            <div class="menu__item-price">
-              <div class="menu__item-cost">Цена:</div>
-              <div class="menu__item-total"><span>550</span> грн/день</div>
-            </div>
-          </div>
-          <div class="menu__item">
-            <img src="img/tabs/post.jpg" alt="post" />
-            <h3 class="menu__item-subtitle">Меню "Постное"</h3>
-            <div class="menu__item-descr">
-              Меню “Постное” - это тщательный подбор ингредиентов: полное
-              отсутствие продуктов животного происхождения, молоко из миндаля,
-              овса, кокоса или гречки, правильное количество белков за счет тофу
-              и импортных вегетарианских стейков.
-            </div>
-            <div class="menu__item-divider"></div>
-            <div class="menu__item-price">
-              <div class="menu__item-cost">Цена:</div>
-              <div class="menu__item-total"><span>430</span> грн/день</div>
-            </div>
-          </div>
-        </div>
+        <div class="container"></div>
       </div>
     </div>
 

diff --git a/js/script.js b/js/script.js
@@ -143,7 +143,7 @@ window.addEventListener("DOMContentLoaded", () => {
     }
   });
 
-  const modalTimerId = setTimeout(openModal, 5000);
+  // const modalTimerId = setTimeout(openModal, 5000);
 
   function showModalByScroll() {
     if (
@@ -156,4 +156,68 @@ window.addEventListener("DOMContentLoaded", () => {
   }
 
   window.addEventListener("scroll", showModalByScroll);
+
+  //  CARDS
+
+  class MenuCard {
+    constructor(src, alt, title, descr, price, parentSelector) {
+      this.src = src;
+      this.alt = alt;
+      this.title = title;
+      this.descr = descr;
+      this.price = price;
+      this.parent = document.querySelector(parentSelector);
+      this.transfer = 38;
+      this.changeToUAH();
+    }
+
+    changeToUAH() {
+      this.price = this.price * this.transfer;
+    }
+
+    render() {
+      const element = document.createElement("div");
+      element.innerHTML = `
+      <div class="menu__item">
+        <img src=${this.src} alt=${this.alt} />
+        <h3 class="menu__item-subtitle">${this.title}</h3>
+        <div class="menu__item-descr">
+          ${this.descr}
+        </div>
+        <div class="menu__item-divider"></div>
+        <div class="menu__item-price">
+          <div class="menu__item-cost">Цена:</div>
+          <div class="menu__item-total"><span>${this.price}</span> грн/день</div>
+        </div>
+      </div>`;
+      this.parent.append(element);
+    }
+  }
+
+  new MenuCard(
+    "img/tabs/vegy.jpg",
+    "vegy",
+    'Меню "Фитнес"',
+    'Меню "Фитнес" - это новый подход к приготовлению блюд: больше свежих овощей и фруктов. Продукт активных и здоровых людей. Это абсолютно новый продукт с оптимальной ценой и высоким качеством!',
+    9,
+    ".menu .container"
+  ).render();
+
+  new MenuCard(
+    "img/tabs/elite.jpg",
+    "elite",
+    'Меню "Премиум"',
+    "В меню “Премиум” мы используем не только красивый дизайн упаковки, но и качественное исполнение блюд. Красная рыба, морепродукты, фрукты - ресторанное меню без похода в ресторан!",
+    14,
+    ".menu .container"
+  ).render();
+
+  new MenuCard(
+    "img/tabs/post.jpg",
+    "post",
+    'Меню "Постное"',
+    "Меню “Постное” - это тщательный подбор ингредиентов: полное отсутствие продуктов животного происхождения, молоко из миндаля, овса, кокоса или гречки, правильное количество белков за счет тофу и импортных вегетарианских стейков.",
+    21,
+    ".menu .container"
+  ).render();
 });