JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

CSS

body {
  background: #FFE0AF;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #F7F7F0;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #BAF1BE;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #FFBFBF;
  color: #000;
}

JavaScript

$(document).ready(function() {
  var banner = $("#banner-message");
  var button = $("button");

  // handle click and add class
  button.on("click", () => {
    banner.toggleClass("alt");
  });
});


// Beregn afstand mellem 2 punkter
function distance(lon1, lat1, lon2, lat2) {
  var R = 6371; // Radius of the earth in km
  var dLat = (lat2 - lat1).toRad(); // Javascript functions in radians
  var dLon = (lon2 - lon1).toRad();
  var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
    Math.sin(dLon / 2) * Math.sin(dLon / 2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  var d = R * c; // Distance in km
  return d;
}

/** Converts numeric degrees to radians */
if (typeof(Number.prototype.toRad) === "undefined") {
  Number.prototype.toRad = function() {
    return this * Math.PI / 180;
  }
}

window.navigator.geolocation.getCurrentPosition(function(pos) {
  console.log(pos);
  console.log(
    distance(pos.coords.longitude, pos.coords.latitude, 9.318893232332728, 56.53058705206541)
  );
});

// Check if the browser supports geolocation 
if ("geolocation" in navigator) {

  // Get the user's current position 
  navigator.geolocation.getCurrentPosition(
    function(position) {
      let latitude = position.coords.latitude;
      let longitude = position.coords.longitude;
      let accuracy = position.coords.accuracy;


      document.body.innerHTML += "<div id=\"banner-message\">";
      document.body.innerHTML += "<p>Geolocation test</p>";


      document.body.innerHTML +=
        "<p>Latitude: " + latitude + "</p>";
      document.body.innerHTML +=
        "<p>Longitude: " + longitude + "</p>";
      document.body.innerHTML +=
        "<p>Accuracy indenfor: " + accuracy + " meter</p>";


      const Afstand = distance(longitude, latitude, 9.418893232332728, 56.93058705206541);

      document.body.innerHTML +=
        "<p>Afstand: " + Math.round(Afstand * 1000) + " meter</p>";


     ...