Skip to content

Commit 818dff2

Browse files
authored
Merge pull request #50 from tajulafreen/Food_ordering_App
50Projects-HTML-CSS-JavaScript : Food ordering app
2 parents 1ecae28 + f915372 commit 818dff2

File tree

4 files changed

+200
-0
lines changed

4 files changed

+200
-0
lines changed

README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -529,6 +529,17 @@ In order to run this project you need:
529529
details>
530530
li>
531531

532+
<li>
533+
<details>
534+
<summary>Food Ordering Appsummary>
535+
<p>The Food Order App is a simple web application that allows users to order food items from a menu. Users can view the available items, add them to their cart, and see the total price. The app also enables users to place an order, and upon successful placement, the cart is cleared.p>
536+
<ul>
537+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/FoodOrdering/">Live Demoa>li>
538+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/FoodOrdering">Sourcea>li>
539+
ul>
540+
details>
541+
li>
542+
532543
ol>
533544

534545
<p align="right">(<a href="#readme-top">back to topa>)p>

Source-Code/FoodOrdering/index.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
>
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 Apptitle>
7+
<link rel="stylesheet" href="style.css">
8+
head>
9+
<body>
10+
<div class="container">
11+
<h1>Food Order Apph1>
12+
<div class="menu">
13+
<div class="menu-item">
14+
<img src="burger.jpg" alt="Burger">
15+
<div class="item-info">
16+
<h3>Burgerh3>
17+
<p>$5.99p>
18+
<button class="add-to-cart" data-name="Burger" data-price="5.99">Add to Cartbutton>
19+
div>
20+
div>
21+
<div class="menu-item">
22+
<img src="pizza.jpg" alt="Pizza">
23+
<div class="item-info">
24+
<h3>Pizzah3>
25+
<p>$8.99p>
26+
<button class="add-to-cart" data-name="Pizza" data-price="8.99">Add to Cartbutton>
27+
div>
28+
div>
29+
<div class="menu-item">
30+
<img src="pasta.jpg" alt="Pasta">
31+
<div class="item-info">
32+
<h3>Pastah3>
33+
<p>$7.49p>
34+
<button class="add-to-cart" data-name="Pasta" data-price="7.49">Add to Cartbutton>
35+
div>
36+
div>
37+
div>
38+
39+
<div class="cart">
40+
<h2>Your Carth2>
41+
<ul id="cart-items">
42+
43+
ul>
44+
<p>Total: $<span id="total-price">0.00span>p>
45+
<button id="place-order" disabled>Place Orderbutton>
46+
div>
47+
div>
48+
49+
<script src="script.js">script>
50+
body>
51+
html>

Source-Code/FoodOrdering/script.js

Lines changed: 50 additions & 0 deletions
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

Lines changed: 88 additions & 0 deletions
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)