https://github.com/stephenombuya/calorie-counter

The Calorie Counter is a simple web application that allows users to track their daily calorie intake and calculate remaining calories based on their food consumption and exercise. This tool helps users stay on track with their dietary goals and manage their daily calorie budget.
https://github.com/stephenombuya/calorie-counter

css3 front-end-development html5 javascript responsive-web-design

Last synced: about 1 month ago
JSON representation

The Calorie Counter is a simple web application that allows users to track their daily calorie intake and calculate remaining calories based on their food consumption and exercise. This tool helps users stay on track with their dietary goals and manage their daily calorie budget.

• Host: GitHub
• URL: https://github.com/stephenombuya/calorie-counter
• Owner: stephenombuya
• License: mit
• Created: 2024-10-17T19:17:55.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-10-17T19:34:15.000Z (2 months ago)
• Last Synced: 2024-10-20T05:29:32.576Z (2 months ago)
• Topics: css3, front-end-development, html5, javascript, responsive-web-design
• Language: JavaScript
• Homepage: https://thacaloriecounter.netlify.app/
• Size: 8.79 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# **Calorie Counter**

The Calorie Counter is a simple web application that allows users to track their daily calorie intake and calculate remaining calories based on their food consumption and exercise. This tool helps users stay on track with their dietary goals and manage their daily calorie budget.

## **Demo**

Live Demo - [thacaloriecounter](https://thacaloriecounter.netlify.app/)

## **Features**

* **Calorie Budgeting**: Allows users to set a daily calorie budget.

* **Meal Tracking**: Users can log calories for breakfast, lunch, dinner, and snacks.

* **Exercise Tracking**: Users can input calories burned through exercise.

* **Calorie Calculation**: Automatically calculates remaining calories after food intake and exercise.

* **Clear Functionality**: Allows users to clear the entries and start over.

## **Technologies Used**

* **HTML5**: Structure and layout of the app.

* **CSS3**: Styling and responsiveness.

* **JavaScript**: Logic for tracking entries and calculating remaining calories.

  

## **Project Structure**

* **index.html**: Main structure of the application, containing the form elements and layout.

* **styles.css**: Contains all the styles for the page, including form layout and responsiveness.

* **script.js**: Handles user input, adds food/exercise entries, and calculates remaining calories.

## **How to Use**

- **Set your daily calorie budget**: Enter the number of calories you aim to consume for the day.

- **Add food entries**: Log your meals (breakfast, lunch, dinner, and snacks) by adding their respective calorie counts.

- **Add exercise entries**: Log the calories burned during exercise.

- **Calculate remaining calories**: Once you've entered your data, hit the "Calculate Remaining Calories" button to see how many calories you have left for the day.

- **Clear the form**: Use the "Clear" button to reset all entries.

## **Installation**

To run the Calorie Counter locally:

1. Clone this repository:

```

git clone https://github.com/stephenombuya/Calorie-Counter

```

2. Navigate to the project directory:

```

cd calorie-counter

```

3. Open the index.html file in your browser to start using the app:

```

open index.html

```

## **Code Structure**

- **HTML**: The index.html file contains form elements to input calorie data and track exercise.

- **CSS**: The styles.css file manages the layout and appearance of the app, ensuring it is clean and responsive.

- **JavaScript**: The script.js file provides functionality for adding entries, calculating calories, and updating the display dynamically.

## **Future Enhancements**

1. **Data Persistence**: Store calorie entries in local storage so users can access their data even after refreshing the page.

2. **Calorie Suggestions**: Provide calorie recommendations based on the user's goals (e.g., weight loss, maintenance, or muscle gain).

3. **Food Database**: Allow users to search for and select foods from a pre-existing calorie database.

## **Contributing**

Contributions are welcome! If you would like to contribute or suggest features, please fork the repository and submit a pull request.

## **License**

This project is licensed under the MIT License. See the [LICENSE](https://github.com/stephenombuya/Calorie-Counter/blob/main/LICENSE) file for details.