LocalWeather

index.html

<div class="container text-center">
  <br /><h1>Local Weather Application</h1><br />
  <div>
    <div class="row">
    <br /><ul class="list-unstyled">
      <div class="col-xs-3">
        <div>
      <b><li id="city" class="btn btn-default"></li></b><br />
          <p>Location</p>
          </div>
        </div>
      <div class="col-xs-3">
        <div>
      <b><li id="weather" class="btn btn-default"></li></b>
          <p>Weather</p>
          </div>
        </div>
      <div class="col-xs-3">
        <div>
      <b><li id="farTemp" class="btn btn-default"></li></b>
          <p>Temperature</p>
          </div>
        </div>
      <div class="col-xs-3">
        <div>
      <b><li id="windVelocity" class="btn btn-default"></li></b>
          <p>Wind Speed</p>
          </div>
        </div>
    </ul>
  </div>
  </div>
</div>

localweather.markdown

LocalWeather

A Pen by Mohammed Saifuddin on CodePen.

License.

script.js

$(document).ready(function() {
  var lati, long;
  $.getJSON('http://ip-api.com/json', function(location) {
    lati = location.lat;
    long = location.lon;
    $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat='+lati+'&lon='+long+'&appid=0fe37ef7934dff1e583498da7425e456', function(data) {
      var weatherType = data.weather[0].description;
      var kel = data.main.temp;
      var windSpeed = data.wind.speed;
      windSpeed = (2.237 * (windSpeed)).toFixed(2);
      var cityName = data.name;
      var far = (9/5 * (kel - 273) + 32).toFixed(2); //takes two decimals
      var cel = (kel - 273).toFixed(2);
      /*console.log(cel);
      console.log(far);
      console.log(windSpeed);
      console.log(weatherType);
      console.log(cityName);*/
      $("#city").html(cityName);
      $("#weather").html(weatherType);
      $("#farTemp").html(far + " °F");
      //$("#celTemp").html(cel + " °C");
      $("#windVelocity").html(windSpeed + " mph");
      var tempToggle = true;
      $("#farTemp").click(function() {
        if (tempToggle === false) {
          $("#farTemp").html(far + " °F");
          tempToggle = true;
        } else {
          $("#farTemp").html(cel+ " °C");
          tempToggle = false;
        }
      });
      //background image changing conditions
      if (far >= 120) {
        $("body").css("background-image", "url(http://data.freehdw.com/desert-hd-1080p.jpg)");
      } else if (100 <= far && far < 120) {
        $("body").css("background-image", "url(https://s-media-cache-ak0.pinimg.com/originals/ed/18/35/ed183572fbc240db589e31c29f0c962e.jpg)");
      } else if (80 <= far && far < 100) {
        $("body").css("background-image", "url(https://www.centeredrichmondacupuncture.com/wp-content/uploads/2014/09/Spring-Forest.jpg)");
      } else if (60 <= far && far < 80) {
        $("body").css("background-image", "url(http://wallpapercave.com/wp/ap4ZxBG.jpg)");
      } else if (40 <= far && far < 60) {
        $("body").css("background-image", "url(https://secure.static.tumblr.com/f50371ec8d141e20aa8019c737ffaee8/hg7vw9v/epOn32b13/tumblr_static_rainy_day-1920x1200.jpg)")
      } else if (32 <= far && far < 40) {
        $("body").css("background-image", "url(http://xinature.com/wp-content/uploads/2017/01/winter-highlands-lake-mountain-ballachulish-trees-western-scotland-hd-wallpaper-iphone-1366x768.jpg)")
      }
    });
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.css

@import
  url("https://fonts.googleapis.com/css?family=Philosopher");
h1 {
  font-family: 'Philosopher', sans-serif;
  font-size: 60px;
}
li {
  font-family: 'Philosopher', sans-serif; 
}
p {
  font-family: 'Philosopher', sans-serif; 
  font-size: 20px;
}
.btn {
  background-color: Bisque;
}
body {
  background-repeat: no-repeat;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />