Mapty is a JavaScript web application that helps users track their workout activities such as running and cycling by marking them on a map. Users can log workout details including distance, duration, pace, and speed, and visualize these workouts directly on an interactive map. The app stores data locally, allowing workouts to be persistent across sessions.
- Track workouts with details like distance, duration, pace (for running), speed (for cycling), and elevation gain.
- Mark the exact location of the workout on an interactive map.
- Persistent data storage using localStorage to retain workouts across sessions.
- View workouts in a list and on the map.
- Different forms for running and cycling.
- Ability to click on a workout and move to its location on the map.
You can check out a live version of Mapty at: [Demo Link] (Add your deployed link here).
- HTML5
- CSS3
- JavaScript (ES6)
- Leaflet.js for interactive maps.
- LocalStorage API for data persistence.
To run this project locally, you will need:
- A web browser that supports JavaScript ES6.
- An internet connection to load Leaflet.js maps.
- Clone the repository:
git clone https://github.com/YosefElsersy/Mapty.git
- Navigate into the project directory:
cd Mapty
- Open
index.html
in your browser.
Alternatively, you can use a local server (like Live Server in VS Code) to serve the files.
-
Start a workout:
- Allow the app to access your location.
- Click on the map to specify the location of your workout.
- Fill in the workout form (choose between running or cycling).
- Submit the form to save your workout.
-
View saved workouts:
- Workouts are displayed in the sidebar as a list. You can click on any workout to move the map to its location.
-
Store workout data:
- Your workout data is stored locally in the browser's localStorage, so the next time you load the app, your workouts will still be there.
If you'd like to contribute to this project, you can follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature-branch
). - Make your changes.
- Commit your changes (
git commit -m 'Add new feature'
). - Push to the branch (
git push origin feature-branch
). - Create a pull request.