Mapty App

A nice map application where you can add your workouts.

Table of contents

• Overview
  • The app
  • Screenshot
  • Built with
  • What I learned
  • Additional Feature Ideas
  • Useful resources
• Author

Overview

The app

Users should be able to:

• View the optimal layout depending on their device's screen size
• See their current location at first
• By clicking on the map open a new workout form
• Choose the workout type
• Create list of workouts by filling values
• Create a nice marker on the map
• Move to map position by the clicking forms
• Access the same data when they refresh the page.

You can check the flow chart

Screenshot

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• JavaScript
• Geolocation API

What I learned

I learned using Geolocation API, Leaflet an open-source JavaScript library for mobile-friendly interactive maps for the marker exct and using the local storage API workout data persist across multiple page reloads.

Additional Feature Ideas

• Ability to edit a workout
• Ability to delete a workout
• Ability to delete all workouts
• Ability to sort workouts by a certain field

Useful resources

• Leaflet Site - This helped me for create nice popups and markers by looking at the options..

Author

• Website - Damla Kara