Workout Tracker

This is a Vanilla JavaScript Project using Object-oriented programming.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

Screenshot

Links

• DEMO:Link

My process

Built with

• JavaScript (ES6 Classes)

What I learned

• Design as a Responsive web
• Use of Local Storage API
• Geolocation API
• Displaying Google map via Leaflet Library
• Using custom icons for Leaflet instead of just normal points on the map
• Abilities to edit & delete workout and delete all workouts
• Ability to sort workouts by certain fields(distance, time)
• Position the map to show all workouts
• Click on popup, move map to corresponding popup
• Map Zoom and View control
• Markup and styling for new created submenus & realistic error message

Here is a code snippet:

class Running extends Workout {
  type = 'running';

  constructor(coords, distance, duration, city, country, cadence) {
    super(coords, distance, duration, city, country);
    this.cadence = cadence;
    this._calcPace();
    this._setDescription();
  }

  _calcPace() {
    this.pace = this.duration / this.distance;
  }
}

Useful resources

• MDN Docs - This helped me for creating ES6 classes.
• Leaflet - This helped me for showing Google Maps.

Author

• Website - Marvin Morales Pacis
• LinkedIn - @marventures
• Twitter - @marventures11