I have been working on a simplistic weather application that utilizes the openweathermap.com API. I have an ajax call to make an HTTP request to get a JSON object that contains the data which is returned in the success callback from the HTTP request. I use JQuery to display the response object's data. All of which reside in a function that takes the browser's geolocation coordinates and structures the HTTP request with those parameters. I also have a setInterval function to make a new HTTP request to keep the data up-to-date - for accurate reporting. I feel that there is a better way to keep the data current a little better than how I am doing it. You can view the project on my GitHub page.HTML:<!DOCTYPE html><html><head>  <meta charset=UTF-8>  <title>Weather App</title>  <meta name=viewport content=width=device-width, initial-scale=1>  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>  <link rel=stylesheet href=css/weather.css></head><body>  <div class=container-fluid all>    <div class=jumbotron>      <h1 class=text-center>Weather App</h1>    </div>    <div class=row well>      <div class=col-md-12  id=city>        <h2 class=text-center>Weather for</h2>        <h2 class=text-center data-item id=city-text></h2>      </div>      <div class=row>        <div class=col-md-4  id=weather>          <img src= id=weatherImg class=center-block>          <h3 class=text-center data-item id=weather-text></h3>        </div>        <div class=col-md-4  id=temp>          <h3 class=text-center>Temperature</h3>          <h3 class=text-center data-item id=temp-text></h3>          <div class=checkbox text-center>            <label><input type=checkbox id=tempMode value=2>          C&deg        </label>          </div>        </div>        <div class=col-md-4  id=wind>          <h3 class=text-center>Wind Speed</h3>          <h3 class=text-center data-item id=wind-text></h3>        </div>      </div>    </div>    <div class=footer>      <div class=container>        <p class=copyright>Copyright  Brandon Gottschling 2016. All Rights Reserved. Made with <a href=http://www.openweathermap.org>openweathermap</a>.</p>      </div>    </div>  </div>  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>  <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>  <script src=js/weather.js></script></body></html>CSS:body{  background-color: #393276;}.data-item{  color: #444;}.jumbotron, .well{  background: #888;  color: white;}.copyright{  color: #222;}JavaScript:var tempMode = 1;function getWeather(lat, lon) {  var apiURI = http://api.openweathermap.org/data/2.5/weather?lat= + lat + &lon= + lon + &appid=06170c100199dbae1e223cc3dfad960b;  $.ajax({    url: apiURI,    dataType: json,    type: GET,    async: false,    success: function(resp) {      $(#tempMode).on(click, function() {        if (this.checked) {          $(#temp-text).html(cels.toFixed(1) +  C&deg);          console.log(checked);        } else          $(#temp-text).html(fahr.toFixed(0) +  F&deg);      });      console.log(apiURI);      console.log(resp.name);      if (resp.name) {        $(#city-text).html(resp.name + ,  + resp.sys.country);      }      if (resp.wind) {        var knots = resp.wind.speed * 1.9438445;        $(#wind-text).html(knots.toFixed(1) +  Knots);      }      if (resp.main.temp) {        var fahr = (resp.main.temp * 9 / 5) - 459.67;        var cels = (resp.main.temp - 273.15);        if (cels > 24){           $(#temp-text).css(color, red);        } else if (cels < 18){          $(#temp-text).css(color, blue);        }        $(#temp-text).html((tempMode === 1 ? fahr.toFixed(0) +  F&deg : cels.toFixed(0) +  C&deg));      }      if (resp.weather) {        var imgURL = http://openweathermap.org/img/w/ + resp.weather[0].icon + .png;        console.log(imgURL)        $(#weatherImg).attr(src, imgURL);        $(#weather-text).html(resp.weather[0].description);      }       },    error: function(resp) {       alert(Error:  + e);       clearInterval(updateinter);    }  });}function getLocation() {  if (geolocation in navigator) {    navigator.geolocation.getCurrentPosition(function(position) {      getWeather(position.coords.latitude, position.coords.longitude);    })  } else {    alert(geolocation not available + e);    clearInterval(updateinter);  }}var i = 0;var updateinter = setInterval(function(){  console.log(iteration#  + i++);  if (geolocation in navigator) {    navigator.geolocation.getCurrentPosition(function(position) {      getWeather(position.coords.latitude, position.coords.longitude);    })  } else {    alert(geolocation not available + e);  }}, 300000);getLocation();
Weather app using the openweathermap.com API
javascript;jquery;css;html5;api