Skip to main content
adicionou 133 caracteres ao conteúdo; título editado
Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221

Trocar de Backgroundbackground conforme a temperatura JavaScript

eu queria uma ajuda de vocês.

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

Porém euEu quero trocar o Backgroundbackground conforme a temperatura e a legenda que aparece.

Exemplo1: 27ºC - Tempo Limpo (Ai apareceria uma imagem de sol); Exemplo2: 19ºC - Chovendo (Ai apareceria uma imagem de chuva).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 a baixo,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);
    }
  });
} 

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

Trocar de Background conforme a temperatura JavaScript

eu queria uma ajuda de vocês.

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

Porém eu quero trocar o Background conforme a temperatura e a legenda que aparece.

Exemplo1: 27ºC - Tempo Limpo (Ai apareceria uma imagem de sol); Exemplo2: 19ºC - Chovendo (Ai apareceria uma imagem de chuva).  (No caso, ambos exemplos estão em ingles).

Vou por o código a baixo, 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); } }); }

Trocar de background conforme a temperatura JavaScript

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);
    }
  });
} 
Fonte Link
Jota
  • 527
  • 1
  • 8
  • 23

Trocar de Background conforme a temperatura JavaScript

eu queria uma ajuda de vocês.

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

Porém eu quero trocar o Background conforme a temperatura e a legenda que aparece.

Exemplo1: 27ºC - Tempo Limpo (Ai apareceria uma imagem de sol); Exemplo2: 19ºC - Chovendo (Ai apareceria uma imagem de chuva). (No caso, ambos exemplos estão em ingles).

Vou por o código a baixo, 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); } }); }