Code Monkey home page Code Monkey logo

mapty's Introduction

Mapty

The goal of this application is to log the location, duration and distance information for running and cycling workouts with popup pins on the map.

Project Description

This application helps users to log their workout records on the map.

The application automatically obtains the user's current location coordinates using a geolocation api when the user first loads the application and displays the location in the right view. When the user clicks the workout location on the map, an input form appears on the left side. When the form is filled out and the user presses 'enter', we can see the popup pin on the map with the workout information. The application uses local storage to persist the previous records even when the user reloads the app.

What I've learned

  • object oriented programming
  • geolocation api
  • 3rd party library (leaflet)
  • local storage

Live demo link

https://mapty-hyeyoung.netlify.app/

Logic flowchart

App Screenshot

How to Install and Run the Project

  1. Clone the project
  git clone https://github.com/hykim-soulis/Mapty.git
  1. Go to the project directory
  cd my-project
  1. Double-click the index.html file

Resource

This project is a css and javascript project done with the Udemy course: The Complete JavaScript Course 2022 by instructor Jonas Schmedtmann. HTML and part of CSS files were provided by the instructor.

The below link is the instructor's github address.

Instructor's GitHub

mapty's People

Contributors

hykim-soulis avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.