Display Local Weather [FCC]

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Display Local Weather [FCC]</title>
  <link href="https://fonts.googleapis.com/css?family=Julius+Sans+One" rel="stylesheet">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="weather-pane">
  <h1 id="title">Current Weather</h1>
  <div id="city-state"></div>
  <div id="tempurature">
    <span id="tempurature-num"></span>&deg;
    <span id="tempurature-units"</span>
  </div>
  <!-- These icons are built in CSS, and they were created here: https://codepen.io/joshbader/pen/EjXgqr -->
  <div class="icon sun-shower">
    <div class="cloud"></div>
    <div class="sun">
      <div class="rays"></div>
    </div>
    <div class="rain"></div>
  </div>
  
  <div class="icon thunder-storm">
    <div class="cloud"></div>
    <div class="lightning">
      <div class="bolt"></div>
      <div class="bolt"></div>
    </div>
  </div>

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

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

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

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

  <div id="conditions"></div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/awmottaz/display-local-weather-fcc-aBbRrK */
body {
  background-color: currentColor;
  color: #0E0B1C;
  font-family: 'Julius Sans One', sans-serif;
}
#title,
#city-state,
#tempurature,
#conditions{
  color: white;
  text-align: center;
}

#title {
  font-size: 70px;
  margin: 0 0 10px 0;
}
#city-state {
  font-size: 30px;
  margin-bottom: 1em;
}
#tempurature {
  font-size: 50px;
}
#tempurature-units {
  color: yellow;
  cursor: pointer;
}
#conditions {
  font-size: 20px;
}

/*
The following CSS creates the weather icons.
This was taken from another CodePen:
https://codepen.io/joshbader/pen/EjXgqr
*/

.icon {
  position: relative;
  left: calc(50% - 6em); /* centered */
  display: none;
  width: 12em;
  height: 10em;
  font-size: 2em; /* 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/awmottaz/display-local-weather-fcc-aBbRrK */
var _APIKEY = "817060def8cbb6a5823e0421efd05c26";
var zip = "00000";
var city = "Unknown City";
var state = "Unknown State";
var temp = [0,0]; //[celsius, fahrenheit]
var tempUnits = ["C", "F"];
var unitsCode = 0; // 0=C, 1=F
var conditions = "Unknown Conditions";
var conditionID = 100;

function updateWeather() {
  var weatherGetRequestData = "zip=" + zip + ",us&APPID=" + _APIKEY;
  $.getJSON('http://api.openweathermap.org/data/2.5/weather?' + weatherGetRequestData, function(weatherData) {
    console.log(weatherData);
    temp[0] = Math.floor(weatherData.main.temp - 273.15); // celsius
    temp[1] = Math.floor(weatherData.main.temp * 9 / 5 - 459.67); // fahrenheit
    conditions = weatherData.weather[0].description;
    conditionID = weatherData.weather[0].id;
    console.log(conditions);
  }).done(displayWeather);
}

function displayWeather() {
  $("#city-state").html(city + ", " + state);
  $("#tempurature-num").html(temp[unitsCode]);
  $("#tempurature-units").html(tempUnits[unitsCode]);
  $("#conditions").html(conditions);
  showConditionIcon(conditionID);
}

function showConditionIcon(ID) {
  $(".icon").hide();
  if (ID < 300) {
    $(".thunder-storm").show();
  } else if (ID < 600) {
    $(".rainy").show();
  } else if (ID < 700) {
    $(".flurries").show();
  } else if (ID == 800) {
    $(".sunny").show();
  } else if (ID < 900) {
    $(".cloudy").show();
  }
}

function toggleTempUnits() {
  unitsCode = (unitsCode + 1) % 2;
  displayWeather();
}

$(document).ready(function() {
  $.getJSON('http://ipinfo.io', function(ipData){
    console.log(ipData);
    zip = ipData.postal;
    city = ipData.city;
    state = ipData.region;
  }).done(updateWeather);
  
  $("#tempurature-units").click(toggleTempUnits);
});

Comments