From f4026e82eaad31f464e54511322ae21a1fc7acb1 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 25 Dec 2024 01:51:47 +0530 Subject: [PATCH 1/2] Add the project --- Source-Code/FoodOrdering/index.html | 51 +++++++++++++++++ Source-Code/FoodOrdering/script.js | 50 ++++++++++++++++ Source-Code/FoodOrdering/style.css | 88 +++++++++++++++++++++++++++++ 3 files changed, 189 insertions(+) create mode 100644 Source-Code/FoodOrdering/index.html create mode 100644 Source-Code/FoodOrdering/script.js create mode 100644 Source-Code/FoodOrdering/style.css diff --git a/Source-Code/FoodOrdering/index.html b/Source-Code/FoodOrdering/index.html new file mode 100644 index 0000000..07813f6 --- /dev/null +++ b/Source-Code/FoodOrdering/index.html @@ -0,0 +1,51 @@ + + + + + + Food Order App + + + +
+

Food Order App

+
+
+ Burger +
+

Burger

+

$5.99

+ +
+
+
+ Pizza +
+

Pizza

+

$8.99

+ +
+
+
+ Pasta +
+

Pasta

+

$7.49

+ +
+
+
+ +
+

Your Cart

+
    + +
+

Total: $0.00

+ +
+
+ + + + diff --git a/Source-Code/FoodOrdering/script.js b/Source-Code/FoodOrdering/script.js new file mode 100644 index 0000000..0d0ffe8 --- /dev/null +++ b/Source-Code/FoodOrdering/script.js @@ -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); diff --git a/Source-Code/FoodOrdering/style.css b/Source-Code/FoodOrdering/style.css new file mode 100644 index 0000000..8e1defe --- /dev/null +++ b/Source-Code/FoodOrdering/style.css @@ -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; +} From f9153725a2fafcf152441725dd3e7e7828d4030b Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 25 Dec 2024 01:54:24 +0530 Subject: [PATCH 2/2] update the readme with the description --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index cd4db08..8e353ca 100644 --- a/README.md +++ b/README.md @@ -529,6 +529,17 @@ In order to run this project you need: +
  • +
    +Food Ordering App +

    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.

    + +
    +
    • +

    (back to top)