FreeCodeCamp: ShowLocalWeather

freecodecamp-showlocalweather.markdown

FreeCodeCamp: ShowLocalWeather

A Pen by Maureen Hernandez on CodePen.

License.

index.html

<div class="container">
  <div class="panel weather">
    <h1>Your Weather is:</h1>
    <h2>Temperature: </h2>   
    <h3 id="temp">main.temp</h3>
    <img id="icon" src="" alt="Icon depicting current weather." />
    <div class = 'row'>
      <button class = 'converter btn cCon btn-info'>
        Convert to °C
      </button>
      
      <button class = 'converter btn fCon btn-danger'>
        Convert to °F
      </button>
    </div>
    <h2>Humidity: </h2>
    <h3 id="humidity">main.humidity</h3>
  </div>
</div>

<div class="well">
  Please see this pen using https://, this because geolocation position it's not allowed from unsercure sources.
</div>

script.js

$(document).ready(function(){
  
 var interval = 60000 * 10;
 var lat;
 var lon;
  
if (navigator.geolocation){
   navigator.geolocation.getCurrentPosition(function(position){
     lat = position.coords.latitude;
     lon = position.coords.longitude;
     console.log(lat);
     console.log(lon);
     getW(lat, lon);
     setInterval( getW(lat, lon) , interval);
   });
 }  
  
function getW(lat, lon){ 
$.getJSON('https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+lon+'&APPID=2d1ddd68192771ea88126b7b370a1dd7'
          , function(json){
      var code = json.weather[0].icon;
      var temp = json.main.temp; //kelvin
      $("#temp").html(temp);
      $("#humidity").html(json.main.humidity);
      $("#icon").attr("src", ' http://openweathermap.org/img/w/'+code+'.png');
            
            
     var celcius = Math.floor(temp - 273.15);

     var farenheight = Math.floor(9 / 5 * celcius + 32);


        $('.cCon').on('click', function() {
          $('#temp').html(celcius + " °C")
        });

        $('.fCon').on('click', function() {
          $('#temp').html(farenheight + " °F")
        });
            
            
            
    });
    
 }
  
    
 
  
});

scripts

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

style.css

.weather, .well{
  width: 60%;
  margin: 0 auto;
  text-align: center ;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />