Scribd
Upload
19 views3 pages

Frontend

Uploaded by

the mass
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views3 pages

Frontend

Uploaded by

the mass
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>

<html lang="en" data-theme="light">

<head>

<meta charset="UTF-8" />

<link rel="icon" type="image/svg+xml" href="/vite.svg" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Vite + React</title>

<link rel="stylesheet" href="./src/index.css" />

</head>

<body>

<div id="root"></div>

<script type="module" src="/src/main.jsx"></script>

</body>

</html>

/** @type {import('tailwindcss').Config} */

export default {

content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],

theme: {

extend: {

fontFamily: {

custom: ["Poppins", "sans-serif"],

},

daisyui: {

themes: ["light", "dark", "cupcake","coffee"],

},

},

},

plugins: [require("daisyui")],

};

// App.js
import React, { useState, useEffect } from 'react';

import axios from 'axios';

function App() {

const [menu, setMenu] = useState([]);

const [order, setOrder] = useState([]);

const [total, setTotal] = useState(0);

useEffect(() => {

// Fetch menu items

axios.get('http://localhost:5000/menu')

.then((response) => setMenu(response.data))

.catch((error) => console.error(error));

}, []);

const addToOrder = (item) => {

setOrder([...order, item]);

setTotal(total + item.price);

};

const placeOrder = () => {

axios.post('http://localhost:5000/order', { items: order, total })

.then((response) => {

alert("Order placed successfully!");

setOrder([]);

setTotal(0);

})

.catch((error) => console.error(error));

};

return (

<div>

<h1>Food Ordering App</h1>

<h2>Menu</h2>

<ul>

{menu.map((item) => (
<li key={item._id}>

{item.name} - ${item.price}

<button onClick={() => addToOrder(item)}>Add to Order</button>

</li>

))}

</ul>

<h2>Your Order</h2>

<ul>

{order.map((item, index) => (

<li key={index}>{item.name} - ${item.price}</li>

))}

</ul>

<p>Total: ${total}</p>

{order.length > 0 && <button onClick={placeOrder}>Place Order</button>}

</div>

);

You might also like