Local Weather

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Local Weather</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

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

  
</head>

<body>

  <div class="container-fluid">
  <h1 class="text-center">The Local Weather &trade;</h1>

  <h1 id="weather"> Current Weather </h1>
<!--   <h4 class="" id="weather"> Current Weather </h4> -->


  <div class="icon sun-shower" id="sun-shower">
    <div class="cloud"></div>
    <div class="sun">
      <div class="rays"></div>
    </div>
    <div class="rain"></div>
  </div>

  <div class="icon thunder-storm" id="thunder-storm">
    <div class="cloud"></div>
    <div class="lightning">
      <div class="bolt"></div>
      <div class="bolt"></div>
    </div>
  </div>

  <div class="icon cloudy" id="cloudy">
    <div class="cloud"></div>
    <div class="cloud"></div>
  </div>

  <div class="icon flurries" id="flurries">
    <div class="cloud"></div>
    <div class="snow">
      <div class="flake"></div>
      <div class="flake"></div>
    </div>
  </div>

  <div class="icon sunny" id="sunny">
    <div class="sun">
      <div class="rays"></div>
    </div>
  </div>

  <div class="icon rainy" id="rainy">
    <div class="cloud"></div>
    <div class="rain"></div>
  </div>


  <h1 id="city"> Johnstown, PA</h1>
  <h1 id="temp">number  &#176;</h1>
  


<!--   <button class="btn btn-primary" id="zip">Click Me ! </button> -->



<div class="footer">

  <p class="text-center"><a href="https://codepen.io/joshbader/pen/EjXgqr" target="_blank">Animated Icons by Josh Bader</a> </p>
</div>

</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/local-weather-VaNBwE */
.container-fluid {
  min-height: 500px;
/*   background-image: url(); */
}

html {
  box-sizing: border-box;
}

html *,
html *:before,
html *:after {
  box-sizing: inherit;
}

body {
  font-family: 'Montserrat', sans-serif;
  padding-top: 5px;
  background: rgb(128, 128, 128);
  text-align: center;
  background-color: currentColor;
}

h1 {
  color: #fff;
  font-weight: 100;
  font-size: 2em;
}

p,
a {
  color: rgba(255, 255, 255, 0.3);
  font-size: small;
}

p {
  margin: 1.375rem 0;
}

.icon {
  position: relative;
  display: inline-block;
  width: 12em;
  height: 10em;
  font-size: 1em;
  /* control icon size here */
}

.cloud {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 3.6875em;
  height: 3.6875em;
  margin: -1.84375em;
  background: currentColor;
  border-radius: 50%;
  box-shadow: -2.1875em 0.6875em 0 -0.6875em, 2.0625em 0.9375em 0 -0.9375em, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff;
}

.cloud:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -0.5em;
  display: block;
  width: 4.5625em;
  height: 1em;
  background: currentColor;
  box-shadow: 0 0.4375em 0 -0.0625em #fff;
}

.cloud:nth-child(2) {
  z-index: 0;
  background: #fff;
  box-shadow: -2.1875em 0.6875em 0 -0.6875em #fff, 2.0625em 0.9375em 0 -0.9375em #fff, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff;
  opacity: 0.3;
  transform: scale(0.5) translate(6em, -3em);
  animation: cloud 4s linear infinite;
}

.cloud:nth-child(2):after {
  background: #fff;
}

.sun {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5em;
  height: 2.5em;
  margin: -1.25em;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 0.375em #fff;
  animation: spin 12s infinite linear;
}

.rays {
  position: absolute;
  top: -2em;
  left: 50%;
  display: block;
  width: 0.375em;
  height: 1.125em;
  margin-left: -0.1875em;
  background: #fff;
  border-radius: 0.25em;
  box-shadow: 0 5.375em #fff;
}

.rays:before,
.rays:after {
  content: '';
  position: absolute;
  top: 0em;
  left: 0em;
  display: block;
  width: 0.375em;
  height: 1.125em;
  transform: rotate(60deg);
  transform-origin: 50% 3.25em;
  background: #fff;
  border-radius: 0.25em;
  box-shadow: 0 5.375em #fff;
}

