Weath

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

Thumbnail
This awesome code was written by saulosjoseph, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright saulosjoseph ©
  • HTML
  • CSS
  • JavaScript
    <div id="box-data" class="container">
  
  <div class="row">
        <div id = "dataCity" class="col-md-6 col-xs-6">
        </div>
      <div class="iconWeath ">
      <i id="loading" class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i>  
      <img id="iconWeath">
        <div id="dataWeath">
        </div>
  </div>
</div>
  
    <div id = "dataTemp">
  </div>
  <div class="five" id="five">
  <div class="button-wrap">
    <div class="button-bg">
      <div class="button-out">&deg;F</div>
      <div class="button-in">&deg;C</div>
      <div class="button-switch" id="button"></div>
    </div>
  </div>
</div>

</div>
<br/>

<p id="madeby">Made by <a style="color: white" href="https://codepen.io/saulosjoseph/full/ONmXBV/" target="_blank">Saulo Joseph</a></p>

/*Downloaded from https://www.codeseek.co/saulosjoseph/weath-mRMdzO */
    @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);

body {
  background-color: white;
  color: #16a085;
  font-weight:400;
  font-family: 'Roboto Condensed', sans-serif;
  transition: 2s;
}

#box-data {
  position:relative;
  margin:8% auto auto auto;
  width:550px;
  padding:40px 50px;
  display:table;
  background-color:#fff;
  color:#16a085;
  transition: 500ms;
  
}

#madeby {
  color: white;
  text-align:center;
}
#dataTemp {
  font-size: 90px;
  margin-bottom: -40px;
}

#dataWeath {
  font-size: 15px;
  margin-right: -10px;
}

#dataTemp {
  text-align:center;
}
#dataCity {
  font-size: 30px;
}
.iconWeath {
  text-align: right;
  margin-right: 200px;
  width: 100%;
}

/* BUTTON 5 */
.five .button-wrap {
  width: 120px;
  margin: 40px auto 0;
  cursor: pointer;
}
.five .button-bg {
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 40px;
  padding: 3px;
  color:white;
  transition:all 0.2s ease;
}
.five :hover.button-bg {
  color:white;
}
.five .button-active :hover.button-bg {

}
.five .button-switch {
  position:relative;
  left:0px;
  width: 64px;
  height: 44px;
  background-color:#fff;
  /*border:solid 13px;*/
  border-radius: 36px;
  transition:all 0.2s ease;
}
.five .button-active .button-switch { left:50px; }
.five .button-in, 
.five .button-out {
  position:absolute; 
  transition:all 0.2s ease;
  padding-top:15px;
  font-size:0.8em;
  text-transform:uppercase;
  font-weight:bold;
}
.five .button-in { margin-left:82px; }
.five .button-out { margin-left:12px; color:white; }
.five .button-active .button-out { color:white; }
.five .button-active .button-in { color:white; }
.five .button-active .button-bg { background-color:#16a085; }



/*Downloaded from https://www.codeseek.co/saulosjoseph/weath-mRMdzO */
    if (navigator.geolocation) { 
  /* geolocation available */
    navigator.geolocation.getCurrentPosition(function(position) {   
    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&appid=08e69f4c9f5015db775b9750e26946df", function (json) { 
      $("body").css("background-color","#16a085");
      $(".button-bg").css("background-color", "#16a085");
      $("#dataCity").html(json.name + ", "+ json.sys.country);
      $("#dataWeath").html(json.weather[0].main + ", " + json.weather[0].description);
      $("#dataTemp").html((json.main.temp  - 273.15).toFixed(0) + "&deg;C");
      $("#loading").remove();
      var unit = "metric";      
      $('.five').on("click", function(){
            if (unit == "metric") {
                $("#dataTemp").html((json.main.temp  * 9/5 - 459.67).toFixed(0) + "&deg;F");
              unit = "imperial";
            } else {
                $("#dataTemp").html((json.main.temp  - 273.15).toFixed(0) + "&deg;C");
                unit = "metric";
            }
      });

      
      var image = document.getElementById('iconWeath');
      image.src = "http://openweathermap.org/img/w/" + json.weather[0].icon + ".png";
    })
  });
} 
else {
  /* geolocation IS NOT available */
  $("#data").html("Geolocation IS NOT available, please enter your current location");
}

$('.button-wrap').on("click", function(){
  $(this).toggleClass('button-active');
});

Comments