Change wallpaper according to JavaScript temperature

Question

Change wallpaper according to JavaScript temperature

Navigation

#1 by (2 votes)

0

I made a FreeCodeCamp project where it is to do a Local Weather (Local Weather). I used the API of their own project, already ready, but it does not change the background .

I want to change the background as per the temperature and caption that appears.

Example :

27ºC - Clear weather (a sun image would appear);
19ºC - Raining (an image of rain would appear);

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

I'll go through the code below and I'll send whatever is more precise.

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

javascript javascript-eventos

asked by anonymous 26.07.2017 / 03:29

1 answer

Mobile menu does not close when you click Creating folders within Program Files

score 2 · Answer 1

To change, simply establish a validation inside the function "getWeather ()", creating a relationship between the standard message returned by api, and the image url specific to that climate you want to use, for 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)] + ")");

    }
  });
}