(Solved) : Html Coding Question Dynamically Allocated 3 Column Restaurant Menu Layout Info Restaurant Q43974598 . . .
HTML coding question:
Dynamically allocated 3-column restaurant menu layout. The infofor the restaurants is in an external Javascript file. I willattach the format of one single restaurant. The restaurants arechosen form a drop down menu and the left column has a list of thecategories in the restaurant’s menu (these are also be links toallow the user to skip directly to that category within the menu).The middle column should present the menu items of the restaurantwithin the categories and the rightmost column is the order summaryafter menu items are added.
I am struggling to populate the columns dynamically. With what Ihave so far the list items come up as object or unknown. Any helpwould be appreciated.
From the external Javascript file:
let restaurants = [aragorn, legolas, frodo];
From my html code so far:
Snippet from script:
dropdown.onchange = function() {
document.getElementById(“categories”).innerHTML =restaurants[key].menu;
}
Snippet for html:
.Let aragorn = { name: “Aragorn’s Orc BBQ”, //The name of the restaurant min order: 20, //The minimum order amount required to place an order delivery charge: 5, //The delivery charge for this restaurant //The menu menu: { // First category “Appetizers”: { //First item of this category 0: { name: “Orc feet”, description: “Seasoned and grilled over an open flame.”, // price: 5.50 1: { name: “Pickled Orc fingers”, description: “Served with warm bread, 5 per order.”, price: 4.00 2: { //Thank you Kiratchii name: “Sauron’s Lava Soup”, description: “It’s just really spicy water.”. price: 7.50 3: { name: “Eowyn’s (In) Famous Stew”, description: “Bet you can’t eat it all.”, price: 0.50 4: { name: “The 9 rings of men.”, description: “The finest of onion rings served with 9 different dipping sauces.”, price: 14.50 “Combos”: { 5: { name: “Buying the Farm”, description: “An arm and a leg, a side of cheek meat, and a buttered biscuit.”, price: 15.99 }, 6: { name: “The Black Gate Box”, description: “Lots of unidentified pieces. Serves 50.”, price: 65.00 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 <p id=”order”></p> <p id=”delivery”></p> <div class=”row” > <div class=”column”> <h3>CATEGORIES</h3> <p>Here are the categories restaurant offers!</p> <ol id=”categories”></ol> </div> <div class=”column” > <h3>MENU</h3> <p>Here’s the restaurant menu, take a look!</p> <ol id=”menu”></ol> </div> <div class=”column”=> <h3>SUMMARY</h3> ‘<p>Your order summary:</p> <ol id=”summary”></ol> </div> </div> Show transcribed image text Let aragorn = { name: “Aragorn’s Orc BBQ”, //The name of the restaurant min order: 20, //The minimum order amount required to place an order delivery charge: 5, //The delivery charge for this restaurant //The menu menu: { // First category “Appetizers”: { //First item of this category 0: { name: “Orc feet”, description: “Seasoned and grilled over an open flame.”, // price: 5.50 1: { name: “Pickled Orc fingers”, description: “Served with warm bread, 5 per order.”, price: 4.00 2: { //Thank you Kiratchii name: “Sauron’s Lava Soup”, description: “It’s just really spicy water.”. price: 7.50 3: { name: “Eowyn’s (In) Famous Stew”, description: “Bet you can’t eat it all.”, price: 0.50 4: { name: “The 9 rings of men.”, description: “The finest of onion rings served with 9 different dipping sauces.”, price: 14.50 “Combos”: { 5: { name: “Buying the Farm”, description: “An arm and a leg, a side of cheek meat, and a buttered biscuit.”, price: 15.99 }, 6: { name: “The Black Gate Box”, description: “Lots of unidentified pieces. Serves 50.”, price: 65.00
138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 CATEGORIES Here are the categories restaurant offers! MENU Here’s the restaurant menu, take a look! SUMMARY ‘Your order summary:
Expert Answer
Answer to HTML coding question: Dynamically allocated 3-column restaurant menu layout. The info for the restaurants is in an exter…
OR