-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #50 from tajulafreen/Food_ordering_App
50Projects-HTML-CSS-JavaScript : Food ordering app
- Loading branch information
Showing
4 changed files
with
200 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Food Order App</title> | ||
<link rel="stylesheet" href="style.css"> | ||
</head> | ||
<body> | ||
<div class="container"> | ||
<h1>Food Order App</h1> | ||
<div class="menu"> | ||
<div class="menu-item"> | ||
<img src="burger.jpg" alt="Burger"> | ||
<div class="item-info"> | ||
<h3>Burger</h3> | ||
<p>$5.99</p> | ||
<button class="add-to-cart" data-name="Burger" data-price="5.99">Add to Cart</button> | ||
</div> | ||
</div> | ||
<div class="menu-item"> | ||
<img src="pizza.jpg" alt="Pizza"> | ||
<div class="item-info"> | ||
<h3>Pizza</h3> | ||
<p>$8.99</p> | ||
<button class="add-to-cart" data-name="Pizza" data-price="8.99">Add to Cart</button> | ||
</div> | ||
</div> | ||
<div class="menu-item"> | ||
<img src="pasta.jpg" alt="Pasta"> | ||
<div class="item-info"> | ||
<h3>Pasta</h3> | ||
<p>$7.49</p> | ||
<button class="add-to-cart" data-name="Pasta" data-price="7.49">Add to Cart</button> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="cart"> | ||
<h2>Your Cart</h2> | ||
<ul id="cart-items"> | ||
<!-- Cart items will appear here --> | ||
</ul> | ||
<p>Total: $<span id="total-price">0.00</span></p> | ||
<button id="place-order" disabled>Place Order</button> | ||
</div> | ||
</div> | ||
|
||
<script src="script.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
const addToCartButtons = document.querySelectorAll('.add-to-cart'); | ||
const cartItemsList = document.getElementById('cart-items'); | ||
const totalPriceElement = document.getElementById('total-price'); | ||
const placeOrderButton = document.getElementById('place-order'); | ||
|
||
let cart = []; | ||
let totalPrice = 0; | ||
|
||
const addToCart = (event) => { | ||
const itemName = event.target.dataset.name; | ||
const itemPrice = parseFloat(event.target.dataset.price); | ||
|
||
// Add item to cart | ||
cart.push({ name: itemName, price: itemPrice }); | ||
|
||
// Update total price | ||
totalPrice += itemPrice; | ||
|
||
// Add item to the cart UI | ||
const cartItem = document.createElement('li'); | ||
cartItem.textContent = `${itemName} - $${itemPrice.toFixed(2)}`; | ||
cartItemsList.appendChild(cartItem); | ||
|
||
// Update the total price displayed | ||
totalPriceElement.textContent = totalPrice.toFixed(2); | ||
|
||
// Enable the "Place Order" button | ||
placeOrderButton.disabled = false; | ||
}; | ||
|
||
addToCartButtons.forEach((button) => { | ||
button.addEventListener('click', addToCart); | ||
}); | ||
|
||
const placeOrder = () => { | ||
if (cart.length === 0) return; | ||
|
||
alert('Order placed successfully!'); | ||
cart = []; | ||
totalPrice = 0; | ||
|
||
// Clear cart UI | ||
cartItemsList.innerHTML = ''; | ||
totalPriceElement.textContent = '0.00'; | ||
|
||
// Disable the "Place Order" button again | ||
placeOrderButton.disabled = true; | ||
}; | ||
|
||
placeOrderButton.addEventListener('click', placeOrder); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
body { | ||
font-family: Arial, sans-serif; | ||
margin: 0; | ||
padding: 0; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
background-color: #a5ef9d; | ||
height: 100vh; | ||
} | ||
|
||
.container { | ||
background-color: #fff; | ||
padding: 20px; | ||
border-radius: 10px; | ||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); | ||
width: 70%; | ||
max-width: 1000px; | ||
} | ||
|
||
h1 { | ||
text-align: center; | ||
font-size: 32px; | ||
} | ||
|
||
.menu { | ||
display: flex; | ||
justify-content: space-around; | ||
margin-bottom: 20px; | ||
} | ||
|
||
.menu-item { | ||
text-align: center; | ||
width: 30%; | ||
background-color: #f9f9f9; | ||
padding: 10px; | ||
border-radius: 10px; | ||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | ||
} | ||
|
||
.menu-item img { | ||
width: 100%; | ||
max-height: 200px; | ||
object-fit: cover; | ||
border-radius: 10px; | ||
} | ||
|
||
.add-to-cart { | ||
margin-top: 10px; | ||
padding: 10px 20px; | ||
background-color: #28a745; | ||
color: #fff; | ||
border: none; | ||
border-radius: 5px; | ||
cursor: pointer; | ||
} | ||
|
||
.add-to-cart:hover { | ||
background-color: #218838; | ||
} | ||
|
||
.cart { | ||
margin-top: 30px; | ||
text-align: center; | ||
} | ||
|
||
.cart ul { | ||
list-style-type: none; | ||
padding: 0; | ||
} | ||
|
||
.cart li { | ||
margin: 10px 0; | ||
} | ||
|
||
#place-order { | ||
padding: 10px 20px; | ||
background-color: #007bff; | ||
color: white; | ||
border: none; | ||
border-radius: 5px; | ||
cursor: pointer; | ||
} | ||
|
||
#place-order:disabled { | ||
background-color: #aaa; | ||
cursor: not-allowed; | ||
} |