FreeCodeCamp: Show the Local Weather

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>FreeCodeCamp: Show the Local Weather</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>

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

  
</head>

<body>

  <h1 class="text-center">Free C<i class="glyphicon-cloud"></i>de Camp</h1>
<h2 class="text-center">Weather App</h2>
<h3 class="text-center" id="data"></h3>
<h3 class="text-center" id="city"></h3>
<h3 class="text-center" id="weatherF">&nbsp;&deg;<a href='#' id='Flink'>F</a></h3>
<h3 class="text-center" id="weatherC">&nbsp;&deg;<a href='#' id='Clink'>C</a></h3>
<h3 class="text-center" id="condition"></h3>
<section class="forecast-board">

  
  <ul class="list">
    <li class="weather">
      <p class="weather__icon weather__icon-sun"></p>
    </li>
    <li class="weather">
      <p class="weather__icon weather__icon-cloud"></p>
    </li>
    <li class="weather mix">
      <p class="weather__icon weather__icon-sun"></p>
      <p class="weather__icon weather__icon-cloud"></p>
    </li>
    <li class="weather">
      <p class="weather__icon weather__icon-cloud"></p>
      <p class="weather__icon weather__icon-rain">
        <span class="waterdrop drop-1"></span>
        <span class="waterdrop drop-2"></span>
        <span class="waterdrop drop-3"></span>
        <span class="waterdrop drop-4"></span>
      </p>      
    </li>
    <li class="weather">
      <p class="weather__icon weather__icon-cloud"></p>
      <p class="weather__icon weather__icon-snow">
        <span class="snowdrop drop-1"></span>
        <span class="snowdrop drop-2"></span>
        <span class="snowdrop drop-3"></span>
        <span class="snowdrop drop-4"></span>
      </p>      
    </li>
    <li class="weather">
      <p class="weather__icon weather__icon-cloud lightning"></p>
      <p class="weather__icon weather__icon-bolt">
        <span class="bolt bolt-1"></span>
        <span class="bolt bolt-2"></span>
      </p>      
    </li>
    
</section>
<footer>
  <p class="text-center">Inspired by <a href="https://codepen.io/flik185/pen/WrPzYx">Simone Viani</a></p>
</footer>
  <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/lalov1/freecodecamp-show-the-local-weather-GZVVVo */
@import url(https://fonts.googleapis.com/css?family=Jura:400,300,600);
/* Vars */
body {
  background: #1d1c2f;
  color: white;
  margin: 0;
  padding: 0;
}

h1, h2 {
  font-size: 4em;
}

.glyphicon-cloud {
  padding: 0 10px 0 0;
}

footer {
  clear: both;
}

#weatherC {
  display: none;
}

#weatherIcon {
  font-family: "Jura";
}

.title {
  padding-top: 40px;
  font-size: 40px;
  line-height: 70px;
  color: #f1f1f1;
  font-weight: 200;
  text-align: center;
}

.forecast-board {
  margin: 0 auto;
  max-width: 200px;
}

.list {
  position: relative;
  height: 80px;
  padding-top: 10px;
  list-style-type: none;
  /* position li */
}
.list .weather {
  text-align: center;
  height: 200px;
  float: left;
  margin-left: 30px;
}
.list .weather:last-child {
  margin-right: 0;
}
.list .weather.mix p:nth-child(2) {
  transform: translate3d(-60px, 0, 0);
}
.list li:nth-child(1) {
  display: none;
}
.list li:nth-child(2) {
  display: none;
}
.list li:nth-child(3) {
  display: none;
}
.list li:nth-child(4) {
  display: none;
}
.list li:nth-child(5) {
  display: none;
}
.list li:nth-child(6) {
  display: none;
}

.weather__icon {
  display: inline-block;
  margin: 0px;
  position: relative;
  border-radius: 2px;
}
.weather__icon:before, .weather__icon:after {
  border-radius: 2px;
}

.weather__icon-sun {
  width: 60px;
  height: 60px;
  padding: 12px;
  border-radius: 50%;
  background: #ffcc00;
  border: 1px dashed #665200;
  background-clip: content-box;
  animation: rotaty 10s infinite forwards linear;
}

