openweathermap api

temperatura en openweathermap jquery

by femfoyou

HTML

<div class="wrapper"> 
    <!-- A wrapper for CSS-design -->
    <h2>Weather Application in jQuery</h2>
    <p>What temperature is it at your <span class='italic'>exact</span> location? Click the button and find out!
    </p>
    <!-- Some fancy text -->
    
    <!-- Here we will show the final result -->
    <p id="result">? °</p>

    <!-- Simple button -->
    <button id="showTemp">Submit</button>  
  </div>
  
  
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

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;
}

JavaScript

$(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;
            

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

          }
        });
     }
    });
    
  } else {
    alert('Your browser doesnt support geolocation. Sorry.');
  }
  
});