Scribd
Upload
15 views

Frontend

Uploaded by

the mass
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Frontend

Uploaded by

the mass
Copyright
© © All Rights Reserved
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