Skip to content

Effortlessly track your miles and reach your goals quicker with a location-based fitness logger.

Notifications You must be signed in to change notification settings

HAYVENO/SweatMap

Repository files navigation

SweatMap - Track your miles

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.

Memoreels game
Website qeep.vercel.app GitHub license Maintenance Ask Me Anything ! PRs Welcome Latest release

Features

  • 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

Technologies Used

  • HTML5
  • CSS3
  • JavaScript (Object-oriented programming)
  • Leaflet.js (for displaying the map)

Getting Started

To run Sweatmap on your machine, follow these steps:

  1. Clone the repository:
$ git clone https://github.com/hayveno/sweatmap.git
  1. Open the SweatMap directory
$ cd SweatMap
  1. Go to index.html.

  2. 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/.

Skills Showcased

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.

How to Use SweatMap

Using SweatMap is simple and intuitive. To log an exercise session, follow these steps:

  1. Click on the map to add a marker at the location of your exercise session
  2. Choose an activity type from the dropdown menu
  3. Enter the distance, duration, and other details of your exercise session
  4. 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.

made-with-Markdown Ask Me Anything !