andreburto · February 5, 2018 23:37
diff --git a/weather1.html b/weather1.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<title>Weather Widget 1</title>
 		<script>

 function getUrl() {
 	return "http://localhost:8080/scratch/weather.xml";
 }

 function getWeather() {
 	var xhr = new XMLHttpRequest();
 	
 	xhr.onreadystatechange = function () {
 		if (xhr.readyState == xhr.DONE) {
 			displayWeather(xhr);
 		}
 	}
 	
 	xhr.open("GET", getUrl(), true);
 	xhr.send();
 }

 function displayWeather(payload) {
 	var xmlDoc = payload.responseXML;
 	var theWeather = document.getElementById("theWeather");
 	var forecast = xmlDoc.getElementsByTagName("txt_forecast")[0].getElementsByTagName("forecastday");
 	
 	theWeather.innerHTML = "";
 	
 	for (var cnt = 0; cnt < forecast.length; cnt++) {
 		var title = forecast[cnt].getElementsByTagName("title")[0].textContent;
 		var fcttext = forecast[cnt].getElementsByTagName("fcttext")[0].textContent;
 		var icon = forecast[cnt].getElementsByTagName("icon")[0].textContent;
 		var icon_url = forecast[cnt].getElementsByTagName("icon_url")[0].textContent;
 		var newElement = "<div class=\"forecastClass\"><img src=\""+icon_url+"\" title=\""+icon+"\"/><span class=\"title\">"+title+"</span><br/><span>"+fcttext+"</span></div>";
 		theWeather.innerHTML = theWeather.innerHTML + newElement;
 	}
 	
 	checkSize();
 }

 function checkSize() {
 	var html = document.documentElement;
 	var divTW = document.getElementById("theWeather");
 	
 	// Assign font-size first to set div sizes.
 	divTW.style.fontSize = Math.floor(html.clientHeight / 35) + "px";
 	
 	// Calculate horizontal spacing.
 	var divX = Math.floor((html.clientWidth - divTW.offsetWidth) / 2);
 	
 	// Calculate vertical spacing.
 	var divY = Math.floor((html.clientHeight - divTW.offsetHeight) / 2);

 	// Assign positions to the two div elements.
 	divTW.style.top = divY + "px";
 	divTW.style.left = divX + "px";
 }
 		
 function setupPage() {
 	getWeather();
 	window.setInterval(getWeather, 600000);
 }

 		</script>
 		<style>
 		
 body { margin: 0px; background-color: #deedee; color: #000000; }
 div#theWeather { margin: auto; position: absolute; width: 1024px; padding: 0px; }
 div.forecastClass { float: left; width: 100%; margin-bottom: 35px; margin: 5px; vertical-align: top; border-bottom: #6e6eff 2px dashed; padding: 5px; }
 div.forecastClass img { float: right; margin: 3px; }
 span.title { font-weight: bold; }

 		</style>
 	</head>
 	<body onresize="checkSize()" onload="setupPage()">
 		<div id="theWeather"></div>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Weather Widget 1</title>
	<script>

	function getUrl() {
	return "http://localhost:8080/scratch/weather.xml";
	}

	function getWeather() {
	var xhr = new XMLHttpRequest();

	xhr.onreadystatechange = function () {
	if (xhr.readyState == xhr.DONE) {
	displayWeather(xhr);
	}
	}

	xhr.open("GET", getUrl(), true);
	xhr.send();
	}

	function displayWeather(payload) {
	var xmlDoc = payload.responseXML;
	var theWeather = document.getElementById("theWeather");
	var forecast = xmlDoc.getElementsByTagName("txt_forecast")[0].getElementsByTagName("forecastday");

	theWeather.innerHTML = "";

	for (var cnt = 0; cnt < forecast.length; cnt++) {
	var title = forecast[cnt].getElementsByTagName("title")[0].textContent;
	var fcttext = forecast[cnt].getElementsByTagName("fcttext")[0].textContent;
	var icon = forecast[cnt].getElementsByTagName("icon")[0].textContent;
	var icon_url = forecast[cnt].getElementsByTagName("icon_url")[0].textContent;
	var newElement = "<div class=\"forecastClass\"><img src=\""+icon_url+"\" title=\""+icon+"\"/><span class=\"title\">"+title+"</span><br/><span>"+fcttext+"</span></div>";
	theWeather.innerHTML = theWeather.innerHTML + newElement;
	}

	checkSize();
	}

	function checkSize() {
	var html = document.documentElement;
	var divTW = document.getElementById("theWeather");

	// Assign font-size first to set div sizes.
	divTW.style.fontSize = Math.floor(html.clientHeight / 35) + "px";

	// Calculate horizontal spacing.
	var divX = Math.floor((html.clientWidth - divTW.offsetWidth) / 2);

	// Calculate vertical spacing.
	var divY = Math.floor((html.clientHeight - divTW.offsetHeight) / 2);

	// Assign positions to the two div elements.
	divTW.style.top = divY + "px";
	divTW.style.left = divX + "px";
	}

	function setupPage() {
	getWeather();
	window.setInterval(getWeather, 600000);
	}

	</script>
	<style>

	body { margin: 0px; background-color: #deedee; color: #000000; }
	div#theWeather { margin: auto; position: absolute; width: 1024px; padding: 0px; }
	div.forecastClass { float: left; width: 100%; margin-bottom: 35px; margin: 5px; vertical-align: top; border-bottom: #6e6eff 2px dashed; padding: 5px; }
	div.forecastClass img { float: right; margin: 3px; }
	span.title { font-weight: bold; }

	</style>
	</head>
	<body onresize="checkSize()" onload="setupPage()">
	<div id="theWeather"></div>
	</body>
	</html>