🔥 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

---

📌 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

   git clone https://github.com/ummamali/tracalorie
   cd tracalorie
   

---

📌 Repository

You can find the Webpack version of the project here:
Tracalorie Webpack Version

🚀 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.