Local Weather - (FreeCodeCamp)

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Local Weather - (FreeCodeCamp)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css'>

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

  
</head>

<body>

  <section>
  <div id="locationMsg"></div>
  <div class="weatherArea">
    <i id="weatherIcon" class="wi wi-alien"></i>
    <p id="wDescription"></p>
  </div>
  <div class="tempArea">
    <div id="temperature"></div>
    <div class="tToggle">
      <span id="cel" class="tActive">&deg C</span>
      <span id="far">&deg F</span>
    </div>
  </div>
</section>
  <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/grsmith/local-weather-freecodecamp-QEkWNN */
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
* {
  padding: 0px;
  margin: 0px;
  font-family: 'Source Sans Pro', sans-serif;
}

body {
  padding: 0px 20px;
  background: #fafafa;
}

section {
  margin: auto;
  position: relative;
  top: 100px;
  max-width: 350px;
  min-width: 250px;
  height: 190px;
  background: #155BFF;
  box-shadow: 1px 2px 8px 1px rgba(0, 0, 0, 0.2);
}
section #locationMsg {
  padding: 5px 10px;
  text-align: left;
  background: white;
}

.weatherArea, .tempArea {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  margin: 10px;
  padding: 10px;
  vertical-align: top;
  text-align: center;
}

.weatherArea {
  left: 0px;
  width: 50%;
}
.weatherArea #weatherIcon {
  font-size: 3em;
  text-align: center;
  margin-top: 5px;
  padding: 10px;
  color: white;
}
.weatherArea #wDescription > * {
  min-width: 100px;
  max-width: 150px;
  margin: 9px auto 0;
  padding: 5px;
  border-radius: 25px;
  line-height: 2em;
  font-size: 0.8em;
  color: white;
  background: rgba(255, 255, 255, 0.2);
}

.tempArea {
  right: 0px;
  width: 45%;
}
.tempArea #temperature {
  font-size: 4em;
  height: 80px;
  color: white;
}
.tempArea .tToggle {
  padding: 10px;
}
.tempArea .tToggle span {
  padding: 3px 7px;
  margin-right: -5px;
  font-size: 0.6em;
  background: #155BFF;
  color: shade(white, 50);
  border: 1px solid tint(#155BFF, 40%);
}
.tempArea .tToggle span:hover {
  background: tint(#155BFF, 40%);
  color: white;
  cursor: pointer;
}
.tempArea .tToggle .tActive {
  background: tint(#155BFF, 40%);
  color: white;
}
.tempArea #cel {
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
}
.tempArea #far {
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px;
}

@media (max-width: 350px) {
  .tArea, .wArea {
    display: block;
    width: 150px;
    margin: auto;
    padding: 20px 0 0 0;
  }

  .tArea {
    padding-bottom: 20px;
  }
}


/*Downloaded from https://www.codeseek.co/grsmith/local-weather-freecodecamp-QEkWNN */
function GetLocation(){  
    var clientLocation = {
      lat: 1,
      lon: 1,
      city: 'somewhere',
      countryCode: 'someplace',
      found: false
    };

    this.getLocation = function(callback) {
      var locationMsg = document.getElementById("locationMsg");
      locationMsg.innerHTML = "<p style='text-align: center;'>Locating…</p>";
      var url = "http://ip-api.com/json"
      $.ajax({
        url: url,
        type: 'GET',
        dataType: 'json',
        success: this.locateSuccess,
        error: this.locateError,
        complete: function(){ callback(clientLocation); }
       });
     };
  
    this.locateSuccess = function(data) {
       var locationMsg = document.getElementById("locationMsg");
       clientLocation.lat = data.lat;
       clientLocation.lon = data.lon;
       clientLocation.city = data.city;
       clientLocation.countryCode = data.countryCode;
       clientLocation.found = true;
       locationMsg.innerHTML = "<p>" + clientLocation.city + ", " + clientLocation.countryCode
         "</p>";
     };

    this.locateError = function() {
       var locationMsg = document.getElementById("locationMsg");
       locationMsg.innerHTML = 
         "Unable to retrieve your location";
       clientLocation.found = false;
     };
 
}

var Weather = (function() {
    var weatherData = {};
    var getWeather = function(lat, long, callback) {
      const key = "f0506144a739bfdf0e89ff78eb421d40"; 
      const url = "http://api.openweathermap.org/data/2.5/weather?lat=" + 
      lat + "&lon=" + long + "&units=metric&appid=" + key;
      $.ajax({
        url: url,
        type: 'GET',
        dataType: 'jsonp',
        beforeSend: this.setHeaders,
        success: this.displayWeather,
        error: function() {alert('error retriving weather.');},
        complete: function() {callback(weatherData);}
      });
    }

    var setHeaders = function(xhr) {
      xhr.setRequestHeader("X-Mashape-Key", "OjL1FCAoEumsh60lyHgu8EeUGa0Wp1DHK3YjsnRND3YryW4Ner");
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.setRequestHeader("Accept", "application/json")
    };
    
    var displayWeather = function(data) {
      var temperature = document.getElementById("temperature");
      var wIcon = document.getElementById("weatherIcon");
      var wDesc = document.getElementById("wDescription"); 
      weatherData = data;
      temperature.innerHTML = Math.round(weatherData.main.temp);
      wIcon.className = 'wi ' + 'wi-owm-' + data.weather[0].id + '';
      wDesc.innerHTML = "<p>" + data.weather[0].description + "</p>";
      return data;
    }
    
    return {
      getWeather: getWeather,
      displayWeather: displayWeather
    }
})

$(document).ready(function() {
  var getLocation = new GetLocation();
  var weather = new Weather();
  var weatherData = {};
  
  getLocation.getLocation(function(clocation) {
     weather.getWeather(clocation.lat, clocation.lon, function(wData) {
      weatherData = wData;
     });
  });
  
  $("#update").on('click', function() {
    console.log(clientLocation);
  });
  
  $("#cel").on('click', function() {
    this.className = "tUnit tActive";
    $("#far").removeClass("tActive");
    $("#temperature").text(Math.round(weatherData.main.temp));
  });
  
  $("#far").on('click', function() {
    this.className = "tUnit tActive";
    $("#cel").removeClass("tActive");
    $("#temperature").text(Math.round((weatherData.main.temp * 1.8) + 32));
    
  })

});

Comments