import React, { useState } from 'react'; interface CalorieLog { id: number; date: string; food: string; calories: number; } const CalorieIntakeTracker = () => { const [calorieLogs, setCalorieLogs] = useState([]); const [newLog, setNewLog] = useState({ date: '', food: '', calories: 0 }); const [totalCalories, setTotalCalories] = useState(0); const handleAddLog = () => { const newCalorieLog: CalorieLog = { id: calorieLogs.length + 1, date: newLog.date, food: newLog.food, calories: newLog.calories, }; setCalorieLogs([...calorieLogs, newCalorieLog]); setNewLog({ date: '', food: '', calories: 0 }); setTotalCalories(totalCalories + newLog.calories); }; const handleDeleteLog = (id: number) => { const filteredLogs = calorieLogs.filter((log) => log.id !== id); setCalorieLogs(filteredLogs); const newTotalCalories = filteredLogs.reduce((acc, log) => acc + log.calories, 0); setTotalCalories(newTotalCalories); }; return (

Calorie Intake Tracker

Calorie Logs

{log.date}

{log.food}

{log.calories} calories

Total Calories: {totalCalories}

); }; export default CalorieIntakeTracker;