LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Weather Application in jQuery

What temperature is it at your exact location? Click the button and find out!

? °

CSS
	body {  
  font-family: 'Roboto', sans-serif;
  color: #212121;
  font-size: 18px;
}

.italic {
  font-style: italic;
  font-weight: 700;
}

.wrapper {
  width: 400px;
  margin: 30px auto 0 auto;
  text-align: center;
}

#result {
  height: 50px;
  width: 65px;
  font-size: 20px;
  line-height: 50px;
  margin: 20px auto 0 auto;
  text-align: center;
  border-radius: 10%;
  font-weight: 700;
  background-color: #16a085;
  *color: #fff;
}

#showTemp {
  margin: 30px auto 0 auto;
  width: 170px; height: 50px;
  background: #E74C3C;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17px;
  color: #fff;
  border: none;
  border-radius: 5px;
}

#showTemp:hover {
  cursor: pointer;
}
JS
$(document).ready(function () {
  var lat, lon, api_url;
  
  if ("geolocation" in navigator) {
    
    $('#showTemp').on('click', function () {
       navigator.geolocation.getCurrentPosition(gotLocation);

      function gotLocation(position) {
        lat = position.coords.latitude;
        lon = position.coords.longitude;
        
        api_url = 'http://api.openweathermap.org/data/2.5/weather?lat=' +
                  lat + '&lon=' + 
                  lon + '&units=metric&appid=b231606340553d9174136f7f083904b3';
       // http://api.openweathermap.org/data/2.5/weather?q=London,uk&callback=test&appid=b1b15e88fa79722
        
        $.ajax({
          url : api_url,
          method : 'GET',
          success : function (data) {
            


            var tempr = data.main.temp;
            var location = data.name;
            var desc = data.weather.description;
            

            $('#result').text(tempr + '°' + location);

          }
        });
     }
    });
    
  } else {
    alert('Your browser doesnt support geolocation. Sorry.');
  }
  
});
Term
Wed, 12/27/2017 - 06:59

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv