<!
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>
);
