|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Menu</title> |
|
</head> |
|
<body> |
|
<h1>Welcome to the Menu</h1> |
|
<div id="menu"> |
|
{% for item in menu_items %} |
|
<div class="menu-item"> |
|
<h2>{{ item.name }}</h2> |
|
<p>Price: ${{ item.price }}</p> |
|
<p>Ingredients: {{ item.ingredients }}</p> |
|
<p>Category: {{ item.category }}</p> |
|
<button onclick="orderItem('{{ item.name }}')">Order</button> |
|
</div> |
|
{% endfor %} |
|
</div> |
|
|
|
<script> |
|
function orderItem(itemName) { |
|
let quantity = prompt("How many would you like to order?"); |
|
fetch("/order", { |
|
method: "POST", |
|
headers: { |
|
"Content-Type": "application/json" |
|
}, |
|
body: JSON.stringify({ "item_name": itemName, "quantity": quantity }) |
|
}) |
|
.then(response => response.json()) |
|
.then(data => { |
|
alert(data.message); |
|
}) |
|
.catch(error => console.error("Error placing order:", error)); |
|
} |
|
</script> |
|
</body> |
|
</html> |
|
|
