A simple, intuitive web application for tracking daily nutrition and calorie intake. Built with modern frontend technologies and deployed on Netlify. This is the final project for learnjavascript.online
🌐 Live App: https://food-tracker-app.netlify.app/
The Food Tracker App helps users monitor their daily nutrition by logging foods with their macronutrient breakdown (carbohydrates, protein, and fat). The app automatically calculates total calories and provides a clean interface for tracking eating habits.
- 🍽️ Food Logging: Add foods with custom macronutrient values
- 📊 Calorie Calculation: Automatic calorie computation from macros
- 📈 Stats: View total calories and macronutrient breakdown
- 📝 Food Log: History of all logged foods
- 📱 Responsive Design: Works seamlessly on desktop and mobile
- 💾 Local Storage: Data persists between sessions
- 🎨 Clean UI: Simple, user-friendly interface
- Frontend: HTML5, CSS3, JavaScript (ES6+)
- Styling: CSS3 with modern layouts
- Storage: Firebase
- Deployment: Netlify
- Version Control: Git & GitHub
- Add Food: Enter food name and macronutrient values (carbs, protein, fat)
- Auto-Calculate: App automatically calculates calories using standard macro-to-calorie conversions:
- Carbohydrates: 4 calories per gram
- Protein: 4 calories per gram
- Fat: 9 calories per gram
- Track Progress: View total calories and food log
- Persistent Data: Your entries are saved in a firebase cloud storage
- Simplicity: Clean, uncluttered interface focusing on core functionality
- Accessibility: Proper form labels and semantic HTML
- Mobile-First: Responsive design that works on all devices
- Performance: Lightweight with fast loading times
This project is licensed under the MIT License - see the LICENSE file for details.
- Nutrition data calculations based on standard USDA values
- UI inspiration from modern nutrition apps
- Icons from open source icon libraries