Local Weather Application

index.html

<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
<link href='https://fonts.googleapis.com/css?family=Play&effect=neon|emboss|3d-float' rel='stylesheet' type='text/css'>
<div class="container-fluid nopadding">
  <nav class="navbar navbar-inverse navbar-fixed-top topnav" role="navigation">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toggle-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand font-effect-neon" target=_blank href="http://codepen.io/rfprod"><span class="glyphicon glyphicon-wrench"></span> RFProd</a>
    </div>
    <div class="collapse navbar-collapse" id="toggle-nav">
      <div class="container-fluid"> 
        <ul class="nav navbar-nav navbar-right font-effect-emboss">
          <li class="nav-pills temp-units-switcher enabled active">
            <a href="#" id="temp-units" onclick="switchBetweenKelvinAndCelsius();">&deg;&#8490; <span class="glyphicon glyphicon-arrow-right"></span> &deg;C</a>
          </li>
          <li class="nav-tabs"><a href="#localweather"><span class="glyphicon glyphicon-globe" ></span> WEATHER APP</a></li>
          <li class="nav-tabs"><a href="https://gist.github.com/rfprod/9d36feef6cec8272fc5a" target=_blank><span class="glyphicon glyphicon-download-alt" ></span> GIST</a></li>
        </ul>
      </div>
    </div>

  </nav>
  <a name="localweather"></a>
  <div class="home sect">
    <div class="container-fluid">
      <div class="col-md-12">
        <h2 class="font-effect-3d-float">						Local Weather</h2>
        <p class="output font-effect-3d-float">
          Weather output
        </p>
        <p class="actions">
          <a class="tweet-it font-effect-neon" target=_blank href="https://twitter.com/intent/tweet?text="><span class="glyphicon glyphicon-send responsive-glyph">
          <br>Tweet Weather</span></a>
        </p>
        <span class="credits font-effect-3d-float">credits <a href="http://www.hostip.info/" target=_blank>ip resolve api</a> - <a href="http://ipinfo.io" target=_blank>ip info api</a> - <a href="http://openweathermap.org/api" target=_blank>weather api</a> - <a href="http://www.flaticon.com/authors/freepik" target=_blank>flaticon</a> - <a href="https://pixabay.com" target=_blank>pixabay</a> - <a href="http://backgrounds.mysitemyway.com/" target=_blank>mysitemyway</a><br>licence <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" target=_blank>GPL 3.0</a></span>
      </div>
    </div>
  </div>
</div>

LocalWeatherApplication.markdown

Local Weather

Uses several REST APIs sequentially.

A Pen by V on CodePen.

License.

script.js

var latitude;
var longitude;
var weatherConditionKeywords = ["thunderstorm","drizzle","rain","snow","mist","smoke","haze","fog","sand","dust","clouds","sky is clear"];
var weatherConditionBackgrounds = [
  //thunderstorm: https://pixabay.com/en/lightning-storm-weather-sky-399853/
  "https://pixabay.com/static/uploads/photo/2014/05/12/07/10/lightning-342341_960_720.jpg",
  //drizzle: https://pixabay.com/en/rain-drops-city-streets-drizzle-874041/
  "https://pixabay.com/static/uploads/photo/2015/08/03/22/25/rain-874041_960_720.jpg",
  //rain: https://pixabay.com/en/rain-floor-water-wet-drops-122691/
  "https://pixabay.com/static/uploads/photo/2013/06/07/15/34/rain-122691_960_720.jpg",
  //snow: https://pixabay.com/en/snow-street-townhouses-city-urban-1030928/
  "https://pixabay.com/static/uploads/photo/2015/11/07/11/13/snow-1030928_960_720.jpg",
  //mist: https://pixabay.com/en/los-angeles-city-cityscape-487214/
  "https://pixabay.com/static/uploads/photo/2014/10/13/19/35/los-angeles-487214_960_720.jpg",
  //smoke: https://pixabay.com/en/smoke-landscape-colorado-sky-174891/
  "https://pixabay.com/static/uploads/photo/2013/08/23/00/05/smoke-174891_960_720.jpg",
  //haze: https://pixabay.com/en/city-misty-morning-mysterious-fog-75394/
  "https://pixabay.com/static/uploads/photo/2013/01/19/01/06/city-75394_960_720.jpg",
  //fog: https://pixabay.com/en/city-aerial-view-buildings-691621/
  "https://pixabay.com/static/uploads/photo/2015/03/26/10/35/city-691621_960_720.jpg",
  //sand: https://pixabay.com/en/sandstorm-sand-flood-storm-dust-165332/
  "https://pixabay.com/static/uploads/photo/2013/07/19/17/02/sandstorm-165332_960_720.jpg",
  //dust: https://pixabay.com/en/dust-road-vehicle-car-dry-gravel-945437/
  "https://pixabay.com/static/uploads/photo/2015/09/18/11/38/dust-945437_960_720.jpg",
  //clouds: https://pixabay.com/en/blue-sky-cloud-summer-196230/
  "https://pixabay.com/static/uploads/photo/2013/10/16/10/17/blue-sky-196230_960_720.jpg",
  //sky is clear: https://pixabay.com/en/sky-clouds-blue-contrail-clear-105623/
  "https://pixabay.com/static/uploads/photo/2013/11/20/12/52/sky-213848_960_720.jpg"
];
var tempByKelvin = 0;
var tempByCelsius = 0;
var tempMiddleValue = 0;
var tempMiddleByCelsius = 0;
var tempMiddleDif = 0;
var tempMiddleDifByCelsius = 0;
var tweetText;

