0

Eu fiz um projeto do FreeCodeCamp em que é pra fazer um Weather Local (Clima Local). Utilizei a API do próprio projeto deles, já pronta, porém ela não altera o background.

Eu quero trocar o background conforme a temperatura e a legenda que aparece.

Exemplo:

  • 27ºC - Tempo Limpo (apareceria uma imagem de sol);
  • 19ºC - Chovendo (apareceria uma imagem de chuva);

(No caso, ambos exemplos estão em ingles).

Vou por o código abaixo e mando o que for mais preciso.

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 Resposta 1

2

Para a alteração, basta estabelecer uma validação dentro da função "getWeather()", criando uma relação entre a mensagem padrão retornada pela api, e a url da imagem específica daquele clima que você deseja utilizar, segue exemplo:

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

    }
  });
} 
3
  • Po cara, muito obrigado de verdade, mas no caso eu to fazendo pelo CodePen, esse $(element).css seria o q ? O Body?
    – Jota
    Commented 26/07/2017 às 15:34
  • Eu consegui, é a mesma coisa, so esqueci de fechar o {} e nada tava indo, cara muito obrigado kkk <3
    – Jota
    Commented 26/07/2017 às 16:02
  • Opa, sem problemas! haha. Apenas esclarecendo, o "element", seria o elemento no qual você quer aplicar o background, no caso do body, utilize $("body"), assim por diante. Commented 26/07/2017 às 16:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .