Day21 of #100DaysOfCode

#CodeTogether Day 21/100

Hii folks 🙌

Today I have completed the 21st video of JavaScript30!

Project 21: Geolocation based Speedometer and Compass

Source: https://javascript30.com

Learnings:

Today’s task is to build a Geolocation based Speedometer and Compass.

We got the compass logo from an SVG, we’ll be applying a transform on it based on the data from the Position object.

Getting the HTML elements -

const arrow = document.querySelector('.arrow');
const speed = document.querySelector('.speed-value');

We use watchPosition to get the data. If the position data changes (either by device movement or if more accurate geo-information arrives), we can set up a callback function that is called with that updated position information. This is done using the watchPosition() function. The callback function is called multiple times, allowing the browser to either update your location as we move or provide a more accurate location as different techniques are used to geolocate us. The error callback function, which is optional, can be called repeatedly.

navigator.geolocation.watchPosition((data) => {
      console.log(data);
      speed.textContent = data.coords.speed;
      arrow.style.transform = `rotate(${data.coords.heading}deg)`;
    }, (err) => {
      console.error(err);
    });

Manipulating the DOM elements with the position data -

// inside watchPosition
speed.textContent = data.coords.speed;
arrow.style.transform = `rotate(${data.coords.heading}deg)`;

Today I Learned (T-I-L):

• Creating own Speedometer and Compass
• Modifying the image arrow as per coordinates! 🙌

That is all for Day21 ✅

Thanks for reading, See you tomorrow!