Diet App (Work in Progress)

Overview

The Diet App is a responsive web application designed to help users track their fitness progress, including weight, body composition, and BMI. The app provides a user-friendly interface that displays the user's goals, progress, and body composition metrics through interactive charts and data visualizations. This project is a demonstration of front-end development skills, including HTML, CSS, JavaScript, and chart integration.

Features

• User Progress Tracking: Displays user’s current weight, target weight, and weight to go.
• Body Composition Overview: Shows key metrics such as body fat percentage, BMI, and lean body mass.
• Interactive Charts: Visual representations of weight progress and body composition.
• Responsive Design: Adapts to different screen sizes for an optimal user experience.

Technologies Used

• HTML5: For the structure of the web pages.
• CSS3: For styling the app, including layouts, colors, and responsiveness.
• JavaScript (ES6+): For dynamic content, including chart generation and user interactions.
• Chart.js: For creating responsive and interactive charts.
• Git: Version control to manage the development of the project.
• GitHub: Hosting the project repository and showcasing the codebase.

Project Structure

DietApp/
│
├── css/
│   ├── style.css           # General styling for the app
│   └── style_progress.css  # Specific styling for the progress page
│
├── images/
│   └── logo.png            # Logo image used in the app
│
├── js/
│   ├── script.js           # General JavaScript for the app
│   └── progress.js         # JavaScript for handling the charts on the progress page
│
├── index.html              # Homepage of the Diet App
├── progress.html           # Page displaying user's progress and body composition
├── calorie_tracker.html    # Placeholder for Calorie Tracker page
├── meal_planner.html       # Placeholder for Meal Planner page
├── about.html              # About page with app information
└── README.md               # Project documentation

Installation and Setup

1. Clone the Repository:

   git clone https://github.com/MohSensei/diet-app.git

2. Navigate to the Project Directory:

   cd DietApp

3. Open the Project: Open the index.html file in your preferred web browser to view the app.

Usage

• Home Page: Navigate to different sections of the app, such as Progress, Calorie Tracker, and Meal Planner.
• Progress Page: Track your weight, body composition, and view progress through interactive charts.
• Additional Pages: The Calorie Tracker and Meal Planner are placeholders and will be implemented in future updates.

Future Enhancements

• Calorie Tracker: A feature to track daily calorie intake and monitor dietary habits.
• Meal Planner: A feature to plan and organize meals for better diet management.
• User Authentication: Secure login and registration for personalized progress tracking.
• Backend Integration: Storing and retrieving user data from a server using a backend framework.