Local Weather App

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

freeCodeCamp objective: Local Weather App

Thumbnail
This awesome code was written by THEK7, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright THEK7 ©
  • HTML
  • CSS
  • JavaScript
    <html>
  <head>
    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
  </head>
<body>
  <h1 id="appName" class="text-center">Local Weather App</h1>
  <div class="container">
    <hr>
    <div id="outPopUp">
      <h2 class="text-center" id="mjesto">Place</h2>
      <br>
      <p id="icon" class="text-center"></p>
      <br>
      <h2 class="text-center"><span class="text-center" id="temp">Temp</span><span id="cf">°C</span></h2>
    </div>
    <p class="text-center">Made by Kristijan Kelić</p>
  </div>
</body>
</html>

/*Downloaded from https://www.codeseek.co/THEK7/local-weather-app-eVroZJ */
    html, body {
  background-color: #ACABFF;
  min-height: 100%;
  color: white;
}

h1 {
   font-family: "Bevan";
  font-size: 100px;
  font-weight: 200;
  line-height: 130px;
  color: #fff;
  text-transform: uppercase;
}

#outPopUp {
  position:relative;
  margin:4% auto auto auto;
  width:450px;
  padding:40px 50px;
  display:table;
  border: 2px solid white;
  border-radius: 20%;
  background-color: white;
  color: black;
}

#cf {
  color: blue;
}

#cf:hover {
  cursor: pointer;
}




/*Downloaded from https://www.codeseek.co/THEK7/local-weather-app-eVroZJ */
    var lat;
var lon;

var temp;
var tempC;

$(document).ready(function(){
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(pos){
      lat = "lat=" + pos.coords.latitude;
      lon = "&lon=" + pos.coords.longitude;
      $.ajax({
        url: "https://fcc-weather-api.glitch.me/api/current?" + lat + lon,
        success: function(response){
          $("#mjesto").text(response.name + ", " + response.sys.country);
          $("#temp").text(Math.round(response.main.temp * 10) / 10);
          temp = Math.round(response.main.temp*10)/10;
          tempC = temp;
          $("cf").text("°C");
          $("#icon").text(response.weather[0].main);
          switch(response.weather[0].main){
              case 'Rain':
                $("#icon").html("<p>Rain <i class='fas fa-tint'></i></p>");
                break;
              case 'Sun':
                $("#icon").html("<p>Sunny <i class='fas fa-sun'></i></p>");
                break;
              case 'Snow':
                $("#icon").html("<p>Snow <i class='fas fa-snowflake'></i></p>");
                break;
              case 'Clouds':
                $("#icon").html("<p>Clouds <i class='fas fa-cloud'></i></p>");
                break;
          }
        }
      })
    });
  }
  else{
    window.alert("Geolocation is not enabled!")
  }
  
  $("#cf").on("click", function(){
    if($("#cf").text() == "°C"){
      temp = temp * 1.8 + 32;
      $("#temp").text(Math.round(temp*10)/10);
      $("#cf").text("°F");
    }
    else{
      temp = tempC;
      $("#temp").text(tempC);
      $("#cf").text("°C");
    }
  });
});

Comments