Project shows: A design flowchart and an architecture diagram are developed before coding begins. The ‘use strict‘ line is introduced. With strict mode, you can not, for example, use undeclared variables. Class objects are used with the constructor(), extends and super() methods.

– class Workout { … constructor(coords, distance, duration) { … } }
– class Running extends Workout { … constructor(coords, distance, duration, cadence) { super(coords, distance, duration) … }

The App() class is introduced as the parent function for the entire DOM. The App specifies private variables using the # prefix. The App also takes ownership of certain event listeners that are attached to different types of events. The browsers local storage is accessed for the first time.

– class App { #map …
   constructor() {
    // Get user’s position
    this._getPosition();
    // Get data from local storage
    this._getLocalStorage();
    // Attach event handlers
    form.addEventListener(‘submit’, this._newWorkout.bind(this))
    inputType.addEventListener(‘change’, this._toggleElevationField)
    containerWorkouts.addEventListener(‘click’, this._moveToPopup.bind(this)) … }

A html form element is used to enter data.

An external API is used to render a map element and the web navigator interface is used to map positions. The Navigator.geolocation read-only property returns a Geolocation object that gives Web content access to the location of the device.

– _getPosition() { … navigator.geolocation.getCurrentPosition(this._loadMap.bind(this), … } ) }
– loadMap(position) { 
    const { latitude } = position.coords;
    const { longitude } = position.coords;
    const coords = [latitude, longitude];
    this.#map = L.map(‘map’).setView(coords, this.#mapZoomLevel);
     L.tileLayer(‘https://tile.openstreetmap.org/{z}/{x}/{y}.png’, { attribution:
        ‘&copy; <a href=”https://www.openstreetmap.org/copyright”>OpenStreetMap</a> contributors’, }).addTo(this.#map);
    // Handling click on map
    this.#map.on(‘click’, this._showForm.bind(this)); …}
– _showForm(mapE) {
    this.#mapEvent = mapE;
    form.classList.remove(‘hidden’);
    inputDistance.focus() } – this sets the mouse cursor focus to the inputDistance DOM element.

Clicking on the map API renders the workout form which allows the user to enter workout data (which is validated). When the user hits the enter key a new workout is created and added to the list of App #workouts.

_newWorkout(e) {
    const validInputs = (…inputs) => inputs.every(inp => Number.isFinite(inp));
     …
    const allPositive = (…inputs) => inputs.every(inp => inp > 0);
     …
      // Check if data is valid
      if (!validInputs(distance, duration, cadence) ||!allPositive(distance, duration, cadence))
        return alert(‘Inputs must be positive numbers!’);
      workout = new …([lat, lng], distance, duration, cadence);
     …
    this.#workouts.push(workout)
     …
    // Set local storage to all workouts
    this._setLocalStorage() }

The final part is setting/getting the #workouts from the browsers local storage:
_setLocalStorage() {
    localStorage.setItem(‘workouts‘, JSON.stringify(this.#workouts));
  }

  _getLocalStorage() {
    const data = JSON.parse(localStorage.getItem(‘workouts‘));
    if (!data) return;
    this.#workouts = data;
    this.#workouts.forEach(work => { this._renderWorkout(work) })
  }