Digital Weathervane / Javascript API

For my final javascript I used the Weather Underground API.  I made a simple interface with a square and circle that act as a desktop weathervane.  The API loads with the current weather wind direction and rotates to point to the current direction.  It maps the directional degrees from weather underground to the North, East, South and West of the circle as the viewer is looking at it.  It also uses jquery to pull the exact degrees and weather speed to display it in the center of the circle.

My goal was to translate something you normally find outside and on the tops of buildings directly to my computer screen.  I also wanted to incorporate abstract shapes and colors to re-imagine a digital version of traditional weather tools.

Here is the link to the digital weathervane:


Here is the code:


<!doctype html><!doctype html><html lang=”en”><head> <meta charset=”UTF-8″ /> <title>Lauren’s Wind Widget</title> <link rel=”stylesheet” type=”text/css” href=”style/style.css”>
<div class=”wind-widget”> <div id=”direction-square”></div> <div class=”center-circle”> <div class=”display-text”> <p class=”wind-direction”>0&deg; North</p> <p class=”wind-speed”>0 mph</p> </div> </div> </div>

<script src=””></script> <script src=””></script>   <script type=”text/javascript” src=”js/main.js”></script>


var city = “”;
var state = “”;
var APIKey = “a149b63896133c0c”;

var loadWeather = function(response){


var thisCity =;
var weather =;
var windDegrees = response.current_observation.wind_degrees;
var windSpeed = response.current_observation.wind_mph;
var windDirection = response.current_observation.wind_dir;

console.log(‘Wind degrees’, windDegrees);
console.log(‘Wind speed’, windSpeed);

$(“.wind-direction”).html(windDegrees + ‘&deg; ‘ + windDirection);
$(“.wind-speed”).html(windSpeed + ‘ mph’);

$(‘#direction-square’).css(‘transform’, ‘rotate(‘+(windDegrees-135)+’deg)’);

var getWeather = function(){

var thisURL = ‘’ + APIKey + ‘/conditions/q/NY/New_York.json’;

url: thisURL,
dataType: “jsonp”,
success: function(response){ // if it succeeds, call function response, and then pass the value to loadWeather

function init() {
// Get weather data every 10 seconds
setInterval(getWeather, 30000);


$(document).ready(function(){ //listens for all html and then runs javascript



.wind-widget { height: 500px; width: 500px; position: absolute; left: 50%; margin-left: -250px; top: 50%; margin-top: -250px; border-radius: 50%; border: 5px solid #eee;}
#direction-square { position: absolute; top: 250px; left: 250px; height: 200px; width: 200px; background-color: #351330; transition: transform 1000ms; transform-origin: 0% 0%; transform: rotate(-135deg);}
.center-circle { position: absolute; top: 250px; left: 250px; height: 200px; width: 200px; margin-left: -100px; margin-top: -100px; border-radius: 50%; background-color: #FE4365;}
.display-text { padding-top: 70px;}
.display-text p { text-align: center; color: white; font-family: Helvetica, sans-serif; font-weight: bold; font-size: 24px; margin: 0 0 5px;}



Leave a reply:

Site Footer