I'm learning how to build a website and I am having problems with the following code. I can't figure out what is going on with it at all. I'm using visual studio code to write this in.
var HtmlCode = {
GetMenuItem:function(item){
let plg = item.choices[0];
let prg = item.choices[1];
let lbl_plg = '${item.type} - ${item.name} - ${plg.size}';
let lbl_prg = '${item.type} - ${item.name} - ${prg.size}';
return '<div class= "menu-item"> <div><div><img src="${item.img}"></div><div>${item.name}</div> </div><div>${item.descr}</div> <div> <div act="add2order" id="${plg.id}" cost="${plg.cost}" lbl="${plg_lbl}" title="Click to order">${plg.txt}</div> <div act="add2order" id="${prg.id}" cost="${prg.cost}" lbl="${prg_lbl}" title="Click to order">${prg.txt}</div> </div> </div>';
}
}When I clean up the (return) and put it so I don't have to scroll to the right I get all sorts of errors in the visual studio code editor. I have it all together now on one line as shown in the example and it returns something but it won't return the menu items. I get all the items such as ${item.name} etc. but no img or any thing from my menu.
var App = {
Menu:null,
Init:function(){
this.Menu = JoesPizza.Menu;
$("#PizzaOrderSubmit").click(this.OrderNext);
},
LoadMenu:function(){
$("#MenuItemList").html("");
this.Menu.items.forEach(item => {
let html = HtmlCode.GetMenuItem(item);
$("#MenuItemList").append(html);
});
// attach click events to new menu items
}
}var JoesPizza = JoesPizza||{};
JoesPizza.Menu = {"items":[
{"type":"Pizza", "name":"Cheese", "descr":"Marinara sauce topped with whole milk mozzarella cheese.",
"choices":[{"id":"pizza-cheese-lg", "size":"Large", "cost":22.99, "txt":"Large: $22.99"},
{"id":"pizza-cheese-rg", "size":"Regular", "cost":18.99, "txt":"Regular: $18.99"}],
"img":"/imgs/cheese.png"},
{"type":"Pizza", "name":"Pepperoni", "descr":"Marinara sauce with authentic old-world style pepperoni.",
"choices":[{"id":"pepp-lg", "size":"Large", "cost":23.99, "txt":"Large: $23.99"},
{"id":"pepp-rg", "size":"Regular", "cost":19.99, "txt":"Regular: $19.99"}],
"img":"/imgs/pepperoni.png"},
{"type":"Pizza", "name":"Meat Lover's", "descr":"Marinara sauce, authentic pepperoni, natural Italian sausage, roasted ham, smoked bacon, pork and beef.",
"choices":[{"id":"meat-lg", "size":"Large", "cost":23.99, "txt":"Large: $23.99"},
{"id":"meat-rg", "size":"Regular", "cost":19.99, "txt":"Regular: $19.99"}],
"img":"/imgs/meat.png"},
{"type":"Pizza", "name":"Supreme", "descr":"Marinara sauce, pepperoni, pork, beef,fresh mushrooms, fresh green bell peppers and fresh red onions.",
"choices":[{"id":"supr-lg", "size":"Large", "cost":23.99, "txt":"Large: $23.99"},
{"id":"supr-rg", "size":"Regular", "cost":19.99, "txt":"Regular: $19.99"}],
"img":"/imgs/supreme.png"},
{"type":"Wings", "name":"Traditional Bone-in", "descr":"Classic, juicy bone-in wings served perfectly crispy and tossed in your choice of signature sauce.",
"choices":[{"id":"wings-trad-12", "size":"12 Pieces", "cost":11.99, "txt":"12 Wings: $11.99"},
{"id":"wings-trad-08", "size":"8 Pieces", "cost":8.99, "txt":"8 Wings: $8.99"}],
"img":"/imgs/wings.png"}
]};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8"/>
<title>Joe's Pizza</title>
<link type="text/css" rel="stylesheet" href="/css/app.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/menu.js"></script>
<script type="text/javascript" src="/js/html-templates.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
</head>
<body>
<!-- top banner -->
<div class="page-top">
<img src="/imgs/pizza.png" title="Pizza Picture"/>
<span>joe's pizza</span>
<a href="/">
<img src="/imgs/home.png"></a>
</div>
<!-- page body -->
<div class="page-body">
<div class="side-left">
<div id="PizzaMenuHtml">
<fieldset id="PizzaMenu">
<legend>menu</legend>
<div id="MenuItemList">
</div>
</fieldset>
</div>
</div>
<div class="side-right">
<fieldset id="PizzaOrder">
<legend>your order</legend>
<div id="PizzaOrderItems">
</div>
<div id="PizzaOrderSummary">
<div>Order Total:</div>
<div></div>
</div>
<div id="PizzaOrderSubmit">Next >>></div>
</fieldset>
</div>
</div>
<div class="page-footer">
</div>
<script type="text/javascript">
App.Init();
App.LoadMenu();
</script>
</body>
</html>
