Local Weather App

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

Thumbnail
This awesome code was written by ashoksuthar, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ashoksuthar ©
  • HTML
  • CSS
  • JavaScript
    <div >
  <span id ="title"><u> Local Weather App </u></span>
  <div id='weather-data'>
    <div id='curr-location'>
      
    </div>
    <div id="temp">
      
    </div>
    <div id="button">
      
    </div>
    <div class='weather'>
      <span id=weather-desc> </span>
      <div class=icons>
  <img id = "icon" src="#" >
      </div>
      <div class="time small">
        <div>
          <span class="sunrise">
            Does not support Chrome. Make sure to use http:// instead of https:// in other browsers.
          </span>
        </div>
        <div>
          <span class="sunset">
          </span>
        </div>
      </div>
    </div>
  </div>
</div>


/*Downloaded from https://www.codeseek.co/ashoksuthar/local-weather-app-ZpzKLY */
    body {
  background-color:#000000;
  background-size:     cover;                      
  background-repeat:   no-repeat;
  background-position: center center;
  color:#ffffff;
  text-align:center;
  font-family: 'Lobster', cursive;
  font-size:40px;
  text-shadow: 5px 5px 3px black;
}


div {
  margin:10px;
}

#weather-data {
  padding:15px;
}

.time {
  font-size:26px;
}
.small {
  font-size:20px;
}

#title {
  text-shadow:5px 5px 3px #092f37;
}

/* Button Design */
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 2px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  text-shadow: 2px 2px 2px black;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '⇄';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}



/*Downloaded from https://www.codeseek.co/ashoksuthar/local-weather-app-ZpzKLY */
    
$(document).ready(function (){
 if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
  var long = position.coords.longitude;
  
 $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&appid=b1849960f3badd150a67826cd8e2ec98', function(json){
   var location=json.name+','+json.sys.country
  var temp=Math.floor(json.main.temp-273);
  var weather=json.weather[0].main;
   var icon = json.weather[0].icon;
   
 
   $("#curr-location").html(location);
   $("#temp").html(temp+'&deg;C');
   $("#weather-desc").html(weather);
   
   $("#button").html('<button class="button" style="vertical-align:middle"><span>Temp. Convert </span></button>');
   $("#icon").attr("src","http://openweathermap.org/img/w/"+icon+".png");
   switch(icon){
     case '01d':$("body").css("background-image","url('http://oi64.tinypic.com/309m16a.jpg')");
       break;
     case '01n':$("body").css("background-image","url('http://oi68.tinypic.com/20i6w0i.jpg')");
       break;
       case '02d':$("body").css("background-image","url('http://oi65.tinypic.com/23wtt15.jpg')");
       break;
       case '02n':$("body").css("background-image","url('http://oi67.tinypic.com/2ccse4g.jpg')");
       break;
       case '03d':$("body").css("background-image","url('http://oi63.tinypic.com/1zx7ibq.jpg')");
       break;
       case '03n':$("body").css("background-image","url('http://oi67.tinypic.com/2ccse4g.jpg')");
       break;
       case '04d':$("body").css("background-image","url('http://oi65.tinypic.com/2yy2m10.jpg')");
       break;
       case '04n':$("body").css("background-image","url('http://oi65.tinypic.com/2d6eza.jpg')");
       break;
       case '09d':$("body").css("background-image","url('http://oi68.tinypic.com/2dsh66a.jpg')");
       break;
       case '09n':$("body").css("background-image","url('http://oi67.tinypic.com/33o5myr.jpg')");
       break;
       case '10d':$("body").css("background-image","url('http://oi66.tinypic.com/30l2gbc.jpg')");
       break;
       case '10n':$("body").css("background-image","url('http://oi66.tinypic.com/eulu01.jpg')");
       break;
       case '11d':$("body").css("background-image","url('http://oi67.tinypic.com/1zo98ja.jpg')");
       break;
       case '11n':$("body").css("background-image","url('http://oi66.tinypic.com/14u98q0.jpg')");
       break;
       case '13d':$("body").css("background-image","url('http://oi67.tinypic.com/vhs41s.jpg')");
       break;
       case '13n':$("body").css("background-image","url('http://oi64.tinypic.com/2v1rspl.jpg')");
       break;
       case '50d':$("body").css("background-image","url('http://oi64.tinypic.com/fn7nds.jpg')");
       break;
       case '50n':$("body").css("background-image","url('http://oi66.tinypic.com/zv8t8m.jpg')");
       break;
       default :
       $("body").css("background","black");
       
   }
   //icons
   
   
   var sunset = json.sys.sunset;
var d = new Date(0); // The 0 there is the key, which sets the date to the epoch
d.setUTCSeconds(sunset);
   $(".sunset").html('<u>Sunset: </u>'+d);
   
   var sunrise = json.sys.sunrise;
var d = new Date(0); // The 0 there is the key, which sets the date to the epoch
d.setUTCSeconds(sunrise);
   $(".sunrise").html('<u>Sunrise: </u>'+d);
   
   //button toggle for celsius to fahrenheit and vice versa
   $('#button').click( function(){
  $('#temp').toggleClass('fahrenheit');
  $('#temp').toggleClass('celsius');

  if ($('#temp').hasClass('celsius')) {
    $('#temp').text(setFahrenheit(temp));
    return;
  }

  $('#temp').text(setCelsius(temp));
});
   });
 });
 }
});

 

function setCelsius(temp){
  return temp + "° C";
};

function setFahrenheit(temp){
  var cel = (temp*9/5)+32;
  return cel + "° F";
};

Comments