SweatMap is a web app that helps users log their exercise sessions on the map using the geolocation API for location (or not) - the user decides.
- Log exercise sessions on the map for different activities, including running, cycling, and hiking using your geolocation.
- View a list of logged exercise sessions with details such as distance, duration, and speed.
- Save and persist your sess
- HTML5
- CSS3
- JavaScript (Object-oriented programming)
- Leaflet.js (for displaying the map)
To run Sweatmap on your machine, follow these steps:
- Clone the repository:
$ git clone https://github.com/hayveno/sweatmap.git
- Open the
SweatMap
directory
$ cd SweatMap
-
Go to
index.html
. -
Open the game locally with Live Server, Http-server or any other alternative to start the game in the home port
http://127.0.0.1:5500/
.
A. Geolocation and Mapping: SweatMap uses the Geolocation API alongside the OpenStreetMap library to allow users to log exercise sessions on a map, showcasing my ability to work with location-based web technologies and integrate third-party APIs.
B. Local Storage: SweatMap uses local storage to save exercise data on the user's device, allowing them to access their workout history offline and providing a seamless user experience.
C. Responsive Design: I'd say I put in the most work here. SweatMap is designed to be responsive and work on a variety of devices, including desktop, mobile, and tablet. This showcases the ability to create visually appealing, responsive layouts using modern UI techniques. I part of web-dev I really love.
D. Object-Oriented Programming: Utilized OOP and classes in the development of SweatMap, showcasing skills in software design and development.
Using SweatMap is simple and intuitive. To log an exercise session, follow these steps:
- Click on the map to add a marker at the location of your exercise session
- Choose an activity type from the dropdown menu
- Enter the distance, duration, and other details of your exercise session
- Click the "Log Workout" button to save your exercise data and display it on the map
SweatMap provides exercise statistics, including distance, duration, elevation, depression, and speed, to help you track your progress and achieve your fitness goals. It's an adoption of Jonas Schmedtmann's JS course challenge that I had concluded, then improved, as at the time I took the course. Kudos to him!
You can operate SweatMap on desktop, tablet or mobile, using the website link in the About section at the top of this page. Thank you, and don't forget to leave a star too 🙂 🌟
Disclaimer: SweatMap does not collect or store Geolocation data as apparent in the code.