/Traecalorie-App

Primary LanguageSCSS

Tracalorie App

Tracalorie App is a web application designed to help users track their daily caloric intake. It allows users to add meals and workouts, set daily calorie limits, and view their caloric consumption and expenditure in a user-friendly interface. The app uses OOP principles, SCSS for styling, Bootstrap for responsive design, and localStorage to persist data.

Features

  • Add Meals and Workouts: Users can add meals and workouts with their respective calorie values.
  • Daily Calorie Limit: Set and update a daily calorie limit.
  • Track Calories: View total calories consumed, burned, and remaining.
  • Progress Bar: Visual representation of caloric intake against the set limit.
  • Persistent Storage: All data is stored in the browser's localStorage.
  • Responsive Design: Uses Bootstrap to ensure the app works on various devices.

Technologies Used

  • JavaScript (ES6+): The application logic is implemented using modern JavaScript features and Object-Oriented Programming (OOP) concepts.
  • SCSS: SCSS is used for styling, offering nested rules, variables, and mixins for maintainable and scalable CSS.
  • Bootstrap: Bootstrap is utilized for responsive design and pre-built components.
  • Font Awesome: Icons from Font Awesome are used for visual enhancement.
  • Google Fonts: The Roboto font is imported from Google Fonts for a clean and modern look.
  • localStorage: Browser's localStorage is used to store user data persistently.

UI

Traecalorie_app_ui

Demo Video

Traecalorie_workig_recording.mp4

Installation

To run this project locally:

  1. Clone the repository:

    git clone https://github.com/Monik2002/Tracalorie-App.git

  2. Navigate to the project directory:

    cd Tracalorie-App

  3. Open index.html in your preferred web browser.

Usage

  1. Set Daily Limit: Click on the "Set Daily Limit" button, enter your desired daily calorie limit, and save.
  2. Add Meal: Click on the "Add Meal" button, enter the meal name and calorie value, and add the meal.
  3. Add Workout: Click on the "Add Workout" button, enter the workout name and calorie value, and add the workout.
  4. View Stats: Check the dashboard for an overview of your caloric intake and expenditure.
  5. Reset Day: Click the "Reset Day" button to clear all data for the day.

File Structure

  • index.html: The main HTML file containing the structure of the app.
  • css/: Directory containing CSS files.
    • bootstrap.css: Bootstrap CSS file.
    • fontawesome.css: Font Awesome CSS file.
    • style.css: Custom styles.
  • js/: Directory containing JavaScript files.
    • bootstrap.bundle.min.js: Bootstrap JS file.
    • app.js: Main JavaScript file with app logic.
  • scss/: Directory containing SCSS files.
    • style.scss: Custom SCSS file.
  • images/: Directory containing images and icons.

Code Overview

JavaScript (app.js)

  • Classes:

    • CalorieTracker: Manages calorie tracking, including adding/removing meals and workouts, and updating the display.
    • Meal: Represents a meal with a name and calorie value.
    • Workout: Represents a workout with a name and calorie value.
    • Storage: Handles interactions with localStorage, such as saving and retrieving data.
    • App: Initializes the app, loads event listeners, and manages user interactions.

  • Key Methods:

    • addMeal(meal): Adds a meal and updates the total calories.
    • addWorkout(workout): Adds a workout and updates the total calories.
    • removeMeal(itemId): Removes a meal and updates the total calories.
    • removeWorkout(itemId): Removes a workout and updates the total calories.
    • reset(): Resets the daily data.
    • setLimit(calorieLimit): Sets the daily calorie limit.
    • loadItems(): Loads meals and workouts from localStorage.
    • _displayCaloriesTotal(): Displays total calories.
    • _displayCalorieLimit(): Displays the calorie limit.
    • _displayCaloriesConsumed(): Displays calories consumed.
    • _displayCaloriesBurned(): Displays calories burned.
    • _displayCaloriesRemaining(): Displays remaining calories.
    • _displayCaloriesProgess(): Updates the progress bar.
    • _displayNewMeal(meal): Displays a new meal item.
    • _displayNewWorkout(workout): Displays a new workout item.
    • _render(): Renders all data on the UI.

SCSS (style.scss)

  • Variables: Define common values like colors and fonts.
  • Mixins: Create reusable styles.
  • Nested Rules: Structure the CSS in a hierarchical manner for better readability and maintainability.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Acknowledgements

Feel free to contribute to the project by submitting a pull request or opening an issue. Enjoy tracking your calories with Tracalorie App!