Skip to content

Made an awesome project using advanced Vanilla.js, OOPs and external libraries

Notifications You must be signed in to change notification settings

kaffan/Mapty-App

Repository files navigation

Mapty-App

Log and save your workout sessions on different locations surrounding your actual location.

Working

  1. User access the web app through this link: https://kaffan.github.io/Mapty-App/
  2. The site will ask the user to grant permission to access it's location.
  3. when the user grants the permission, then it's current location is pointed on the map on right pane.
  4. When user clicks on any point on the map, then a form appears on the left pane, where the user can give information of the workout session done on that location.
  5. When user press 'Enter' his/her information of that particular workout session gets logged in right pane.
  6. When user closes the web app or reloads the page all his workout session information is saved in localstorage.
  7. if user clicks on clear All, all of user's information of workout sessions are deleted from localstorage and user can once again use the web app to log his/her workout session.

Tech Used

  1. Advanced vanilla.js & ES6 features
  2. leaflet.js
  3. Geolocation API
  4. LocalStorage

My Approach

This project is a part of jonas schmedtmann's Javascript course. I made the entire working of this app through javascript from scratch. Jonas's has applied OOPs concepts to entire web app, whereas I have made this app using functions majorly and a single class. Open for any improvements and changes that is possible in my approach and code.