JSFiddle - React, Tailwind, and code Playground

HTML

<button id="precise-location-prompt">Click</button>
<div id="current-temperature"></div>

JavaScript

function getCurrentWeather(coordinates) {
  return new Promise(function(resolve, reject) {
    new Request.JSON({
      url: '/echo/json/',
      data: {
        json: JSON.encode({ temperature: 'Too hot!' }),
        delay: 1
      },
      onSuccess: function(response) {
        resolve(response);
      }
    }).send();
  });
}

function showCurrentWeather(data) {
  var temp = document.getElementById('current-temperature');
  temp.textContent = data.temperature;
}

function getPreciseLocation() {
  var geo = navigator.geolocation;
  return new Promise(function(resolve, reject) {
    geo.getCurrentPosition(function(position) {
      resolve([position.coords.latitude, position.coords.longitude]);
    });
  });
}

function getWeatherWrapper() {
  getPreciseLocation()
    .then(getCurrentWeather)
    .then(showCurrentWeather);
}

var prompt = document.getElementById('precise-location-prompt');
prompt.addEventListener('click', getWeatherWrapper);