.weather__icon-cloud {
  width: 60px;
  height: 60px;
  background: #f1f1f1;
  opacity: 0.98;
  position: relative;
  z-index: 0;
}
.weather__icon-cloud.lightning {
  background: #585858;
  animation: lightning 1.6s infinite alternate;
}
.weather__icon-cloud.lightning:before {
  background: #bebebe;
}
.weather__icon-cloud.lightning:after {
  background: #7e7e7e;
  animation: lightning .6s infinite alternate linear;
}
.weather__icon-cloud:before {
  content: '';
  z-index: -1;
  position: absolute;
  top: -10px;
  left: 30px;
  width: 45px;
  height: 45px;
  background: #d8d8d8;
  opacity: 1;
  animation: floaty 1s infinite alternate linear;
}
.weather__icon-cloud:after {
  content: '';
  position: absolute;
  z-index: 2;
  bottom: -10px;
  left: 10px;
  width: 75px;
  height: 50px;
  opacity: 1;
  background: white;
  animation: floaty 2s infinite alternate cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

.weather__icon-rain .waterdrop {
  width: 2px;
  height: 8px;
  position: absolute;
  top: 15px;
  background: #b8c5fc;
  z-index: -1;
}
.weather__icon-rain .drop-1 {
  right: 10px;
  animation: rainy 0.4s infinite alternate cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
.weather__icon-rain .drop-2 {
  right: 20px;
  animation: rainy 0.8s infinite alternate cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
.weather__icon-rain .drop-3 {
  right: 30px;
  animation: rainy 1.2s infinite alternate cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
.weather__icon-rain .drop-4 {
  right: 40px;
  animation: rainy 1.6s infinite alternate cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

.weather__icon-snow .snowdrop {
  width: 2px;
  height: 2px;
  position: absolute;
  top: 15px;
  background: #fff;
  z-index: -1;
}
.weather__icon-snow .snowdrop:after {
  content: '';
  width: 2px;
  height: 2px;
  position: absolute;
  top: 5px;
  right: 5px;
  background: #fff;
  animation: snowy 1.4s infinite alternate ease;
}
.weather__icon-snow .drop-1 {
  right: 10px;
  animation: snowy 1.2s infinite alternate cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
.weather__icon-snow .drop-2 {
  right: 20px;
  animation: snowy 2.4s infinite alternate cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
.weather__icon-snow .drop-3 {
  right: 30px;
  animation: snowy 3.6s infinite alternate cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
.weather__icon-snow .drop-4 {
  right: 40px;
  animation: snowy 4.8s infinite alternate cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

.weather__icon-bolt .bolt {
  width: 0;
  height: 0;
  position: absolute;
  border-bottom: 17px solid #ffe066;
  border-left: 6px solid transparent;
  animation: flash 0.4s infinite alternate linear;
}
.weather__icon-bolt .bolt-1 {
  transform: rotate(0deg) skew(-5deg, -10deg);
  top: 13px;
  left: -35px;
}
.weather__icon-bolt .bolt-2 {
  transform: rotate(180deg) skew(-5deg, -10deg);
  top: 20px;
  left: -30px;
}

@keyframes floaty {
  100% {
    transform: translate3d(-4px, 0, 0);
  }
}
@keyframes rotaty {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rainy {
  100% {
    transform: translate3d(0, 4px, 0);
  }
}
@keyframes snowy {
  100% {
    transform: translate3d(0, -2px, 0);
  }
}
@keyframes lightning {
  50% {
    background: #e4e4e4;
  }
}
@keyframes flash {
  100% {
    border-bottom: 17px solid #997a00;
  }
}


/*Downloaded from https://www.codeseek.co/lalov1/freecodecamp-show-the-local-weather-GZVVVo */
$(document).ready(function(){
  
  $("a#Flink").click(function(){
    $("#weatherF").hide();
    $("#weatherC").show();
  });
  
  $("a#Clink").click(function(){
    $("#weatherC").hide();
    $("#weatherF").show();
  });
  
  if (!navigator.geolocation){
    $("#city").html("Geolocation is not supported by your browser");  
  }else{
    
    
  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    //$("#city").html("Latitude is: " + latitude + " Longitude is: " + longitude);
    
    var url = 'https://api.wunderground.com/api/a055897beb33aee2/geolookup/q/'+ latitude + ',' + longitude + '.json';
    
    //console.log(url);
    
    $.getJSON(url, function(object) {
      var city = object.location.city;
      var country = object.location.country;     
      var state = object.location.state;
      
      $("#city").html(city + ", " + country);
      
      var url = 'https://api.wunderground.com/api/a055897beb33aee2/conditions/q/'+ state + '/' + city + '.json';
    
    console.log(url);
    
    $.getJSON(url, function(object) {
      var temp_f = object.current_observation.temp_f;
      var temp_c = object.current_observation.temp_c;
      var condition = object.current_observation.weather;
      
      $("#weatherF").prepend(temp_f);
      $("#weatherC").prepend(temp_c).hide();
      $("#condition").html(condition);
      
      switch(condition){
        case "Sunny":
        case "Clear":
          $(".list li:nth-child(1)").show();
          break;
        case "Overcast":
          $(".list li:nth-child(2)").show();
          break;
        case "Partly Cloudy":
          $(".list li:nth-child(3)").show();
          break;
        case "Raining":
          $(".list li:nth-child(4)").show();
          break;
        case "Snowing":
          $(".list li:nth-child(5)").show();
          break;
        case "Storming":
          $(".list li:nth-child(6)").show();
          break;          
      }
      
    });          
      
    });  
    
  };

  function error() {
    $("#city").html("Unable to retrieve your location");
  };    
    
    $("#city").html("Locating…");
    
    navigator.geolocation.getCurrentPosition(success,error,{timeout:10000});
    
  }

});

Comments