Wunderground APIv2

In this example below you will see how to do a Wunderground APIv2 with some HTML / CSS and Javascript

Nothing special. Just practicing. wunderground weather api, javascript clock, ipinfo.io ip address grab,

Thumbnail
This awesome code was written by mmj, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mmj ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Wunderground APIv2</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container-fluid">
	<div class="row">
		<div class=".col-xs-12 .col-sm-12 .col-lg-12"> 
			<div class = "align_that_stuff">
				<img id="bk_fd_img" src="http://lorempixel.com/1100/800/nature" />
				<span id="dayOfWeek"></span> <span id="tickingTime"></span><br> <span id="ipinfo"></span>
				<div id="wunderground_div"></div>
				<div id="wu_10day"> </div>
			</div>
		</div>
	</div>
	<div class="clearfix visible-xs-block"></div>
	<div class="row">
		<div class=".col-xs-12 .col-sm-12 .col-lg-12">
			
			<span id="observation_time"></span> | 
			
			<span class="glyphicon glyphicon-eject"></span> <a href="https://github.com/0mj"> github</a> | <a href="//twitter.com/mmjamison/"><i class="fa fa-twitter" id="spintastic"></i> MMJamison </a>
			
		</div> 
		
		<footer class="footer"></footer>
	</div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mmj/wunderground-apiv2-jqEQzy */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Oswald);
/* #demo {
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
    font-size: 35px;
    letter-spacing: -2px;
    line-height: 1;
    margin: 0 0 15px;
    font-family: museo-slab, Georgia, "Times New Roman", Times, serif;
	border:1px red solid;
} */

#ipinfo{
/* 	color:red; */
/* 	font-family: 'Open Sans', sans-serif; */
	font-family: 'Oswald', sans-serif;
	font-size: 30px;
	margin:10px;
/* 	border:1px red solid; */
}
#wu_10day img{
		padding: 10px;
	margin:10px;
/* 	border:1px red solid; */
}

#wunderground_div{
	padding:10px;
	margin:10px;
/* 	border:1px red solid; */
}
.align_that_stuff{
	padding: 15px;
	width: 80%;
	height: 50%;
	margin: 10 auto;
	height: 820px;
	
}

#dayOfWeek {
	padding: 15px;
	width: 80%;
	height: 50%;
	margin: 10 auto;
	height: 800px;
}

#bk_fd_img{
	opacity: 0.4;
	filter: alpha(opacity=40);
	position: absolute;
/* 	left: 0px; */
/* 	top: 0px; */
	z-index: -1;
/* 	margin: 0 auto; */
}
body {
	/*do some linear gradient shiz */
	background: -webkit-gradient(
  linear, left bottom, from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)), color-stop(.5,#333333);
}

#flickr {
    height: 100px;
    float: left;
  }


#fa_spock {
    font-size: 20px;

}
#spintastic{
  font-size: 20px;
}

#countdown {
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
    font-size: 10px;
    letter-spacing: -2px;
    line-height: 1;
    margin: 0 0 15px;
    font-family: museo-slab, Georgia, "Times New Roman", Times, serif;
    
    color:green;
    text-shadow: 4px 3px 0px #9AA5A1, 9px 8px 0px rgba(0, 0, 0, 0.15);
}



/*jquery ui*/
.toggler { width: 500px; height: 200px; }
#str-button { padding: .5em 1em; text-decoration: none; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }

/*Downloaded from https://www.codeseek.co/mmj/wunderground-apiv2-jqEQzy */

// https://gist.github.com/CalebGrove/c285a9510948b633aa47.js
// USAGE:
// abbrState('ny', 'name');
// --> 'New York'
// abbrState('New York', 'abbr');
// --> 'NY'
function abbrState(input, to){
    
    var states = [
        ['Arizona', 'AZ'],
        ['Alabama', 'AL'],
        ['Alaska', 'AK'],
        ['Arizona', 'AZ'],
        ['Arkansas', 'AR'],
        ['California', 'CA'],
        ['Colorado', 'CO'],
        ['Connecticut', 'CT'],
        ['Delaware', 'DE'],
        ['Florida', 'FL'],
        ['Georgia', 'GA'],
        ['Hawaii', 'HI'],
        ['Idaho', 'ID'],
        ['Illinois', 'IL'],
        ['Indiana', 'IN'],
        ['Iowa', 'IA'],
        ['Kansas', 'KS'],
        ['Kentucky', 'KY'],
        ['Kentucky', 'KY'],
        ['Louisiana', 'LA'],
        ['Maine', 'ME'],
        ['Maryland', 'MD'],
        ['Massachusetts', 'MA'],
        ['Michigan', 'MI'],
        ['Minnesota', 'MN'],
        ['Mississippi', 'MS'],
        ['Missouri', 'MO'],
        ['Montana', 'MT'],
        ['Nebraska', 'NE'],
        ['Nevada', 'NV'],
        ['New Hampshire', 'NH'],
        ['New Jersey', 'NJ'],
        ['New Mexico', 'NM'],
        ['New York', 'NY'],
        ['North Carolina', 'NC'],
        ['North Dakota', 'ND'],
        ['Ohio', 'OH'],
        ['Oklahoma', 'OK'],
        ['Oregon', 'OR'],
        ['Pennsylvania', 'PA'],
        ['Rhode Island', 'RI'],
        ['South Carolina', 'SC'],
        ['South Dakota', 'SD'],
        ['Tennessee', 'TN'],
        ['Texas', 'TX'],
        ['Utah', 'UT'],
        ['Vermont', 'VT'],
        ['Virginia', 'VA'],
        ['Washington', 'WA'],
        ['West Virginia', 'WV'],
        ['Wisconsin', 'WI'],
        ['Wyoming', 'WY'],
    ];

    if (to == 'abbr'){
        input = input.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
        for(i = 0; i < states.length; i++){
            if(states[i][0] == input){
                return(states[i][1]);
            }
        }    
    } else if (to == 'name'){
        input = input.toUpperCase();
        for(i = 0; i < states.length; i++){
            if(states[i][1] == input){
                return(states[i][0]);
            }
        }    
    }
}

