script-practice.js

'use strict';

// 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');

let map, mapEvt;

// render map and map click handler
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    function (position) {
      const { latitude, longitude } = position.coords;
      const coords = [latitude, longitude];
      const myLocation = `https://www.google.com/maps/@${latitude},${longitude}`;
      console.log(myLocation);
      //   id='map'
      map = L.map('map').setView(coords, 13); // 13 => zooming map

      //   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(map);

      map.on('click', function (mapE) {
        mapEvt = mapE;
        form.classList.remove('hidden');
        inputDistance.focus();
      });

      // map handler
      //   map.on('click', function (mapEvt) {
      //     // console.log(mapEvt);
      //     const { lat, lng } = mapEvt.latlng;
      //     const popup = L.popup({
      //       maxWidth: 250,
      //       minWidth: 100,
      //       autoClose: false,
      //       closeOnClick: false,
      //       className: 'running-popup',
      //     });
      //     const popupContent = 'Workout';
      //     L.marker([lat, lng])
      //       .addTo(map)
      //       .bindPopup(popup)
      //       .setPopupContent(popupContent)
      //       .openPopup();
      //   });
    },
    function (err) {
      console.log({ err });
    }
  );
}

// form handler
form.addEventListener('submit', function (e) {
  e.preventDefault();
  //   Clear the inputs
  inputDistance.value = '';
  inputDuration.value = '';
  inputCadence.value = '';
  inputElevation.value = '';
  const { lat, lng } = mapEvt.latlng;
  //   Display marker
  const popup = L.popup({
    maxWidth: 250,
    minWidth: 100,
    autoClose: false,
    closeOnClick: false,
    className: 'running-popup',
  });
  const popupContent = 'Workout';
  L.marker([lat, lng])
    .addTo(map)
    .bindPopup(popup)
    .setPopupContent(popupContent)
    .openPopup();
});

// select type handler
inputType.addEventListener('change', function () {
  inputElevation.closest('.form__row').classList.toggle('form__row--hidden');
  inputCadence.closest('.form__row').classList.toggle('form__row--hidden');
});