add markup

package.json

@@ -50,6 +50,6 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "handlebars": "^4.7.6"
+    "handlebars": "^4.7.7"
   }
 }

src/index.html

@@ -42,7 +42,7 @@
       </div>
     </div>
 
-    <!-- В этот список рендери разметку меню -->
+    <!-- В этот список рендерит разметку меню -->
     <ul class="menu js-menu"></ul>
   </body>
 </html>

src/index.js

@@ -1 +1,18 @@
+import initialMenu from './menu.json';
+import templateCardList from './templates/cards-list.hbs';
+import refs from './refs.js';
+
+
 import './styles.css';
+
+
+
+// const Theme = {
+//   LIGHT: 'light-theme',
+//   DARK: 'dark-theme',
+// };
+
+
+const menuMarkup = templateCardList(initialMenu);
+
+refs.dishes.insertAdjacentHTML('beforeend', menuMarkup);

src/refs.js

@@ -0,0 +1,5 @@
+export default {
+    dishes: document.querySelector('.js-menu'),
+    themeSwitcher: document.querySelector('.theme-switch-toggle'),
+body: document.querySelector('body'),
+}

src/templates/card.hbs

@@ -0,0 +1,28 @@
+<li class="menu__item">
+    <article class="card">
+        <img src={{image}} alt={{name}} class="card__image" />
+        <div class="card__content">
+            <h2 class="card__name">{{name}}</h2>
+            <p class="card__price">
+                <i class="material-icons"> monetization_on </i>
+                {{price}} кредитов
+            </p>
+
+            <p class="card__descr">
+                {{description}}
+            </p>
+
+            <ul class="tag-list">
+                {{#each ingredients}}
+                <li class="tag-list__item">{{this}}</li>
+                {{/each}}
+
+            </ul>
+        </div>
+
+        <button class="card__button button">
+            <i class="material-icons button__icon"> shopping_cart </i>
+            В корзину
+        </button>
+    </article>
+</li>

src/templates/cards-list.hbs

@@ -0,0 +1,3 @@
+{{#each this}}
+{{> ./card.hbs this}}
+{{/each}}