Change background according to Javascript temperature

Asked

Viewed 92 times

0

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

1 answer

2

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)] + ")");

    }
  });
} 
  • Po man, thank you very much indeed, but in case I’m doing it by Codepen, this $(element). css would be the q ? Body?

  • I got it, it’s the same thing, I just forgot to close the {} and nothing was going, thank you very much kkk <3

  • Whoa, no problem! Haha. Just to clarify, the "element", would be the element in which you want to apply the background, in the case of body, use $("body"), so on.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.