Get the Weather

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

FreeCodeCamp project to show local weather.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Get the 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 prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>

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

  
</head>

<body>

    <div class="container-fluid">
    <div class="row">
        <div>  
            <h1 class="animated slideInDown">Get. The. Weather.</h1>
                <div id="well" class="well well-lg animated fadeInUp">
                    <div class="row">
                         <div class="col-xs-12 col-sm-12 col-md-12">
                                <h2 id="city"></h2>
                         </div>
                               <div class="row">
                                       <div id="temp-cont" class="col-xs-6 col-sm-6 col-md-6">
                                               <h3 id="temp"></h3>
                                       </div>
                                       <div id="sw-cont" class="col-xs-6 col-sm-6 col-md-6">
                                               <div class="onoffswitch">
                                                     <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" value="" checked="true">
                                                     <label class="onoffswitch-label" for="myonoffswitch">
                                                     <span class="onoffswitch-inner"></span>
                                                     </label>
                                               </div>
                                       </div>
                              </div>
                              <img id="pic" class="animated pulse infinite" src=""></div>
                              <div id="wdesc"></div>
                    
                              <div class="btn-group btn-group-justified">
                                     <button id='refresh' class="btn-default btn-lg" onClick="history.go(0)" data-toggle="tooltip" title="Refresh!" data-placement="bottom"><i class="fa fa-repeat" aria-hidden="true"></i>  Refresh</button>
                              </div>
              </div>
        </div>
    </div>
</div>
<footer>
  <h5>Designed and coded by <a href="http://mbachurski.com">Mariusz Bachurski</a><br><br>All rights reserved &#9426 2016</h5>

   
  </footer>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/embahr/get-the-weather-ZObLvR */
@import url(https://fonts.googleapis.com/css?family=Open+Sans|Oswald);

body {
  background-image: url("http://mbachurski.com/dev/images/forest_hd.jpeg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  text-align: center;
}
h1 {
  text-align: center;
  padding-top: 35px;
}
h3 {
  text-align: right;
  padding-top: 2%;
  padding-left: 1%;
  padding-right: 1%;
  font-size: 200%;
}
h4 {
  text-align: right;
  padding-top: 5%;
  padding-right: 10%;
  padding-bottom: 5%;
}
.well {
  border: 20px;
  border-radius: 0px;
  border-color: #000;
  margin-top: 3%;
  margin-left: 10%;
  margin-bottom: 10%;
  margin-right: 10%;
  background-color: rgba(49,144,168,.5);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.tooltip .tooltip-inner {
  background-color: #fff;
  color: #000;
  border-radius: 0px;
  font-family: 'Oswald', sans-serif;
}
.btn-default {
  margin-top: 10%;
  border: 10px;
  border-radius: 0px;
  background-color: rgba(49,144,168,.1);
  width: 50%;
  color: #fff;
}
#temp-cont {
  padding-right: 2px;
}
#sw-cont {
  padding-left: 2px;
  padding-top: 1px;
}
footer {
  text-align: center;
}
img {
  margin: auto;
  height: auto;
  max-width: 100%;
  opacity: 0.5;
}
.onoffswitch {
    position: relative; width: 36px;
  margin-top: 20px;
  margin-bottom: 10px;
  padding-top: 2%;
  padding-left: -500px;
  padding-right: 1%;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
  
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 0px solid #FFFFFF; border-radius: 25px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 27px; padding: 0; line-height: 27px;
    font-size: 20px; color: white; font-family: Oswald, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "°C";
    padding-left: 0px;
    background-color: #ddd; color: rgba(49,144,168,.5);
}
.onoffswitch-inner:after {
    content: "°F";
    padding-right: 6.5px;
    background-color: #ddd; color: rgba(49,144,168,.5);
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 0px; margin: 13.5px;
    background: #AFC0B7;
    position: absolute; top: 0; bottom: 0;
    right: 41px;
    border: 0px solid #FFFFFF; border-radius: 25px;
    transition: all 0.3s ease-in 0s; 
  
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
    background-color: #AFC0B7; 
}
a {
  color: rgba(49,144,168,1);
}
a:hover {
  color: white;
  text-decoration: none;
}

/*Downloaded from https://www.codeseek.co/embahr/get-the-weather-ZObLvR */
$(document).ready(function(){
     $('[data-toggle="tooltip"]').tooltip();
 });
//get location based on IP address
$.getJSON("http://ip-api.com/json/?callback=?", function(json) {
    var lat = "lat=" + json.lat;
    var lon = "&lon=" + json.lon;
//call Open Weather API 
$.getJSON("http://api.openweathermap.org/data/2.5/weather?" + lat + lon + "&APPID=6baf21112622cd8cb2ddf67d4ce0652b&units=" + "metric", function(json) {
 //send info from API to elements of page
  $("#city").text(json["name"] + ", " + json.sys["country"]);
  $("#temp").text(Math.round(json.main["temp"]));
 //Call & send weather icons to element
  var iconUrl = "http://openweathermap.org/img/w/"
  $("#pic").attr("src", iconUrl += json.weather[0]["icon"] + '.png');
  $("#wdesc").text(json.weather[0]["description"]);
 //Unit of measure switch
  var input = document.querySelector('input[type=checkbox]');
    function check() {
        var uom = input.checked;
             if (uom == true) {
                   $("#temp").html(Math.round(json.main["temp"]));
                } else {
                   $("#temp").html(Math.round(json.main["temp"] * 1.8 + 32));
             }
     }
    input.onchange = check;
    check();
});   
});

Comments