$(document).ready(function(){
  $.getJSON("http://api.hostip.info/get_json.php", function(json){
    //alert(json.ip);
    $.getJSON("http://ipinfo.io/"+json.ip+"/json", function(json){
      //alert(json.loc);
      var geo = JSON.stringify(json.loc);
      geo = geo.substring(1,geo.length-1).split(",");
      latitude = geo[0];
      longitude = geo[1];
      //alert(latitude);
      //alert(longitude);
      getWeather(latitude, longitude);
    });
  });
});

function getWeather(lat,long){
  var output = "";
    var coordOutput = ""; // coord[lat,long]
    var weatherOutput = ""; // weather[main,description]
    var tempByCelsiusOutput = ""; // main[temp] converted to Celsius
    var baseOutput = ""; // base
    var mainOutput = ""; // main[temp,pressure,humidity,temp_min,temp_max]
    var windOutput = ""; // wind[]
    var cloudsOutput = ""; // clouds[]
    var sysOutput = ""; // sys[sunrise,sunset]
    var nameOutput = ""; // name
  var tweetText = ""; // name + description + temp + pressure + wind speed
    var nameTweet = "";
    var descriptionTweet = "";
    var tempTweet = "";
    var pressureTweet = "";
    var windSpeedTweet = "";
  // get weather params
  $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=8086a03c308f339335accc40ed0ec69a", function(json){
    var jsonSize = Object.size(json); // for duebug
    var jsonKeys = Object.keys(json);
    //alert(jsonKeys);
    var data = "";
    var i = 0;
      for (var property in json) {
        var property = jsonKeys[i];
        if (json.hasOwnProperty(property)) {
          data = json[property];
          if (typeof data === 'object'){
            //alert(JSON.stringify(data));
            if (property === 'coord'){
              //alert(JSON.stringify(data));
              var dKeys = Object.keys(data);
              coordOutput = "<span class='col-xs-6 col-md-6 col-lg-6'><img class='clipart' src='http://cdn.flaticon.com/svg/64/64704.svg' title='location: latitude | longitude'/> "+ data["lat"] +"&deg;, "+ data["lon"] +"&deg;</span>";
              //alert(coordOutput);
            }
            if (property === 'weather'){
              //alert(JSON.stringify(data));
              var dKeys = Object.keys(data[0]);
              weatherOutput = "<img src='http://openweathermap.org/img/w/".concat(data[0]["icon"]).concat(".png' class='meteoicon' title='meteoicon'/> <span class='weather-main'>")+ data[0]["main"] +"</span>: <span class='weather-description'>"+ data[0]["description"] +"</span></span>";
              descriptionTweet = data[0]["description"];
              //alert(weatherOutput);
            }
            if (property === 'main'){
              //alert(JSON.stringify(data));
              var dKeys = Object.keys(data);
              tempMiddleValue = (data["temp_min"] + data["temp_max"])/2;
              tempMiddleByCelsius = (Math.round(data["temp_min"] - 273.15) + Math.round(data["temp_max"] - 273.15))/2;
              tempMiddleDif = data["temp_max"] - tempMiddleValue;
              tempMiddleDifByCelsius = Math.round(data["temp_max"] - 273.15) - tempMiddleByCelsius;
              mainOutput = "<span class='col-xs-3 col-md-3 col-lg-3'><img class='clipart' src='http://cdn.flaticon.com/svg/15/15163.svg' title='temperature'/><br><span class='temp-current'>"+ data["temp"] +"&deg;&#8490;</span></span>"+"<span class='col-xs-3 col-md-3 col-lg-3'><img class='clipart' src='http://cdn.flaticon.com/svg/16/16986.svg' title='pressure'/><br>"+ data["pressure"] +"hPa</span>"+"<span class='col-xs-2 col-md-2 col-lg-2'><img class='clipart' src='http://cdn.flaticon.com/svg/91/91994.svg' title='humidity'/><br>"+ data["humidity"] +"%</span>"+"<span class='col-xs-4 col-md-4 col-lg-4'><img class='clipart' src='http://cdn.flaticon.com/svg/40/40532.svg' title='temperature min-max'/><br><span class='temp-min-max'>"+ tempMiddleValue +"&#177;"+ tempMiddleDif + "&deg;&#8490;</span></span>";
              tempByKelvin = data["temp"];
              tempByCelsius = Math.round(data["temp"] - 273.15);
              if (tempByCelsius > 0) tempByCelsius = "+"+tempByCelsius;
              tempByCelsiusOutput = "<span class='col-xs-12 col-md-12 col-lg-12'><span class='temp-presentation'>"+tempByCelsius+"&deg;C</span> ";
              tempTweet = "temp: ".concat(tempByCelsius).concat("C");
              pressureTweet = "pressure: ".concat(data["pressure"]).concat("hPa");
              //alert(mainOutput);
            }
            if (property === 'wind'){
              //alert(JSON.stringify(data));
              var dKeys = Object.keys(data);
              if (data["deg"] !== undefined){
                windOutput += "<span class='col-xs-5 col-md-5 col-lg-5'><img class='clipart' src='http://cdn.flaticon.com/svg/15/15157.svg' title='wind speed'/> "+data["speed"] +"m/sec</span><span class='col-xs-4 col-md-4 col-lg-4'><img class='clipart' src='http://cdn.flaticon.com/svg/3/3876.svg' title='wind degree'/>  "+ data["deg"] + "&deg;</span>";
              }else{
                windOutput += "<span class='col-xs-9 col-md-9 col-lg-9'><img class='clipart' src='http://cdn.flaticon.com/svg/15/15157.svg' title='wind speed'/> "+data["speed"] +"</span>";
              }
              windSpeedTweet = "wind speed: ".concat(data["speed"]).concat("m/sec");
              //alert(windOutput);
            }
            if (property === 'clouds'){
              //alert(JSON.stringify(data));
              var dKeys = Object.keys(data);
              cloudsOutput = "<span class='col-xs-3 col-md-3 col-lg-3'><img class='clipart' src='http://cdn.flaticon.com/svg/70/70886.svg' title='clouds'/> "+data["all"] +"</span>";
              //alert(cloudsOutput);
            }
            if (property === 'sys'){
              //alert(JSON.stringify(data));
              var dKeys = Object.keys(data);
              var sunrise = new Date(data["sunrise"] * 1000);
              sunrise = sunrise.toLocaleTimeString();
              var sunset = new Date(data["sunset"] * 1000);
              sunset = sunset.toLocaleTimeString();
              sysOutput = "<span class='col-xs-6 col-md-6 col-lg-6'><img class='clipart' src='http://cdn.flaticon.com/svg/55/55263.svg' title='sunrise'/> "+ sunrise +" UTC+0</span><span class='col-xs-6 col-md-6 col-lg-6'><img class='clipart' src='http://cdn.flaticon.com/svg/64/64685.svg' title='sunset'/> "+ sunset + " UTC+0</span>";
              //alert(sysOutput);
            }
          }
          if (property === 'base'){
            // baseOutput = jsonKeys[i] +" : "+ data;
            baseOutput = "<span class='col-xs-6 col-md-6 col-lg-6'><img class='clipart' src='http://cdn.flaticon.com/svg/64/64675.svg' title='base: information source'/> "+ data + "</span>";
            //alert(baseOutput);
          }
          if (property === 'name'){
            // nameOutput = jsonKeys[i] +" : "+ data;
            nameOutput = "<span class='col-xs-12 col-md-12 col-lg-12'><img class='clipart' src='http://cdn.flaticon.com/svg/24/24962.svg' title='location name'/> "+ data +"</span>";
            nameTweet = data;
            //alert(nameOutput);
          }
        }
        i++;
      }
    output += "<div class='row well well-sm'>"+nameOutput+"</div>"+"<div class='row well well-sm'>"+coordOutput+baseOutput+"</div>"+"<div class='row well well-sm'>"+tempByCelsiusOutput+weatherOutput+"</div>"+"<div class='row well well-sm'>"+mainOutput+"</div>"+"<div class='row well well-sm'>"+windOutput+cloudsOutput+"</div>"+"<div class='row well well-sm'>"+sysOutput+"</div>";
    $(".output").html(output);
    tweetText += nameTweet+" weather: "+descriptionTweet+", "+tempTweet+", "+pressureTweet+", "+windSpeedTweet;
    var urlVar = "&url=http://codepen.io/rfprod/pen/obvXKp";
    var tweetLink = "https://twitter.com/intent/tweet?text=";
    var tweetLink = tweetLink.concat(tweetText).concat(urlVar);
    $(".tweet-it").attr("href",tweetLink);
  });
  $(".responsive-glyph").addClass("animated bounce");
  setTimeout(switchBackground, 1500);
  return output;
}

