Weather app ip-api

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