JSFiddle - React, Tailwind, and code Playground

by guyluchenbill

HTML

<div id="weather"></div>

CSS

body {
  background: #eee;
  font-family: calibri;

}

#weather {
  width: 300px;
  margin: 30px auto;
  padding: 5px 10px;
  
}

#weather h2, #weather h3 {
  color: #1b1b1b;
  font-size: 1.0em;
}

#weather p {
  font-size: 80px;
  margin: 40px 0 0;
  line-height: .85;
  color: #000;
  font-weight: bold;
  font-family: helvetica;
}

#weather p span {
  font-size: 16px;
  color: #1b1b1b;
}

#weather a {
  display: block;
  clear: both;
  text-decoration: none;
  color: #222;
  font-size: 12px;
  border: 0;
}

#weather a:hover {
  color: #000;
  text-decoration: underline;
  border: 0;
}

img {
  margin-left: -130px
}

JavaScript

function retrieve_zip(callback)
{
	try { if(!google) { google = 0; } } catch(err) { google = 0; } // Stupid Exceptions
	if(navigator.geolocation) // FireFox/HTML5 GeoLocation
	{
		navigator.geolocation.getCurrentPosition(function(position)
		{
			zip_from_latlng(position.coords.latitude,position.coords.longitude,callback);
		});
	}
  
	else if(google && google.gears) // Google Gears GeoLocation
	{
		var geloc = google.gears.factory.create('beta.geolocation');
		geloc.getPermission();
		geloc.getCurrentPosition(function(position)
		{
			zip_from_latlng(position.latitude,position.longitude,callback);
		},function(err){});
	}
}
function zip_from_latlng(latitude,longitude,callback)
{
	// Setup the Script using Geonames.org's WebService
		var script = document.createElement("script");
		script.src = "http://ws.geonames.org/findNearbyPostalCodesJSON?lat=" + latitude + "&lng=" + longitude + "&callback=" + callback;
	// Run the Script
		document.getElementsByTagName("head")[0].appendChild(script);
}
function example_callback(json)
{
	// Now we have the data!  If you want to just assume it's the 'closest' zipcode, we have that below:
	zip = json.postalCodes[0].postalCode;
	alert(zip);
}
retrieve_zip("example_callback"); // Alert the User's Zipcode



$.simpleWeather({
    zipcode: '02118',
    unit: 'f',
    success: function(weather) {
        html = '<h2>Right now in fucking '+weather.city+', '+weather.region+'...</h2>';
      html += '<img style="float:left;" width="125px" src="http://f.cl.ly/items/3f2C2x2P1J0W0s39051z/noun_project_2636.svg">';
        html += '<p>It\'s fucking '+weather.temp+'&deg; '+weather.units.temp+'<br /><span>And fucking '+weather.currently+'</span></p>';
        html += '<h3>High: goddamn '+weather.high+'&deg;<br/>Low: goddamn '+weather.low+'&deg;</h3>';

        $("#weather").html(html);
    },
    error: function(error) {
        $("#weather").html('<p>'+error+'</p>');
    }
});