Fitness Tracker Application

The Fitness Tracker Application is a user-friendly web application designed to help users monitor their fitness goals. It provides interfaces for user login, progress tracking, and workout management. The application is built with a responsive design to ensure compatibility across various devices, making it accessible anytime, anywhere.

Features:

Login and Registration Interface:

Allows users to securely log in using their email and password.

Ensures user data protection and smooth authentication.

Dashboard:

Displays key fitness statistics, including:

Steps taken.

Calories burned.

Workouts completed.

Provides a summary of the user's daily fitness activities.

Workout Tracking Interface:

Allows users to log details of their workouts, such as:

Exercise type.

Duration of the workout.

Updates the fitness statistics dynamically.

Responsive Design:

Optimized for various screen sizes, including desktops, tablets, and mobile devices.

Real-Time Updates:

Automatically updates fitness progress after each workout.

Provides instant feedback to the user.

Technologies Used:

Front-End:

HTML: For the structure of the application.

CSS: For styling and responsive design.

JavaScript: For dynamic updates and user interactions.

Back-End:

No back-end integration for this prototype. It focuses on front-end interactions.

Project Workflow:

Design Phase:

Created wireframes for the application using tools like Adobe XD.

Selected color schemes and typography for a clean, user-friendly interface.

Development Phase:

Built the HTML structure for three main interfaces:

Login Screen.

Dashboard.

Workout Tracking Screen.

Applied CSS styles for responsive design.

Integrated JavaScript for dynamic updates and user interaction.

Testing Phase:

Verified the responsiveness across multiple devices.

Tested the JavaScript logic to ensure proper updates to the fitness statistics.

How the Application Works:

User Flow:

The user begins on the Login Screen, where they enter their credentials.

After logging in, they are redirected to the Dashboard, which displays their fitness progress.

Users can navigate to the Workout Tracking Interface to log a new workout.

After logging a workout, the application updates the statistics in real-time and returns the user to the Dashboard.

Dynamic Updates:

The Start New Workout button on the Dashboard navigates to the Workout Tracking Interface.

Upon submission of a workout, the user's steps, calories, and completed workouts are updated dynamically.

Responsive Design:

The application adapts to different screen sizes, ensuring a seamless user experience on both desktop and mobile devices.

Deliverables:

Source Files:

index.html: Contains the structure of the application.

styles.css: Includes the styling and responsive design rules.

script.js: Contains the JavaScript logic for interactivity.

Documentation:

A step-by-step guide explaining how to use the application and customize it.

Screenshots:

Login Screen.

Dashboard with updated statistics.

Workout Tracking Screen.

How the Project Was Submitted:

Compressed all files (index.html, styles.css, script.js, and images folder) into a ZIP archive.

Named the archive as per submission requirements (e.g., student_number_fitness_tracker.zip).

Included a README file with instructions on how to run the project locally.