//string replace 
function myFunction() {
    var str = document.getElementById("string-replace-demo").innerHTML; 
    var res = str.replace(/[TZ+]/g, " ");
  //str.replace(/(x|y)/i,"W3Schools");
    document.getElementById("string-replace-demo").innerHTML = res;
};



var day;
switch (new Date().getDay()) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
        break;
    case 2:
        day = "Tuesday";
        break;
    case 3:
        day = "Wednesday";
        break;
    case 4:
        day = "Thursday";
        break;
    case 5:
        day = "Friday";
        break;
    case  6:
        day = "Saturday";
        break;
}
document.getElementById("dayOfWeek").innerHTML = day;



/* clock */
  function startTime() {
      var today=new Date();
      var h=today.getHours();
      var m=today.getMinutes();
      var s=today.getSeconds();
      m = checkTime(m);
      s = checkTime(s);
      document.getElementById('tickingTime').innerHTML = h+":"+m+":"+s;
      var t = setTimeout(function(){startTime()},500);
  }

  function checkTime(i) {
      if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
      return i;
  }


function forecast(stateAbrv, cityname){
  $.get("http://api.wunderground.com/api/a42738d57e012c83/forecast10day/q/" + stateAbrv + "/" + cityname +".json",  function(parsed_json) {
      var simpleforecast = parsed_json.forecast.simpleforecast.forecastday;
      var tempHtml = '';
      var i = 1;
      while (i <= 2) {
          var iconUrl    = simpleforecast[i].icon_url;
          var weekDay    = simpleforecast[i].date.weekday;
          var conditions    = simpleforecast[i].conditions;
          var high  = simpleforecast[i].high.fahrenheit;
          var low  = simpleforecast[i].low.fahrenheit;
          tempHtml += "<img src='"+ iconUrl +"' class='weather_today'/>" +  weekDay + " High:" + high + " Low: " + low + "<br>";
        i++; //i+=2;
      } 
     $('#wu_10day').html(tempHtml);
  });
}

function weatherFromIP(){
	/*ipinfo*/
	$.get("http://ipinfo.io", function(r) { 
		var stateAbrv = abbrState(r.region, 'abbr');
		// var usersIP = r.city + ' ' + r.region + ' ' + r.ip;
		var usersIP = r.city + ' ' + r.region;
		$('#ipinfo').html(usersIP);
		weather(stateAbrv, r.city);
		forecast(stateAbrv, r.city);
	}, "jsonp");
	/*ipinfo end*/
	
};




function weather(stateAbrv, city){
  $.get("http://api.wunderground.com/api/a42738d57e012c83/geolookup/conditions/q/" + stateAbrv + "/" + city + ".json",  function(parsed_json) {
      var obsv = parsed_json.current_observation;
      var loc = parsed_json.location;
      var location           = loc.city;
      var iconUrl            = obsv.icon_url;
      var temp_f             = obsv.temp_f;
      var observation_time   = obsv.observation_time;
      var relative_humidity  = obsv.relative_humidity;
      var wind_string        = obsv.wind_string;
      var wuiurl             = loc.wuiurl;
      var forecast_url       = obsv.forecast_url;
      var history_url        = obsv.history_url;
      var ob_url             = obsv.ob_url;
      var tempHtml = "<img src='"+iconUrl+"'/> " + temp_f + "┬░";
    $('#observation_time').html(observation_time);
      $('#wunderground_div').html(tempHtml);
      if(temp_f >= 50){
        // $('#wunderground_div').addclass(.highlight_or_something);
      }
  });

}




function rndm_lorempixel(){
    var lorempixel=new Array()
    
    lorempixel[1]="abstract"
    lorempixel[2]="animals"
    lorempixel[3]="business"
    lorempixel[4]="cats"
    lorempixel[5]="city"
    lorempixel[6]="food"
    lorempixel[7]="nightlife"
    lorempixel[8]="fashion"
    lorempixel[9]="people"
    lorempixel[10]="nature"
    lorempixel[11]="sports"
    lorempixel[12]="technics"
    lorempixel[13]="transport"

    var ry=Math.floor(Math.random()*lorempixel.length)
    if (ry==0)
    ry=1
    
    tempHtml = ('<img class="img-rounded img-circle" src="http://lorempixel.com/180/180/'+lorempixel[ry]+'" border=0>')

    $('#lorempixel').html(tempHtml);
}


 jQuery(document).ready(function() {    
   startTime();        
	weatherFromIP(); 
  	rndm_lorempixel();
 });

Comments