Local Weather

index.html

<div class = "text-center">
  <h1>App Local Weather</h1>
  <h3>Made by Saulo</h3>
  
<ul class = "list-unstyled">
  <li class = "btn btn-default" id = "city"></li>
  <li class = "btn btn-default" id = "weatherType"></li>
  <li class = "btn btn-default" id = "fTemp"></li>
  <li class = "btn btn-default" id = "windSpeed"></li>
  <li></li>
</ul>
</div>

Local Weather.markdown

Local Weather

An Example

A Pen by Saulo Cunha on CodePen.

License.

script.js

$(document).ready(function() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var long;
          var lat;
          
          long = position.coords.longitude;
          lat = position.coords.latitude;

          //API URL with geolocation
          var api = 'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+ long+'&appid=5fedd294998aa98f2c82a502bdfb839c';

$.getJSON(api, function(data) {
         var fTemp;
     var cTemp;
     var kTemp;
         var tempSwap=true;
            //JSON call for Open Weather api
         var weatherType = data.weather[0].description;
            kTemp = data.main.temp;
            var windSpeed = data.wind.speed;
            var city = data.name;

            // Temp in Kelvin
            fTemp = (kTemp*(9/5)-459.67).toFixed(1);
            //Temp in F
            //City Name
            cTemp = (kTemp-273).toFixed(1);
            console.log(city);
            $("#city").html(city);
            $("#weatherType").html(weatherType);
            $("#fTemp").html(fTemp + " ℉");
            $("#fTemp").click(function() {
              if (tempSwap===false) {
                $("#fTemp").html(fTemp + " ℉");
                tempSwap=true;
              }  
              else{
                $("#fTemp").html(cTemp + " ℃");
                tempSwap=false;
              }
            });
            windSpeed = (2.237*(windSpeed)).toFixed(1);
            $("#windSpeed").html(windSpeed + " mph");
            if(fTemp>80){
     $('body').css('background-image','url(https://images.unsplash.com/photo-1414269665217-a57681e266b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=6fd9f051bea811268593340698b6a822)');
    }
     else if(fTemp>70){
         $('body').css('background-image','url(https://images.unsplash.com/photo-1428592953211-077101b2021b?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925)');
     }
       else if(fTemp>60){
         $('body').css('background-image','url(https://images.unsplash.com/photo-1428592953211-077101b2021b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=9dee70ba78c49619bc7f5c8a91778f2b)');
     }
      else if(fTemp>50){
        $('body').css('background-image','url(https://images.unsplash.com/photo-1422020297037-97bd356cc312?crop=entropy&fit=crop&fm=jpg&h=1250&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2400)');
      } 
  });
  });
} 
});

scripts

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

style.css

body{
  background-size:cover;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />