const menuField = document.querySelector('.menu__field .container'),
menuList = {};
class MenuCard {
constructor(imageURL, menuTitle, menuText, menuPrice) {
this.imageURL = imageURL;
this.menuTitle = menuTitle;
this.menuText = menuText;
this.menuPrice = menuPrice;
}
}
menuList.fitness = new MenuCard('img/tabs/vegy.jpg', 'Меню "Фитнес"', 'Меню "Фитнес" - это новый подход к приготовлению блюд: больше свежих овощей и фруктов. Продукт активных и здоровых людей. Это абсолютно новый продукт с оптимальной ценой и высоким качеством!', 229);
menuList.premium = new MenuCard('img/tabs/elite.jpg', 'Меню “Премиум”', 'В меню “Премиум” мы используем не только красивый дизайн упаковки, но и качественное исполнение блюд. Красная рыба, морепродукты, фрукты - ресторанное меню без похода в ресторан!', 550);
menuList.lenten = new MenuCard('img/tabs/post.jpg', 'Меню "Постное"', 'Меню “Постное” - это тщательный подбор ингредиентов: полное отсутствие продуктов животного происхождения, молоко из миндаля, овса, кокоса или гречки, правильное количество белков за счет тофу и импортных вегетарианских стейков.', 430);
console.log(menuList.fitness.imageURL);
function generateCards() {
for (let menuItem in menuList) {
console.log(menuItem.menuText);
menuField.innerHTML += `
<div class="menu__item">
<img src="${menuItem.imageURL}" alt="image">
<h3 class="menu__item-subtitle">${menuItem.menuTitle}</h3>
<div class="menu__item-descr">${menuItem.menuText}</div>
<div class="menu__item-divider"></div>
<div class="menu__item-price">
<div class="menu__item-cost"> Цена: </div>
<div class="menu__item-total">
<span>${menuItem.menuPrice}</span></span> грн/день
</div>
</div>
</div>
`;
}
}
generateCards();
Пожалуйста, помогите понять в чем проблема.
