Local Weather App

index.html

<!-- 

NOTES
--study
 http://webdesign.tutsplus.com/articles/making-websites-location-aware-with-html5-geolocation--webdesign-10495 & https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition
to teach me how to use the Geolocation.getCurrentPosition() function.
--wrote a simple javascript that gets the longtitude & latitude coords of my browser.
-- study
http://openweathermap.org/current
=== to work put how to get send the coordinates and get the weather back
api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}
-- study 
https://www.codecademy.com/courses/javascript-beginner-en-EID4t/2/4
=== to understand API's
-- READ 
http://www.smashingmagazine.com/2012/02/beginners-guide-jquery-based-json-api-clients/
http://www.w3schools.com/json/json_http.asp
=== to get a grip on JSON
-->


  
  


<div class="new">
<div class="container-fluid" >   
  <h1 id="location">  </h1>
  <div id ="temperatureC"> </div> 
  <div id ="temperatureF"> </div> 
  <div> <img id ="icon" src="#"></div>
  </div>
  </div>
  
  

Local Weather App.markdown

Local Weather App

A Pen by Dee on CodePen.

License.

script.js

//a140a065ea1765a092c1c17444450de4
//"http://api.openweathermap.org/data/2.5/weather?lat=" + lat + " &lon=" + lon + "&APPID=a140a065ea1765a092c1c17444450de4"



function findUserLocation() {
  // grab user location coords
  var URL = "http://ip-api.com/json";
  $.get(URL, function(data) {
    // if coords, assign to variables and pass to getWeatherData();
    
      var lat = data.lat;
      var lon = data.lon;
      console.log(lat, lon, "finduser")
     getWeather(lat, lon);
      // else error
  });
        };

  
       

function getWeather(lat, lon) {

    var req = new XMLHttpRequest(); //
    req.open("GET", "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=a140a065ea1765a092c1c17444450de4", false); //format the API request URL
    req.send(); //send API request
    console.log(lon, lat,  "getweather");
    console.log(req.status);
    console.log(req.statusText);
    console.log(req.responseText);
    var responseArr = JSON.parse(req.responseText); //parse the response
    console.log(responseArr);
    var tempKelvins = Math.round(responseArr.main.temp); //get the temperature data.
    var iconID = (responseArr.weather[0].icon); //get the icon ID **** required
    var location = (responseArr.name); //get the location ID **** required
    var tempCelsius = Math.round(tempKelvins - 273.15); //tempCelsius *** required
    var tempFarenheit = Math.round(((tempKelvins - 273) * 1.8) + 32); //tempFaren *** required

    console.log(tempKelvins, tempCelsius, tempFarenheit, iconID, location);
    
    $(document).ready(function(){
      
      $("#location").text(location);
       $("#temperatureC").text(tempCelsius);
      $("#temperatureF").text(tempFarenheit);
      $("#icon").attr('src', "http://openweathermap.org/img/w/" + iconID + ".png");
    });
  }

findUserLocation();

scripts

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

style.sass

@import "compass"
@import "compass/css3/flexbox"
@import "compass/css3"

//Mixins
=linearGradient($top, $bottom)
  background: $top 
  background: -moz-linear-gradient(top,  $top 0%, $bottom 100%) 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom))
  background: -webkit-linear-gradient(top,  $top 0%,$bottom 100%)

=makeFlex
  @include display_flex
  align-items: center
  align-content: center
  flex-direction: column
  
body 
  margin: 0
  padding: 0
  border: 0
  height: 100VH
  width: 100%
  
.new
  height: 100%
  width: 100%
  background: #FFEDC3
  @include display_flex
  align-items: center
  justify-content: center
  
.container-fluid
  +makeFlex
  width: 40%
  background: red
  

  
  

styles

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