Continuing New Workout Method

Used Helper Functions for Data Validation in new workout objects, defined new global variables or higher hierarchy local scoped variables for reference, and separated rendering code for workout markers to its own functions.

Working on ensuring custom styles load correctly for markers and that added workouts successfully render to a list and hide the workout input fields when added.

Author: KDA-Coding

15-Mapty/starter/script.js

@@ -3,16 +3,10 @@
 // prettier-ignore
 const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 
-const form = document.querySelector('.form');
-const containerWorkouts = document.querySelector('.workouts');
-const inputType = document.querySelector('.form__input--type');
-const inputDistance = document.querySelector('.form__input--distance');
-const inputDuration = document.querySelector('.form__input--duration');
-const inputCadence = document.querySelector('.form__input--cadence');
-const inputElevation = document.querySelector('.form__input--elevation');
-
+//Global variables
 let map, mapEvent;
 
+//Main Object Class for Workouts
 class Workout{
     date = new Date();
     id = (Date.now() + '').slice(-10);
@@ -24,7 +18,11 @@ class Workout{
     }
 }
 
+//Derived Class Running that uses Workout
 class Running extends Workout{
+
+    type = 'running';
+
     constructor(coords, distance, duration, cadence) {
         super(coords, distance, duration);
         this.cadence = cadence;
@@ -39,7 +37,11 @@ class Running extends Workout{
 
 }
 
+//Derived Class Cycling that uses Workout
 class Cycling extends Workout{
+
+    type = 'cycling';
+
     constructor(coords, distance, duration, elevationGain) {
         super(coords, distance, duration);
         this.elevationGain = elevationGain;
@@ -60,9 +62,19 @@ console.log(run1, cycling1) */
 
 //////////////////////////////////////////////
 //APPLICATION ARCHITECTURE
+const form = document.querySelector('.form');
+const containerWorkouts = document.querySelector('.workouts');
+const inputType = document.querySelector('.form__input--type');
+const inputDistance = document.querySelector('.form__input--distance');
+const inputDuration = document.querySelector('.form__input--duration');
+const inputCadence = document.querySelector('.form__input--cadence');
+const inputElevation = document.querySelector('.form__input--elevation');
+
 class App {
     #map;
     #mapEvent;
+    #workouts = [];
+
     constructor() {
         this._getPosition();
         form.addEventListener('submit', this._newWorkout.bind(this));
@@ -103,22 +115,64 @@ class App {
     }
 
     _newWorkout(e) {
+        const validInputs = (...inputs) => 
+        inputs.every(inp => Number.isFinite(inp));
+
+        const allPositive = (...inputs) => inputs.every(inp => inp > 0);
+
         e.preventDefault();
-        console.log(this)
-            //Clear input fields
-            inputDistance.value = inputDuration.value = inputCadence.value = inputElevation.value = '';
-        
-            //Display the Marker
-                const {lat, lng} = this.#mapEvent.latlng;
+
+        // Get data from the form
+        const type = inputType.value;
+        const distance = +inputDistance.value;
+        const duration = +inputDuration.value;
+        const { lat, lng } = this.#mapEvent.latlng;
+        let workout;
 
-                L.marker([lat, lng])
+        // If workout is running, create running
+        if(type === 'running') {
+            const cadence = +inputCadence.value;
+            //Check if data is valid
+            if (!validInputs(distance, duration, cadence) || 
+                !allPositive(distance, duration, cadence) )
+                return alert('Inputs have to be positive numbers!')
+            
+            workout = new Running([lat, lng], distance, duration, cadence);
+        }
+
+        // If workout is cycling, create cycling
+        if(type === 'cycling') {
+            const elevation = +inputElevation.value;
+            //Check if data is valid
+            if (!validInputs(distance, duration, elevation) ||
+                !allPositive(distance, duration))
+                return alert('Inputs have to be positive numbers!')
+
+            workout = new Cycling([lat, lng], distance, duration, elevation);
+        }
+
+        // Add new object to workout array
+        this.#workouts.push(workout);
+        //console.log(workout);
+
+        // Render workout on map as marker
+        this._renderWorkoutMarker(workout)
+
+        // Render workout on list
+    
+        //Hide form & Clear input fields
+        inputDistance.value = inputDuration.value = inputCadence.value = inputElevation.value = '';
+    }
+
+    _renderWorkoutMarker(workout) {
+        L.marker(workout.coords)
                 .addTo(this.#map)
                 .bindPopup( L.popup({
                         maxWidth: 250,
                         minWidth: 100,
                         autoClose: false,
                         closeOnClick: false,
-                        className: 'running-popup'}) ).setPopupContent('Workout').openPopup();
+                        className: `${workout.type}-popup`}) ).setPopupContent(workout.distance).openPopup();
     }
 }