Object.size = function(obj){
  var size = 0;
  var key;
  for (key in obj){
    if (obj.hasOwnProperty(key)) size++;
  }
  return size;
}

function switchBetweenKelvinAndCelsius(){
  // alert("tempByKelvin "+tempByKelvin+", tempByCelsius "+tempByCelsius+", tempMiddleValue "+tempMiddleValue+", tempMiddleByCelsius "+tempMiddleByCelsius+", tempMiddleDif "+tempMiddleDif+", tempMiddleDifByCelsius "+tempMiddleDifByCelsius);
  if ($(".temp-units-switcher").hasClass("active")){
    $(".temp-presentation").html(tempByCelsius+"&deg;C");
    $(".temp-current").html(tempByCelsius.substring(1,tempByCelsius.length)+"&deg;C");
    $(".temp-min-max").html(tempMiddleByCelsius+"&#177;"+tempMiddleDifByCelsius+"&deg;C");
    $(".temp-units-switcher").removeClass("active");
    $("#temp-units").html("&deg;C <span class='glyphicon glyphicon-arrow-right'></span> &deg;&#8490;");
  }else{
    $(".temp-presentation").html("+"+tempByKelvin+"&deg;&#8490;");
    $(".temp-current").html(tempByKelvin+"&deg;&#8490;");
    $(".temp-min-max").html(tempMiddleValue+"&#177;"+tempMiddleDif+"&deg;&#8490;");
    $(".temp-units-switcher").addClass("active");
    $("#temp-units").html("&deg;&#8490; <span class='glyphicon glyphicon-arrow-right'></span> &deg;C");
  }
}

