https://github.com/ummamali/tracalorie
Tracalorie is a web application that helps users keep track of their daily calorie intake and expenditure. Users can set a calorie goal for the day, add calories consumed from food, and subtract calories burned through workouts. The app provides a clean and simple interface to monitor and manage daily calorie balance effectively.
https://github.com/ummamali/tracalorie
css3 documentobjectmodel html5 javascript objectorientedprogramming singlepageapplication state-management tailwindcss vanilla-javascript
Last synced: about 2 months ago
JSON representation
Tracalorie is a web application that helps users keep track of their daily calorie intake and expenditure. Users can set a calorie goal for the day, add calories consumed from food, and subtract calories burned through workouts. The app provides a clean and simple interface to monitor and manage daily calorie balance effectively.
- Host: GitHub
- URL: https://github.com/ummamali/tracalorie
- Owner: Ummamali
- Created: 2024-11-03T13:11:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-17T07:26:38.000Z (over 1 year ago)
- Last Synced: 2025-10-08T12:48:46.328Z (8 months ago)
- Topics: css3, documentobjectmodel, html5, javascript, objectorientedprogramming, singlepageapplication, state-management, tailwindcss, vanilla-javascript
- Language: JavaScript
- Homepage: http://tracaloriewp.vercel.app
- Size: 242 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🔥 Tracalorie (Javascript Version)
**Tracalorie** is a web application that helps users keep track of their daily calorie intake and expenditure. Users can set a calorie goal for the day, add calories consumed from food, and subtract calories burned through workouts. The app provides a clean and simple interface to monitor and manage daily calorie balance effectively.
Deployed Version: [Tracalorie](https://tracaloriewp.vercel.app)
---
## 📌 Project Overview
### **Type of Project**
A calorie-tracking web application designed to manage food intake and workouts for maintaining a healthy lifestyle.
### **Methodology**
This project is developed using **Object-Oriented Programming (OOP)** principles in JavaScript to ensure modularity, reusability, and scalability.
---
## 🔧 Technologies Used
- **HTML**: Provides the structure for the web application.
- **TailwindCSS**: Utility-first CSS framework for responsive and modern styling.
- **Vanilla CSS**: Custom styles for enhanced UI/UX design.
- **JavaScript**: Implements dynamic functionalities and OOP methodology.
- **Local Storage**: Saves data persistently in the browser for easy retrieval across sessions.
---
## 🚀 Features
- **Set Daily Calorie Goal**: Define a target calorie limit for the day.
- **Add Calories**: Log calories consumed from food items.
- **Subtract Calories**: Track calories burned through workouts.
- **Calorie Balance**: Display remaining calories for the day based on consumption and expenditure.
- **Local Storage Integration**: Save calorie data persistently to resume tracking without data loss.
---
## 🛠️ Running the Project
1. **Clone the Repository**
```bash
git clone https://github.com/ummamali/tracalorie
cd tracalorie
---
### 📌 Repository
You can find the Webpack version of the project here:
[Tracalorie Webpack Version](https://github.com/ummamali/tracaloriewp)
### 🚀 Key Differences in the Webpack Version
1. **Module Bundling with Webpack**
- Combines JavaScript, CSS, and other assets into optimized bundles.
- Reduces file size and ensures better performance.
2. **Modern JavaScript Support**
- Includes **Babel** for compiling ES6+ JavaScript into browser-compatible code.
3. **Development Server**
- A built-in dev server with live reloading for a smoother development experience.
4. **Production-Ready Build**
- Generates minified and optimized assets for deployment.