.rays:before {
  transform: rotate(120deg);
}

.cloud + .sun {
  margin: -2em 1em;
}

.rain,
.lightning,
.snow {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 3.75em;
  height: 3.75em;
  margin: 0.375em 0 0 -2em;
  background: currentColor;
}

.rain:after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 1.125em;
  height: 1.125em;
  margin: -1em 0 0 -0.25em;
  background: #0cf;
  border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
  box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
  transform: rotate(-28deg);
  animation: rain 3s linear infinite;
}

.bolt {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.25em 0 0 -0.125em;
  color: #fff;
  opacity: 0.3;
  animation: lightning 2s linear infinite;
}

.bolt:nth-child(2) {
  width: 0.5em;
  height: 0.25em;
  margin: -1.75em 0 0 -1.875em;
  transform: translate(2.5em, 2.25em);
  opacity: 0.2;
  animation: lightning 1.5s linear infinite;
}

.bolt:before,
.bolt:after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  margin: -1.625em 0 0 -1.0125em;
  border-top: 1.25em solid transparent;
  border-right: 0.75em solid;
  border-bottom: 0.75em solid;
  border-left: 0.5em solid transparent;
  transform: skewX(-10deg);
}

.bolt:after {
  margin: -0.25em 0 0 -0.25em;
  border-top: 0.75em solid;
  border-right: 0.5em solid transparent;
  border-bottom: 1.25em solid transparent;
  border-left: 0.75em solid;
  transform: skewX(-10deg);
}

.bolt:nth-child(2):before {
  margin: -0.75em 0 0 -0.5em;
  border-top: 0.625em solid transparent;
  border-right: 0.375em solid;
  border-bottom: 0.375em solid;
  border-left: 0.25em solid transparent;
}

.bolt:nth-child(2):after {
  margin: -0.125em 0 0 -0.125em;
  border-top: 0.375em solid;
  border-right: 0.25em solid transparent;
  border-bottom: 0.625em solid transparent;
  border-left: 0.375em solid;
}

.flake:before,
.flake:after {
  content: '\2744';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1.025em 0 0 -1.0125em;
  color: #fff;
  list-height: 1em;
  opacity: 0.2;
  animation: spin 8s linear infinite reverse;
}

.flake:after {
  margin: 0.125em 0 0 -1em;
  font-size: 1.5em;
  opacity: 0.4;
  animation: spin 14s linear infinite;
}

.flake:nth-child(2):before {
  margin: -0.5em 0 0 0.25em;
  font-size: 1.25em;
  opacity: 0.2;
  animation: spin 10s linear infinite;
}

.flake:nth-child(2):after {
  margin: 0.375em 0 0 0.125em;
  font-size: 2em;
  opacity: 0.4;
  animation: spin 16s linear infinite reverse;
}


/* Animations */

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes cloud {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: scale(0.5) translate(-200%, -3em);
  }
}

@keyframes rain {
  0% {
    background: #0cf;
    box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 #0cf;
  }
  25% {
    box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em #0cf, -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0.625em 0.875em 0 -0.125em #0cf, -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 #0cf;
  }
}

@keyframes lightning {
  45% {
    color: #fff;
    background: #fff;
    opacity: 0.2;
  }
  50% {
    color: #0cf;
    background: #0cf;
    opacity: 1;
  }
  55% {
    color: #fff;
    background: #fff;
    opacity: 0.2;
  }
}

/*Downloaded from https://www.codeseek.co/captnstarburst/local-weather-VaNBwE */
$(document).ready(function(){
  hideAll();
  getLocation();
});

function hideAll(){
    $("#weather").hide();
    $("#sun-shower").hide();
    $("#thunder-storm").hide();
    $("#cloudy").hide();
    $("#flurries").hide();
    $("#sunny").hide();
    $("#rainy").hide();
    $("#city").hide();
    $("#temp").hide();
  
}

function getLocation(){
  if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(function(position) {
			var lat = position.coords.latitude;
			var lon = position.coords.longitude;
			weatherAPI(lat, lon);
		});
	}
}

function weatherAPI(lat, lon) {
	var site = "https://api.wunderground.com/api/";
	var api = "47b8608d62356a63"
	var con = "/conditions/q/"
	var format = ".json"
	var url = site + api + con + lat + "," + lon + format;	
	
	$.ajax({
		type: 'GET',
		url: url,
		async: false,
		contentType: "application/json",
		dataType: 'jsonp',
		// On success, present local info/weather.
		success: function(jsonResponse) {
			json = jsonResponse;
			var gotLoc = json.current_observation.display_location.city; // Get user location info.
			var gotType = json.current_observation.weather.toUpperCase(); // Get weather description.
			// var gotWeatherIcon = json.current_observation.icon_url; // Get weather icon 'state'.
			gotTempC = Math.round(json.current_observation.temp_c); // Celsius.
			gotTempF = Math.round(json.current_observation.temp_f); // Fahrenheit.
			// degreeUnit = "&degC"; // Set initial unit of measurement.
			// Write content.
      
      $('#city').html(gotLoc);
      $('#city').show();
      
			// userLocation.innerHTML = gotLoc; // Show location.
      
      $('#temp').html(gotTempF + "&#176 F");
      $('#temp').show();
      
      
			// currentTemp.innerHTML = gotTempC; // Show temperature.
			// degreeType.innerHTML = degreeUnit; // Default conversion state as Metric.
			// weatherDesc.innerHTML = gotType; // Show weather status description.
      
      $('#weather').html(gotType);
      $('#weather').show();
      
			// Set icon using callback data.
			getIcon(gotType);
		}
	});
}

function getIcon(weatherIcon){
  // alert(weatherIcon);
  switch(weatherIcon){
    
    case 'LIGHT DRIZZLE':
    case 'LIGHT RAIN':
    case 'LIGHT HAIL':
    case "LIGHT SPRAY":
    case "HEAVY SPRAY":
    case "LIGHT RAIN MIST":
    case "LIGHT RAIN SHOWERS":
    case "LIGHT SMALL HAIL SHOWERS":
    case "LIGHT FREEZING DRIZZLE":
    case "LIGHT FREEZING RAIN":
    case "UNKNOWN PERCIPITATION":
    case "DRIZZLE":
    case "RAIN":  
    case "RAIN SHOWERS":
    case "HAIL SHOWERS":
    case "SMALL HAIL SHOWERS":  
    case "FREEZING RAIN":  
                          $("#rainy").show(); 
                          break;
      
    case 'HEAVY DRIZZLE':
    case 'HEAVY RAIN':
    case 'HEAVY HAIL':
    case "HEAVY RAIN MIST":
    case "HEAVY RAIN SHOWERS":
    case "LIGHT HAIL SHOWERS":
    case "HEAVY HAIL SHOWERS":
    case "HEAVY SMALL HAIL SHOWERS":
    case "LIGHT THUNDERSTORM":
    case "HEAVY THUNDERSTORM":
    case "LIGHT THUNDERSTORMS AND RAIN":
    case "HEAVY THUNDERSTORMS AND RAIN":
    case "LIGHT THUNDERSTORMS AND ICE PELLETS":
    case "HEAVY THUNDERSTORMS AND ICE PELLETS":
    case "LIGHT THUNDERSTORMS WITH HAIL":
    case "HEAVY THUNDERSTORMS WITH HAIL":
    case "LIGHT THUNDERSTORMS WITH SMALL HAIL":
    case "HEAVY THUNDERSTORMS WITH SMALL HAIL":
    case "HEAVY FREEZING DRIZZLE":
    case "HEAVY FREEZING RAIN":
    case "FUNNEL CLOUD":
    case "HAIL":
    case "THUNDERSTORMS":
    case "THUNDERSTORMS AND RAIN":
    case "THUNDERSTORMS AND HAIL":
    case "THUNDERSTORMS WITH SMALL HAIL":  
      
                          $("#thunder-storm").hide();
                          break;
                          
    
    case 'LIGHT SNOW':
    case 'HEAVY SNOW':
    case 'LIGHT SNOW GRAINS':
    case 'HEAVY SNOW GRAINS':
    case 'LIGHT ICE CRYSTALS':
    case 'HEAVY ICE CRYSTALS':
    case 'LIGHT ICE PELLETS':
    case 'HEAVY ICE PELLETS': 
    case "LIGHT LOW DRIFTING SNOW":
    case "HEAVY LOW DRIFTING SNOW":
    case "LIGHT BLOWING SNOW":
    case "HEAVY BLOWING SNOW":
    case "LIGHT SNOW SHOWERS":
    case "HEAVY SNOW SHOWERS":
    case "LIGHT SNOW BLOWING SNOW MIST":
    case "HEAVY SNOW BLOWING SNOW MIST":
    case "LIGHT ICE PELLET SHOWERS":
    case "HEAVY ICE PELLET SHOWERS":
    case "LIGHT THUNDERSTORMS AND SNOW":
    case "HEAVY THUNDERSTORMS AND SNOW":
    case "SQUALLS":  
    case "SNOW":
    case "SNOW GRAINS":
    case "ICE CRYSTALS":
    case "ICE PELLETS":
    case "LOW DRIFTING SNOW":
    case "LOW DRIFTING WIDESPREAD SNOW":
    case "BLOWING SNOW":
    case "SNOW SHOWERS":
    case "SNOW BLOWING SNOW MIST":
    case "ICE PELLETS SHOWERS":
    case "THUNDERSTORMS AND SNOW":
    case "THUNDERSTORMS AND ICE PELLETS":
    case "FREEZING DRIZZLE":
      
                          $("#flurries").show();
                          break;
   
    case 'LIGHT MIST':
    case 'HEAVY MIST':
    case 'LIGHT FOG':
    case 'HEAVY FOG':
    case 'LIGHT FOG PATCHES':
    case 'HEAVY FOG PATCHES':
    case "LIGHT SMOKE":
    case "HEAVY SMOKE":
    case "LIGHT VOLCANIC ASH":
    case "HEAVY VOLCANIC ASH":
    case "LIGHT WIDESPREAD DUST":
    case "HEAVY WIDESPREAD DUST":
    case "LIGHT SAND":
    case "HEAVY SAND":
    case "LIGHT HAZE":
    case "HEAVY HAZE":
    case "LIGHT DUST WHIRLS":
    case "HEAVY DUST WHIRLS":
    case "LIGHT SANDSTORM":
    case "HEAVY SANDSTORM":
    case "LIGHT LOW DRIFTING WIDESPREAD DUST":
    case "HEAVY LOW DRIFTING WIDESPREAD DUST":
    case "LIGHT LOW DRIFTING SAND":
    case "HEAVY LOW DRIFTING SAND":
    case "LIGHT BLOWING WIDESPREAD DUST":
    case "HEAVY BLOWING WIDESPREAD DUST":
    case "LIGHT BLOWING SAND":
    case "HEAVY BLOWING SAND":
    case "LIGHT FREEZING FOG":
    case "HEAVY FREEZING FOG":
    case "PATCHES OF FOG":
    case "SHALLOW FOG":
    case "PARTIAL FOG":
    case "OVERCAST":
    case "MOSTLY CLOUDY":  
    case "SMALL HAIL":
    case "MIST":
    case "FOG":
    case "FOG PATCHES":
    case "SMOKE":
    case "VOLCANIC ASH":
    case "WIDESPREAD DUST":
    case "SAND":
    case "HAZE":
    case "DUST WHIRLS":
    case "SANDSTORM":  
    case "LOW DRIFTING SAND":
    case "BLOWING WIDESPREAD DUST":
    case "BLOWING SAND":
    case "FREEZING FOG":  
                          $("#cloudy").show();
                          break;
      
    case "CLEAR":
    case "UNKOWN":  
                          $("#sunny").show();
                          break;
      
    case "PARTLY CLOUDY":
    case "SCATTERED CLOUDS":
    case "SPRAY":  
    case "RAIN MIST":
      
                          $("#sun-shower").show();
                          break;
       
    case "default":
                      $("#sunny").show();
                      break;  
  }
}

Comments