I'm working on this codepen . My goal is to create variable responses according to the temperature and the climate of the place. Example: Clear sky and neighborhood 1 is response X, rain and neighborhood 2 is answer Y. I am learning PHP, however I would like to vary this response according to response from the API . Follow the code below. (In the example of "Clear Sky", the answer comes as "Clear Sky" and the code modifies.
var weatherData = {
city: document.querySelector ("#city"),
weather: document.querySelector ("#weather"),
temperature: document.querySelector("#temperature"),
temperatureValue: 0,
units: "°C"
};
function roundTemperature(temperature){
temperature = temperature.toFixed(1);
return temperature;
}
function switchUnits (){
if (weatherData.units == "°C") {
weatherData.temperatureValue = roundTemperature(weatherData.temperatureValue * 9/5 + 32);
weatherData.units = "°F";
} else {
weatherData.temperatureValue = roundTemperature ((weatherData.temperatureValue -32) * 5/9);
weatherData.units = "°C";
}
weatherData.temperature.innerHTML = weatherData.temperatureValue + weatherData.units + " ";
}
function getLocationAndWeather(){
if (window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function() {
var response = JSON.parse(xhr.responseText);
console.log(response);
var position = {
latitude: response.latitude,
longitude: response.longitude
};
var cityName = response.city;
var weatherSimpleDescription = response.weather.simple;
var weatherDescription = translateDescription(response.weather.description);
var weatherTemperature = roundTemperature(response.weather.temperature);
weatherData.temperatureValue = weatherTemperature;
loadBackground(position.latitude, position.longitude, weatherSimpleDescription);
weatherData.city.innerHTML = cityName;
weatherData.weather.innerHTML = ", " + weatherDescription;
weatherData.temperature.innerHTML = weatherTemperature + weatherData.units;
}, false);
xhr.addEventListener("error", function(err){
alert("Could not complete the request");
}, false);
xhr.open("GET", "https://fourtonfish.com/tutorials/weather-web-app/getlocationandweather.php?owapikey=e2db5b0453a25a492e87ad8b03046a7c&units=metric", true);
xhr.send();
}
else{
alert("Unable to fetch the location and weather data.");
}
}
function loadBackground(lat, lon, weatherTag) {
var script_element = document.createElement('script');
script_element.src = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1452866c8cea54acd0075022ef573a07&lat=" + lat + "&lon=" + lon + "&accuracy=1&tags=" + weatherTag + "&sort=relevance&extras=url_l&format=json";
document.getElementsByTagName('head')[0].appendChild(script_element);
}
function jsonFlickrApi(data){
if (data.photos.pages > 0){
//var randomPhotoId = parseInt(data.photos.total);
var photo = data.photos.photo[Math.floor(Math.random()*parseInt(data.photos.photo.length))];
document.querySelector("body").style.backgroundImage = "url('" + photo.url_l + "')";
document.querySelector("#image-source").setAttribute("href", "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id);
}
else{
document.querySelector("body").style.backgroundImage = "url('https://fourtonfish.com/tutorials/weather-web-app/images/default.jpg')";
document.querySelector("#image-source").setAttribute("href", "https://www.flickr.com/photos/superfamous/310185523/sizes/o/");
}
}
function translateDescription(description) {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=pt&dt=t&q=" + description, false);
xhttp.send();
var response = JSON.parse(xhttp.responseText);
return response[0][0][0];
}
getLocationAndWeather();body {
height: 100%;
margin: 0;
padding: 0;
font-family:Arial, sans-serif;
font-size: 2em;
text-shadow: 0 0 10px #000;
color: #fff;
background: #888;
bacground-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
section {
min-height: 100%;
}
h1 {
font-size: 2em;
padding: 0 0.3em;
line-height: 1em;
}
p {
padding: 0 1em;
}
a{
color: #fff;
}
footer {
position: absolute;
bottom: 0;
font-size: 0.5em;
}
#temperature {
text-decoration: none;
border-bottom: 0.05em dotted white;
}<section>
<h1 id= "city">Weather Web App</h1>
<p> <a id="temperature" href="#" onclick="switchUnits(); return false;" title ="Click to switch between metric and impreial units"></a><span id = "weather"> by Shazam (tutorial from @fourtonfish)</p>
</section>
<footer>
<p>Powered by <a href="http://flickr.com/services/api/">Flickr</a> and <a href="http://openweathermap.org">Openweathermap.org</a>.
Created by <a href="https://twitter.com/steelcitycoach">@steelcitycoach</a>. <a id="image-source" href="#">Image source</a>.</p>
</footer>So I think it's easy: I need to put a variable in the answer. I suppose it was something like this: (Should I use two quotation marks (") and not just a quotation mark (')?)
<?php
if ($resultado1 = 'clear sky') {
echo "Resposta 1";
}
?>Now, I'm having trouble transferring the javascript variable to php. I made the index.html in index.php. Below, I created what I believe would make sense, but the result does not appear on the screen.
<?php
$variavelphp = "<script>document.write(weatherDescription)</script>";
if ($variavelphp == 'clear sky') {
echo "Resposta 1";
}
?>