Change background according to Javascript temperature

Question

I did a Freecodecamp project where it’s to make a Weather Local (Local Weather). I used their own project API, already ready, but it does not change the background.

I want to change the background according to the temperature and the legend that appears.

Example:

• 27ºC - Clear Weather (a sun image would appear);
• 19ºC - Raining (a rain image would appear);

(In this case, both examples are in English).

I’ll break the code and send you whatever you need.

var api = "https://fcc-weather-api.glitch.me/api/current?";
var lat, lon;
var tempUnit = 'C';
var currentTempInCelsius;

$( document ).ready(function(){
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
      var lat = "lat=" + position.coords.latitude;
      var lon = "lon=" + position.coords.longitude;
      getWeather(lat, lon);
    });
  } else {
    console.log("Geolocation is not supported by this browser.");
  }

  $("#tempunit").click(function () {
    var currentTempUnit = $("#tempunit").text();
    var newTempUnit = currentTempUnit == "C" ? "F" : "C";
    $("#tempunit").text(newTempUnit);
    if (newTempUnit == "F") {
      var fahTemp = Math.round(parseInt($("#temp").text()) * 9 / 5 + 32);
      $("#temp").text(fahTemp + " " + String.fromCharCode(176));
    } else {
      $("#temp").text(currentTempInCelsius + " " + String.fromCharCode(176));
    }
  });

})

function getWeather(lat, lon) {
  var urlString = api + lat + "&" + lon;
  $.ajax({
    url: urlString, success: function (result) {
      $("#city").text(result.name);
      $("#country").text(result.sys.country);
      currentTempInCelsius = Math.round(result.main.temp * 10) / 10;
      $("#currentTemp").text(currentTempInCelsius + " " + String.fromCharCode(176));
      $("#tempunit").text(tempUnit);
      $("#currentWeather").text(result.weather[0].main);
      IconGen(result.weather[0].main);
    }
  });
} 

Answer 1

For the change, just establish a validation within the "getWeather()" function, creating a relationship between the standard message returned by the api, and the specific image url of that climate you want to use, follow example:

function getWeather(lat, lon) {
  var urlString = api + lat + "&" + lon;
  $.ajax({
    url: urlString, success: function (result) {
      $("#city").text(result.name);
      $("#country").text(result.sys.country);
      currentTempInCelsius = Math.round(result.main.temp * 10) / 10;
      $("#currentTemp").text(currentTempInCelsius + " " + String.fromCharCode(176));
      $("#tempunit").text(tempUnit);
      $("#currentWeather").text(result.weather[0].main);
      IconGen(result.weather[0].main);

      // Estabelece um padrão para o retorno dos dados da api, e sua respectiva imagem de fundo
      var weatherPattern = new Array("sky is clear", "raining", "clowdy");
      var weatherBackground = new Array("imagens/ceu_limpo.png", "imagens/chuva.png", "imagens/nublado.png");

      // Define o background do elemento desejado, de acordo com o clima
      $(elemento).css("background", "url(" + weatherBackground[weatherPattern.indexOf(result.weather[0].main)] + ")");

    }
  });
}