Weather app ip-api

In this example below you will see how to do a Weather app ip-api with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by puma210, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright puma210 ©
  • HTML
  • CSS
  • JavaScript
    <div class="container-fluid">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <div class="my-container">
        <h1>Local Weather</h1>
        <img id="wthicon" src=#><label id="location">Pais,Ciudad</label><br>
        <p id="clima">Clima:</p>
        <p id="clouds">Nubusidad:</p>
        <p id="temp">Temp:</p>
        <p id="humedad">Humedad:</p>
        <button class="unit-btn btn btn-primary">ºC / ºF</button>
      </div>
    </div>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/puma210/weather-app-ip-api-oxJBjg */
     body {
     font-family: "Arial";
     background: no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
 }
 
 .my-container {
     color: white;
     font-weight: 800;
     font-size: 21px;
     text-shadow: 1px 1px 1px black;
     text-align: center;
     border: transparent white 1px;
     border-radius: 35px;
     padding: 15px;
     margin-top: 30%;
     background-color: rgba(100, 100, 100, 0.10);
     box-shadow: 0 0 5px rgba(50, 50, 50, .05), 0 1px 3px rgba(50, 50, 50, .2), 0 3px 5px rgba(50, 50, 50, .2), 0 5px 10px rgba(50, 50, 50, .2), 0 10px 10px rgba(50, 50, 50, .2), 0 20px 20px rgba(50, 50, 50, .3);
     ;
 }
 
 button {
     margin: 10px;
     padding: 5px;
 }
 
 .error {
     background-image: url("https://i.imgur.com/VfzGbHw.jpg");
     background-color: #F26A16;
     color: white;
 }
 
 .soleado {
     background-image: url("https://i.imgur.com/cKqb747.jpg");
     background-color: #59B5F7;
     color: white;
 }
 
 .nublado {
     background-image: url("http://www.filetobackup.com/wp-content/uploads/2014/08/Sky-Cloud-Blue-Clouds-Hills-Desert-Nature-Free-Hd-323828.jpg");
     background-color: #C5D6D6;
     color: #FFFFFF;
 }
 
 .lluvioso {
     background-image: url("https://i.imgur.com/EKyvsTh.jpg");
     background-color: #819191;
     color: black;
 }
 
 .nevando {
     background-image: url("https://i.imgur.com/vI3GYu3.jpg");
     background-color: #F5FAFA;
     color: white;
 }
 
 .tormenta {
     background-image: url("https://i.imgur.com/bTwpb2c.jpg");
     background-color: #444D4D;
     color: white;
 }


/*Downloaded from https://www.codeseek.co/puma210/weather-app-ip-api-oxJBjg */
    var position;
var currentUnit = 'metric';

 $(document).ready(function() {

  $.getJSON('http://www.ip-api.com/json',success)
        .fail(error);
   
  $('.unit-btn').on('click', switchUnits);

});

//User story 1: Get the user location
function error(err) {
  console.warn('Error-> '+err.code+': '+err.message);
  alert('Location response error: Reload the page');
};

function success(pos) {
  position = pos;
  
  getWeatherInfo(position.lat, position.lon, currentUnit);
};

//User story 2: Get the weather in user location
function getWeatherInfo(lat, long, unit) {
  var apiUrl = 'http://api.openweathermap.org/data/2.5/weather?';
  var key = 'adf41a005e9337bc7f87657d4385e73d';
  var queryData = {
    lat: lat,
    lon: long,
    units: unit,
    APPID: key
  };
   var proxy = 'https://crossorigin.me/';
  var finalURL = proxy + apiUrl; 
  console.log(finalURL);

  
   $.getJSON(apiUrl , queryData,showWeather )
        .fail(function(jqxhr, textStatus, error){
              console.warn('Error-> '+textStatus+': '+error);
              alert('Api response error: This app doesnot suppert https protocol');
  });  
  
 
};

function showWeather(json) {
  var iconUrl = 'http://openweathermap.org/img/w/' + json['weather'][0].icon + '.png';
  
  var tempUnit = currentUnit==='metric'?'ºC':'ºF';
  
  $('#location').html(json['name'] + ', ' + json['sys'].country);
  $('#clima').html(json['weather'][0].main);
  
  json['clouds'].all ? $('#clouds').html('Clouds: '+json['clouds'].all+'% '+json['weather'][0].description) : $('#clouds').hide();
  
  $('#wthicon').prop('src', iconUrl);
  $('#temp').html('Temp: '+json['main'].temp +' '+tempUnit);
  $('#humedad').html('Humidity: '+json['main'].humidity + '%');

  adaptPageStyle(json['weather'][0].id);
     
}

function adaptPageStyle(id) {
  var bodyStyleClass = getBodyStyleClass(id);

  $('body').hasClass('') ?
    $('body').addClass(bodyStyleClass) :
      !$('body').hasClass(bodyStyleClass) ?
        $('body').toggleClass(bodyStyleClass) :
        null;
};

function getBodyStyleClass(id) {
  var styleClass = '';
  //error
  if(id === 999){
    styleClass = 'error';
  }//despejado 
  else if (id === 800) {
    styleClass = 'soleado';
  } //nubes
  else if (id > 800 && id < 804) {
    styleClass = 'nublado';
  } //nieve
  else if (id >= 600 && id <= 622) {
    styleClass = 'nevando';
  } //lluvia
  else if (id >= 500 && id <= 531) {
    styleClass = 'lluvioso';
  } //tormenta
  else if (id >= 200 && id <= 232) {
    styleClass = 'tormenta';
  } else {
    styleClass = '';
    console.log('API id response unexpected');
    //Vista estado error
  }

  return styleClass;
}

//User story 3: 
function switchUnits() {
  var unitWished = currentUnit === 'metric' ? 'imperial' : 'metric';

  getWeatherInfo(position.lat, position.lon, unitWished);

  currentUnit = unitWished;
}


Comments