JSFiddle - React, Tailwind, and code Playground

by rdazvd

HTML

<div id="error"></div>
<div id="location"></div>
<div id="description"></div>
<div id="temperature"></div>

JavaScript

var error = document.getElementById('error');
var location = document.getElementById('location');
var description = document.getElementById('description');
var temperature = document.getElementById('temperature');

function getWeather() {
  var fetchData = function(posit) {
    var latitude = posit.coords.latitude;
    var longitude = posit.coords.longitude;
    console.log(latitude, longitude);
    var url = 'https://api.apixu.com/v1/current.json?key=0876c8a00b9844dcb5a202950170301&q='+latitude+','+longitude;
    console.log(url);

    var request = new Request(url);

    fetch(request).then(function(request) {
      return request.json();
    }).then(function(json) {
      location.innerHTML = json.location.region;
      description.innerHTML = json.current.text;
      temperature.innerHTML = json.current.temp_c;
    });
  };

  var errorMsg = function() {
    error.innerHTML = 'Your current browser does not support geolocation.';
  };

  var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
  };

  navigator.geolocation.getCurrentPosition(fetchData, errorMsg, options);
  };

  getWeather();