Skip to content

Commit f4026e8

Browse files
tajulafreentajulafreen
committed
Add the project
1 parent 1ecae28 commit f4026e8

File tree

3 files changed

+189
-0
lines changed

3 files changed

+189
-0
lines changed

‎Source-Code/FoodOrdering/index.html

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Food Order App</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Food Order App</h1>
12+
<div class="menu">
13+
<div class="menu-item">
14+
<img src="burger.jpg" alt="Burger">
15+
<div class="item-info">
16+
<h3>Burger</h3>
17+
<p>$5.99</p>
18+
<button class="add-to-cart" data-name="Burger" data-price="5.99">Add to Cart</button>
19+
</div>
20+
</div>
21+
<div class="menu-item">
22+
<img src="pizza.jpg" alt="Pizza">
23+
<div class="item-info">
24+
<h3>Pizza</h3>
25+
<p>$8.99</p>
26+
<button class="add-to-cart" data-name="Pizza" data-price="8.99">Add to Cart</button>
27+
</div>
28+
</div>
29+
<div class="menu-item">
30+
<img src="pasta.jpg" alt="Pasta">
31+
<div class="item-info">
32+
<h3>Pasta</h3>
33+
<p>$7.49</p>
34+
<button class="add-to-cart" data-name="Pasta" data-price="7.49">Add to Cart</button>
35+
</div>
36+
</div>
37+
</div>
38+
39+
<div class="cart">
40+
<h2>Your Cart</h2>
41+
<ul id="cart-items">
42+
<!-- Cart items will appear here -->
43+
</ul>
44+
<p>Total: $<span id="total-price">0.00</span></p>
45+
<button id="place-order" disabled>Place Order</button>
46+
</div>
47+
</div>
48+
49+
<script src="script.js"></script>
50+
</body>
51+
</html>

‎Source-Code/FoodOrdering/script.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
const addToCartButtons = document.querySelectorAll('.add-to-cart');
2+
const cartItemsList = document.getElementById('cart-items');
3+
const totalPriceElement = document.getElementById('total-price');
4+
const placeOrderButton = document.getElementById('place-order');
5+
6+
let cart = [];
7+
let totalPrice = 0;
8+
9+
const addToCart = (event) => {
10+
const itemName = event.target.dataset.name;
11+
const itemPrice = parseFloat(event.target.dataset.price);
12+
13+
// Add item to cart
14+
cart.push({ name: itemName, price: itemPrice });
15+
16+
// Update total price
17+
totalPrice += itemPrice;
18+
19+
// Add item to the cart UI
20+
const cartItem = document.createElement('li');
21+
cartItem.textContent = `${itemName} - $${itemPrice.toFixed(2)}`;
22+
cartItemsList.appendChild(cartItem);
23+
24+
// Update the total price displayed
25+
totalPriceElement.textContent = totalPrice.toFixed(2);
26+
27+
// Enable the "Place Order" button
28+
placeOrderButton.disabled = false;
29+
};
30+
31+
addToCartButtons.forEach((button) => {
32+
button.addEventListener('click', addToCart);
33+
});
34+
35+
const placeOrder = () => {
36+
if (cart.length === 0) return;
37+
38+
alert('Order placed successfully!');
39+
cart = [];
40+
totalPrice = 0;
41+
42+
// Clear cart UI
43+
cartItemsList.innerHTML = '';
44+
totalPriceElement.textContent = '0.00';
45+
46+
// Disable the "Place Order" button again
47+
placeOrderButton.disabled = true;
48+
};
49+
50+
placeOrderButton.addEventListener('click', placeOrder);

‎Source-Code/FoodOrdering/style.css

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
background-color: #a5ef9d;
9+
height: 100vh;
10+
}
11+
12+
.container {
13+
background-color: #fff;
14+
padding: 20px;
15+
border-radius: 10px;
16+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
17+
width: 70%;
18+
max-width: 1000px;
19+
}
20+
21+
h1 {
22+
text-align: center;
23+
font-size: 32px;
24+
}
25+
26+
.menu {
27+
display: flex;
28+
justify-content: space-around;
29+
margin-bottom: 20px;
30+
}
31+
32+
.menu-item {
33+
text-align: center;
34+
width: 30%;
35+
background-color: #f9f9f9;
36+
padding: 10px;
37+
border-radius: 10px;
38+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
39+
}
40+
41+
.menu-item img {
42+
width: 100%;
43+
max-height: 200px;
44+
object-fit: cover;
45+
border-radius: 10px;
46+
}
47+
48+
.add-to-cart {
49+
margin-top: 10px;
50+
padding: 10px 20px;
51+
background-color: #28a745;
52+
color: #fff;
53+
border: none;
54+
border-radius: 5px;
55+
cursor: pointer;
56+
}
57+
58+
.add-to-cart:hover {
59+
background-color: #218838;
60+
}
61+
62+
.cart {
63+
margin-top: 30px;
64+
text-align: center;
65+
}
66+
67+
.cart ul {
68+
list-style-type: none;
69+
padding: 0;
70+
}
71+
72+
.cart li {
73+
margin: 10px 0;
74+
}
75+
76+
#place-order {
77+
padding: 10px 20px;
78+
background-color: #007bff;
79+
color: white;
80+
border: none;
81+
border-radius: 5px;
82+
cursor: pointer;
83+
}
84+
85+
#place-order:disabled {
86+
background-color: #aaa;
87+
cursor: not-allowed;
88+
}

0 commit comments

Comments
 (0)