FitnessMapApp is a workout tracking app that allows users to log and visualize their running or cycling sessions directly on an interactive map. The app uses the browser's Geolocation API and saves workout data in the local storage, so all entries remain available after page reload.
- Track and log workouts by clicking directly on the map
- Choose between Running or Cycling
- Enter distance, duration, and other relevant data
- Automatically calculate:
- Pace and cadence (for running)
- Speed and elevation gain (for cycling)
- Visual display of each workout as a marker on the map
- Smooth animation that zooms into a workout marker when its entry is clicked in the list
- All workouts are saved in Local Storage
- Reset functionality to clear all workouts
- Responsive, clean UI
- JavaScript (logic and interactivity)
- HTML (structure)
- CSS (styling and animations)
- Geolocation API
- Object-Oriented Programming (OOP) with Classes
- LocalStorage
- Deepened understanding of
classsyntax, constructors, inheritance - Form validation with multiple input fields
- Error handling when users enter incorrect values
- Working with the Geolocation API and rendering coordinates dynamically
- DOM manipulation and interactive UI feedback
- Smooth transitions and marker animations
- Understanding and validating user input across multiple fields
- Debugging rendering issues with training entries
- Organizing code when multiple methods were interacting
- Figuring out how to reset and reload localStorage data
- Implementing dynamic map interactions
✔️ Completed
🌍 Interface fully translated to English
📦 Ready for GitHub Pages deployment