Weather underdround
based on http://jsfiddle.net/junwatu/kvPA2/ Simple weather app with html, css, and js!. This app using Weather API from Weather Underground and HTML5 Geolocation API!.
by lovromar
HTML
<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
<h1><span class="location"></span> ,<span class="country"></span></h1>
<div class="header today">
<p id="when"></p>
<p id="condition"></p>
<img id="weather_icon"/>
<p id="temp"></p>
</div>
<div class="header tomorrow">
<p id="when"></p>
<p id="condition"></p>
<img id="weather_icon"/>
<p id="temp"></p>
</div>
<div class="header after_tomorrow">
<p id="when"></p>
<p id="condition"></p>
<img id="weather_icon"/>
<p id="temp"></p>
</div>
CSS
.header {
padding: 5px 5px;
outline:solid 1px #cacaca;
}
#content {
width:280px;
padding : 5px 5px;
}
#content p {
float: right;
}
#temp {
font-size:25px;
}
JavaScript
/**
* This app using Weather API from http://www.wunderground.com
* and HTML5 Geolocation API
*
* Note:
* Change wu_api_key to your own wunderground.com api key!.
* This app tested on Google Chrome 14 Linux and Firefox 7 Linux.
*
* Author By Equan Pr.
* http://www.junwatu.com
*/
/** change this to your api key */
wu_api_key = '5b7fedc3119f76ea';
wu_base_url = 'http://api.wunderground.com/api';
wu_features = 'geolookup/forecast';
function cuacaku() {
// small javascript library that detects the availability of native implementations for next-generation web technologies such as HTML5 and CSS3
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(get_weather, handle_errors);
} else {
alert("Geolocation Not Supported! ");
}
}
function get_avg_temp(maxTem, minTem){
averageTem=(parseInt(maxTem)+parseInt(minTem))/2;
return averageTem;
}
function get_weather(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
wu_query = latitude + ',' + longitude;
//weather underground request URL format
wu_url = wu_base_url + '/' + wu_api_key + '/' + wu_features + '/q/' + wu_query + '.json';
console.log('URL Query: ' + wu_url);
$.ajax({
url: wu_url,
dataType: "jsonp",
success: function(parsed_json) {
console.log(parsed_json);
var location = parsed_json['location']['city'];
var country = parsed_json['location']['country'];
var wuurl = parsed_json['location']['wuiurl'];
//simple forecast day 0 - Today
var wu = parsed_json['forecast']['simpleforecast']['forecastday'][0];
//simple forecast day 1 - Tomorrow
var wu_tom = parsed_json['forecast']['simpleforecast']['forecastday'][1];
//simple forecast day 2 - After Tomorrow
var wu_after_tom =...