function switchBackground(){
  var imgURL = "";
  for (var i=0;i<weatherConditionKeywords.length;i++){
    if ($(".weather-description").html().toLowerCase().contains(weatherConditionKeywords[i])){
      imgURL = weatherConditionBackgrounds[i];
    }
  }
  $(".home").css('background-image','url('+imgURL+')');
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

.home {background: transparent url('http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/831/full/vibrant-blue-seamless-patterns-5.jpg') fixed center top / cover;min-height: 100vh;height: auto !important;margin-top: 0.95em;}
.nopadding {padding: 0;}
body {color:#ffffff; font-family: 'Play', sans-serif;font-size: 2.2em;}
.navbar-brand {font-size: 1em;}
.img-border {border-radius: 50%;height: 40vh;}
.sect {padding-top: 2vh;}
.social-btn-blk {background-color: #000000;}
.social-btn-wht {background-color: #ffffff;}
.img-fit{width:100%;}
.trigger{dispay:block;text-align:center;}
.actions{text-align:center;}
.actions a{text-decoration:none;}
h2{text-align:center;margin-top:4vh;}
p{margin-top:2vh;}
.credits{display:block;text-align:center;font-size:0.75em;}
.credits a:hover{text-decoration:none;}
.output{text-align:center;}
.clipart{width:4vw;min-width:25px;height:auto !important;border:#000000 1px dotted;background:#ffffff;}
.well{background:transparent;}
.meteoicon{width:7vw;min-width:45px;height:auto !important;}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />