I am new to building websites, so can anyone please help me? I want to use an if/else statement in html to display text and some movies on my website. Below I have added my html code, but it sees the if/else statement as a text and not as a code. How can I get this if/else statement to work, using the temperature output from my js code with openweather API?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://ift.tt/1lTlDxP">
<link rel="stylesheet" href="main.css">
<script src="http://ift.tt/1yCEpkO"></script>
<script type='text/javascript' src='app.js'></script>
</head>
<body>
<input type="text" value="In which city are you?" id="city">
<button id="search">Submit</button>
<p id="demo"></p>
<p>The weather outside is: </p>
<div class= "weather">
Fill in your location first
</div>
<p>What will you be making for dinner tonight?</p>
<div class="inspiration">
Give me some inspiration!
<div class="recipe">
if (Math.round(data.main.temp) == null) {
<p>Fill in your location first</p>
} else {
if (Math.round(data.main.temp) < -5) {
<p> Oh man.. It is way too cold! Stay inside the whole day and have a nice and hot turkey soup. Make sure you don’t freeze </p>
<iframe width="392" height="220" src="https://www.youtube.com/embed/SdJfxGo5PQM?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
} else if (Math.round(data.main.temp) === -5 - 5){
<p>wow look at that weather, it is quite cold.. With those temperatures a chicken and fries curry would be nice don’t you think? </p>
<iframe width="392" height="220" src="https://www.youtube.com/embed/PfoOxeTXdXA?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
} else if (Math.round(data.main.temp) === 5 - 15) {
<p> Today is a good day, don’t you think? Some cheeseburger cups would taste great!</p>
<iframe width="392" height="220" src="https://www.youtube.com/embed/k-2KdH6k0nA?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
} else if (Math.round(data.main.temp) === 15 - 25) {
<p> With those temperatures it is not a bad idea to have a BBQ! Here is a recipe for hummus to have as a side dish!</p>
<iframe width="4392" height="220" src="https://www.youtube.com/embed/XN4aSh-Dj4Y?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
} else if (Math.round(data.main.temp) === 25-35) {
<p> Damn it's hot! I can hardly think of anything to have for dinner to cool down. </p>
<p> Just go get some ice cream please. </p>
} else {
<p>Those temperatures are insane! Are you in a sauna?</p>
}
}
</div>
</div>
</div>
</body>
</html>
this is my js code
$(document).ready(function(){
$('#search').click(function(){
var city = $('#city').val();
console.log(city);
$.getJSON( "http://ift.tt/1jfvxJq" + city + "&units=metric&appid=9334f947893792dcb9b2e2c05ae23eb0", function( data ) {
$('.weather').html(Math.round(data.main.temp)+ ' degrees Celcius');
});
});
});
Aucun commentaire:
Enregistrer un commentaire