<body>
<header>
</header>
<section>
</section>
<script>
var header = document.querySelector('header');
var section = document.querySelector('section');
var requestURL = 'https://gist.githubusercontent.com/ErnieAtLYD/a8c4126ecf954a4136c128aca33881e4/raw/47988536cdcbfd45af5727f5f1214d7b498e966e/weather-feed.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
console.log('called');
request.onload = function() {
var weather = request.response;
populateHeader(weather);
showWeather(weather);
}
function populateHeader(jsonObj) {
var myH1 = document.createElement('h1');
myH1.textContent = 'cod: ' + jsonObj['cod'];
header.appendChild(myH1);
var myPara = document.createElement('p');
//myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
//header.appendChild(myPara);
}
function showWeather(jsonObj) {
var list = jsonObj['list'];
for(var i = 0; i < list.length; i++) {
//alert(list[i].coord.lon);
var myArticle = document.createElement('article');
var myH2 = document.createElement('h2');
var myPara1 = document.createElement('p');
var myPara2 = document.createElement('p');
var myPara3 = document.createElement('p');
var myList = document.createElement('ul');
myH2.textContent = list[i].name;
myPara1.textContent = 'lat: ' + list[i].coord.lat;
myPara2.textContent = 'lon: ' + list[i].coord.lon;
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
</script>
</body>
Loading...