<form>
  <label for="lat">Latitude: </label>
  <input type="number" id="lat" name="latitude" required>
  <label for="lon">Longitude: </label>
  <input type="number" id="lon" name="longitude" required>
  <input type="submit" id="request" value="Request"></input>
</form>
<div>
  <button id="currPos">Get Current Position</button>
  <div><span id="result"></span></div>
</div>
body {
  margin: 0;
  padding: 15px;
  color: #222;
  font: normal normal normal 1rem/1.6 Nunito Sans, Helvetica, Arial, sans-serif;
}
input {
  display: block;
  margin-bottom: 15px;
  margin-top: 2px;
}
input[type="submit"], button {
  background-color: #3da4ab;
  border: none;
  color: #fff;
  padding: 10px;
  font-size: 1.05rem;
  border-radius: 2px;
  cursor: pointer;
}
button { margin-bottom : 30px;}
input[type="submit"]:hover, button:hover { background-color: #0e9aa7;}
document.addEventListener("DOMContentLoaded", function() {
  let $ = document.querySelector.bind(document);  
  let request = 'https://fcc-weather-api.glitch.me/api/current?lat=21&lon=105';
  var options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  };
  
  $("#request").addEventListener("click", function(){
    event.preventDefault();
    get(request)
    .then(function(data) {
      console.log(data);
      $("#result").textContent = data.toString();
    })
    .catch(function(error) {
      console.log(error);
    });
  });
  
  function get(requestURL) {
    return new Promise(function(resolve, reject){
      let XMLHttpRequest = window.XMLHttpRequest || ActiveXObject("Microsoft.XMLHTTP");
      let req = new XMLHttpRequest();
      req.open("GET", requestURL, true);
      req.addEventListener('load', function() {
        if(req.status == 200) resolve(req.responseText);
        else if(req.status == 404) throw new Error(xmlPath, "404");
      });
      req.addEventListener('error', function(event) {
        reject(event);
      });
      req.send(null);
    });
  }
  
  $("#currPos").addEventListener("click", function() {
    getLocation();
  });
  
  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        console.log(position);
        $("#lat").value = position.coords.latitude;
        $("#lon").value = position.coords.longitude;
      }, function(error) {
        console.log(error);
      }, options);
    } else {
      console.log("Geolocation is not supported by this browser.");
    }
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.