blobaugh/weatherapi.html

## weatherapi.html
<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
	<meta charset="UTF-8">

	<title>JS Driven Weather View</title>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script src="https://raw.github.com/andris9/jStorage/master/jstorage.js"></script>

	<script>
jQuery(document).ready( function($) {
		var cache_key = 'weather_data';
//$.jStorage.deleteKey( cache_key );
		var data = $.jStorage.get( cache_key );
		console.log( data );

		var api_url ='https://api.forecast.io/forecast/62627807ae3841ba587c80d49b90759b/31.3601,-85.8554';

		if( !data ) {

			$.ajax({
				url: api_url,
				dataType: "jsonp",
				async:   false,
				success: function (data) {
					$.jStorage.set( cache_key, data );
					fill_data( data );
				}
			});
		} else {
			console.log( 'filling' );
			fill_data( data );
		}

		//fill_data( data );

		function append( location, data ) {
			jQuery(  location ).append( ' ' + data );
		}

		function fill_data( data ) {
				append( '.location-header', data.latitude + ', ' + data.longitude );
				append( '.temp', data.currently.temperature );
				append( '.summary', data.currently.summary );
				append( '.humidity', data.currently.humidity );
				append( '.windspeed', data.currently.windSpeed );
		}
});
	</script>
</head>

<body>

<h1 class="location-header">Current conditions at</h1>

<p>
	<strong class="temp">Temperature:</strong>
	<span class="summary"></span>
</p>
<p class="humidity">Humidity:</p>
<p class="windspeed">Wind Speed:</p>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en-US" prefix="og: http://ogp.me/ns#">
	<head>
	<meta charset="UTF-8">

	<title>JS Driven Weather View</title>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script src="https://raw.github.com/andris9/jStorage/master/jstorage.js"></script>

	<script>
	jQuery(document).ready( function($) {
	var cache_key = 'weather_data';
	//$.jStorage.deleteKey( cache_key );
	var data = $.jStorage.get( cache_key );
	console.log( data );

	var api_url ='https://api.forecast.io/forecast/62627807ae3841ba587c80d49b90759b/31.3601,-85.8554';

	if( !data ) {

	$.ajax({
	url: api_url,
	dataType: "jsonp",
	async: false,
	success: function (data) {
	$.jStorage.set( cache_key, data );
	fill_data( data );
	}
	});
	} else {
	console.log( 'filling' );
	fill_data( data );
	}

	//fill_data( data );

	function append( location, data ) {
	jQuery( location ).append( ' ' + data );
	}

	function fill_data( data ) {
	append( '.location-header', data.latitude + ', ' + data.longitude );
	append( '.temp', data.currently.temperature );
	append( '.summary', data.currently.summary );
	append( '.humidity', data.currently.humidity );
	append( '.windspeed', data.currently.windSpeed );
	}
	});
	</script>
	</head>

	<body>

	<h1 class="location-header">Current conditions at</h1>

	<p>
	<strong class="temp">Temperature:</strong>
	<span class="summary"></span>
	</p>
	<p class="humidity">Humidity:</p>
	<p class="windspeed">Wind Speed:</p>

	</body>
	</html>