So, I'm making this application. What I basically want to do is to show the current temperature, and then show an image of someone wearing a coat or an image of someone not wearing a coat. I already have the current temp showing, (I'm using an API for that value) But I can't figure out how to do the image part. I'm using HTML, and Javascript (with JQuery and JSON to use with the API). I know that I prob. need to use an if statement, but I don't know how to use images in javascript. I'm inserting the temp into a table, and I would like for the image to be in the same row as the temp in the table.
The Javascript and the HTML(it's pretty basic) is below
(function() {
"use strict";
var main = function() {
var url = 'http://ift.tt/2mogVNu?';
$.getJSON(url, function(weatherResponse) {
console.log(weatherResponse);
var $weatherTable = $('<table>');
var response = weatherResponse.data.current_condition[0];
var count = 0;
for (var prop in response) {
if (count == 16) {
var $item = $('<tr>');
var $itemProp = $('<td>').text(prop);
var $itemVal = $('<td>').text(response[prop]);
$item.append("Temperature feels like: ");
$item.append($itemVal);
$weatherTable.append($item);
}
count = count+1;
}
$('main').append($weatherTable);
});
};
$(document).ready(main);
}());
<html>
<head>
<title>Weather</title>
</head>
<body>
<header>
<h1>Weather</h1>
</header>
<main>
</main>
<footer>
<p>Made by </p>
</footer>
<script src="http://ift.tt/2eBd7UN"></script>
<script src='sun.js'></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire