Skip to content

Commit

Permalink
Merge pull request #50 from tajulafreen/Food_ordering_App
Browse files Browse the repository at this point in the history
50Projects-HTML-CSS-JavaScript : Food ordering app
  • Loading branch information
tajulafreen authored Dec 24, 2024
2 parents 1ecae28 + f915372 commit 818dff2
Show file tree
Hide file tree
Showing 4 changed files with 200 additions and 0 deletions.
11 changes: 11 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -529,6 +529,17 @@ In order to run this project you need:
</details>
</li>

<li>
<details>
<summary>Food Ordering App</summary>
<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>
<ul>
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/FoodOrdering/">Live Demo</a></li>
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/FoodOrdering">Source</a></li>
</ul>
</details>
</li>

</ol>

<p align="right">(<a href="#readme-top">back to top</a>)</p>
Expand Down
51 changes: 51 additions & 0 deletions Source-Code/FoodOrdering/index.html
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>
50 changes: 50 additions & 0 deletions Source-Code/FoodOrdering/script.js
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);
88 changes: 88 additions & 0 deletions Source-Code/FoodOrdering/style.css
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;
}

0 comments on commit 818dff2

Please sign in to comment.