Scribd
Upload
26 views5 pages

Pizza Menu

Uploaded by

Cristine Versoza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views5 pages

Pizza Menu

Uploaded by

Cristine Versoza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Menu</title>
</head>

<body>

<header>
<div class="container">

<nav>
<div class=logo>
<img src="Pizza-restaurant-logo-on-transparent-background-PNG-
removebg-preview.png" alt="logo" class="logos" width="85px">
<a href="#"> JCC <span> Pizzeria</span></a>

</div>

<ul>

<li><a href="home.htm"> Home</a></li>


<li><a href="menu.htm"> Menu</a></li>
<li><a href="about.htm"> About Us</a></li>
<li><a href="contact.htm"> Contact</a></li>

<a href="menu.htm">
<button class="order"> Order Now</button> </a>

</ul>
</nav>
</div>
</header>

<section class="menus">

<h2 class="menutext">Menu</h2>
<div class="menu">
<div class="pizza">
<img src="392b41235e4f9eb60e0d282f602ca3c9-removebg-
preview.png" alt="Pepperoni Pizza">
<div class="pizza-details">

<h3>Pizza Pepperoni</h3>
<p>Ingredients: Pepperoni, Cheese, Tomato Sauce</p>
<p>Price: 100 pesos</p>
<input type="number" id="pizza-pepperoni-quantity"
placeholder="Quantity">
<button onclick="addToOrder('Pizza Pepperoni', 100)">Add to
Order</button>
</div>

</div>

<div class="pizza">
<img src="pizza-margarita-with-cheese-top-view-isolated-on-white-
background-removebg-preview.png" alt="Margherita Pizza">
<div class="pizza-details">

<h3>Pizza Margherita</h3>
<p>Ingredients: Tomato, Mozzarella Cheese, Basil</p>
<p>Price: 120 pesos</p>
<input type="number" id="pizza-margherita-quantity"
placeholder="Quantity">
<button onclick="addToOrder('Pizza Margherita', 120)">Add to
Order</button>
</div>
</div>

<div class="pizza">
<img src="pizza-removebg-preview.png" alt="Hawaiian Pizza">
<div class="pizza-details">

<h3>Pizza Hawaiian</h3>
<p>Ingredients: Ham, Pineapple, Cheese, Tomato Sauce</p>
<p>Price: 130 pesos</p>
<input type="number" id="pizza-hawaiian-quantity"
placeholder="Quantity">
<button onclick="addToOrder('Pizza Hawaiian', 130)">Add to
Order</button>

</div>
</div>
<div class="pizzas">

<img src="1000_F_240933259_9SwrrP4PWhiZkzkX72AXN21cmx4kSuuS-
removebg-preview.png" alt="Supreme Pizza">
<div class="pizza-details">

<h3>Pizza Supreme</h3>
<p>Ingredients: Pepperoni, Sausage, Mushroom, Bell Peppers,
Olives, Onion, Cheese,
Tomato Sauce</p>
<p>Price: 150 pesos</p>

<input type="number" id="pizza-supreme-quantity"


placeholder="Quantity">
<button onclick="addToOrder('Pizza Supreme', 150)">Add to
Order</button>
</div>
</div>

<div class="pizzas">
<img src="pizza-from-the-top-vegetarian-removebg-preview.png"
alt="Veggie Pizza">
<div class="pizza-details">
<h3>Pizza Veggie</h3>
<p>Ingredients: Bell Peppers, Mushrooms, Onion, Tomato, Black
Olives, Cheese, Tomato
Sauce</p>
<p>Price: 140 pesos</p>
<input type="number" id="pizza-veggie-quantity"
placeholder="Quantity">
<button onclick="addToOrder('Pizza Veggie', 140)">Add to
Order</button>

</div>
</div>
</div>

<div id="orderlist">
<h2>Your Orders</h2>
<div id="orders"></div>
<p>Total Price: <span id="total-price">0</span> pesos</p>
<p>Date: <span id="purchase-date"></span></p>
<button onclick="placeOrder()">Place Order</button>
</div>
</section>
<script>
let orders = [];
let totalPrice = 0;

function addToOrder(item, price) {


const quantity = parseInt(document.getElementById('pizza-' +
item.toLowerCase().replace(' ',
'-') + '-quantity').value);
if (quantity > 0) {
const order = { item, quantity, price, date: new Date() };
orders.push(order);
totalPrice += quantity * price;
updateOrderList();
} else {
alert('Please enter a valid quantity.');
}
}
function updateOrderList() {
const ordersElement = document.getElementById('orders');
ordersElement.innerHTML = '';
orders.forEach(order => {
const orderItem = document.createElement('div');
orderItem.classList.add('order-item');
orderItem.innerHTML = `
<p>${order.item} - Quantity: ${order.quantity} - Price: $
{order.quantity * order.price} pesos -
Date: ${order.date.toLocaleDateString()}</p>
<button onclick="removeFromOrder('${order.item}', ${order.price},
${order.quantity},
'${order.date.toLocaleDateString()}')">Remove</button>
`;
ordersElement.appendChild(orderItem);
});
document.getElementById('total-price').textContent = totalPrice;
document.getElementById('purchase-date').textContent = new
Date().toLocaleDateString();
}
function removeFromOrder(item, price, quantity, date) {
const index = orders.findIndex(order => order.item === item &&
order.date.toLocaleDateString() === date);
orders.splice(index, 1);
totalPrice -= quantity * price;
updateOrderList();
}
function placeOrder() {
if (confirm('Are you sure you want to place the order?')) {
alert('Order placed successfully!');
orders = [];
totalPrice = 0;
updateOrderList();
}
}
</script>

</body>
</html>

You might also like