Show the Local Weather

35-ый день #100DaysOfCode

http://codepen.io/YaroslavW/full/egKYRa/

HTML

<div class="info">
  <h1 ="title">Local Weather</h1>
  <h2 id="city"></h2>
  <button id="convert" class="btn btn-info">Convert to Celsius</button> 
  <h2 id="temp"></h2>
  <img id="icon"></img>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  text-align: center;
  font-family: 'Lato', sans-serif;
}

.info {
  margin: 5px auto;
 width: 60vw;
 padding: 10px 5px 10px 5px;
 background: linear-gradient(rgba(179, 168, 211, .9), rgba(222, 199, 182, 0.9));
 border-radius: 10px;
}

@media screen and (max-width: 600px) {
  .info {
    width: 100%;
  }
}
#convert{
   border: 1px solid;
   border-radius: 5px;
   padding: .5em 2em;
}

JS

$.getJSON('http://ip-api.com/json', function (position) {
  var lat = position.lat;
  var lon = position.lon;
  console.log('https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&units=imperial&APPID=a391588e176db8c353dcb74504141cf5')
  $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&units=imperial&APPID=a391588e176db8c353dcb74504141cf5', function (data) {
        
    console.log(data);
    var city = data.name;
    var f = Math.round(data.main.temp);
    var c = Math.round((data.main.temp - 32) * 5/9);
    var temp = f;
    var condition = data.weather[0].id;
    $('#city').text(city);
    $('#temp').text(temp  + "\u00B0 F");
    $('#icon').attr('src', 'http://openweathermap.org/img/w/' + data.weather[0].icon + '.png')

     if (condition >= 800 && condition <= 804) {
    $('body').css('background', 'url(https://oboi.ws//wallpapers/27_2145_oboi_solnechnaja_pustynja_2560x2048.jpg)' + 'no-repeat center center fixed');
   }
    if (condition >= 200 && condition <= 531) {
    $('body').css('background', 'url(http://hq-oboi.ru/photo/solnce_skvoz_oblaka_skachat_krasivye_1920x1200.jpg)' + 'no-repeat center center fixed');
    }
    if (condition >= 600 && condition <= 622) {
    $('body').css('background', 'url(http://www.jr1.ru/i/orig/10628-1600x1200.jpg)' + 'no-repeat center center fixed');
    }       
    $('body').css('background-size', 'cover')

    $('#convert').click(function() {
      if (temp === f) {
        temp = c;
        $('#convert').text("Convert to Fahrenheit");
        $('#temp').text(temp + "\u00B0 C");
      }
      else {
        temp = f;
        $('#temp').text(temp + "\u00B0 F");
        $('#convert').text("Convert to Celsius");
      }
    });
      
  });  
});

See the Pen Show the Local Weather(1) by YaroslavW (@YaroslavW) on CodePen.