<!
DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/[Link]" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<link rel="stylesheet" href="./src/[Link]" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/[Link]"></script>
</body>
</html>
/** @type {import('tailwindcss').Config} */
export default {
content: ["./[Link]", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
fontFamily: {
custom: ["Poppins", "sans-serif"],
},
daisyui: {
themes: ["light", "dark", "cupcake","coffee"],
},
},
},
plugins: [require("daisyui")],
};
// [Link]
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
[Link]('[Link]
.then((response) => setMenu([Link]))
.catch((error) => [Link](error));
}, []);
const addToOrder = (item) => {
setOrder([...order, item]);
setTotal(total + [Link]);
};
const placeOrder = () => {
[Link]('[Link] { items: order, total })
.then((response) => {
alert("Order placed successfully!");
setOrder([]);
setTotal(0);
})
.catch((error) => [Link](error));
};
return (
<div>
<h1>Food Ordering App</h1>
<h2>Menu</h2>
<ul>
{[Link]((item) => (
<li key={item._id}>
{[Link]} - ${[Link]}
<button onClick={() => addToOrder(item)}>Add to Order</button>
</li>
))}
</ul>
<h2>Your Order</h2>
<ul>
{[Link]((item, index) => (
<li key={index}>{[Link]} - ${[Link]}</li>
))}
</ul>
<p>Total: ${total}</p>
{[Link] > 0 && <button onClick={placeOrder}>Place Order</button>}
</div>
);
