Weather App

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Weather App</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

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

  
</head>

<body>

  <div class="container-fluid">
  <div class="row header">
    <div class="col-xs-12">
      <h1 id="location">Weather @</h1>
      <p class="pull-right">An app by Conner (James) Isaacs
    </div>
  </div> <!--ends Header-->
  
  <div class="row body">
    <div class="col-xs-8 col-xs-offset-2 text-center">
      <h1 class="text-center" id="currentTemp">Getting Temperature...</h1>
       <div class="row">
        <div class="col-xs-2 col-xs-offset-5" id="tempButton">
          <p id="F/C">F/C</p>
        </div>
      </div>
      <h2 class="text-center" id="weatherDesc">Getting Weather...</h2>
     
    </div>
  </div>  <!--Ends Body-->
  
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/Cylthus/weather-app-KaXpod */
@import url('https://fonts.googleapis.com/css?family=Rajdhani');
html, body {
  min-width:500px;
}

.header  {
  background-color:#c0b283;
  box-shadow: 5px 5px 15px #000000;
}
html, body {
  width: 100%;
    height:100%;
}
.col-xs-8 {
  background-color:#c0b283;
  margin-top:20px;
  box-shadow: 5px 5px 15px #000000;
}
p, h1, h2 {
  font-family: 'Rajdhani', sans-serif;
  font-weight:bold;
  color:white;
}

#tempButton {
  background-color:#696969;
  cursor: pointer;
}



/*Downloaded from https://www.codeseek.co/Cylthus/weather-app-KaXpod */
$(document).ready(function(){
  $.getJSON('http://ipinfo.io',function(data){
    var location = data.loc.split(",");
    var latitude = location[0];
    var longitude = location[1];  
    var name; //Name of Location
    var weatherDesc; //Description of Weather
    var currentTemp; //Holds current temperature of area
    var high; //Holds high of the day
    var low; //Holds low of the day
    var API_KEY = '66e78993337d94013b837e0af107ee1a'; 
    var icon; //gets icon link
    var Celsius;
    var tempSwitch = false;
    
    $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&appid=' + API_KEY + "&units=imperial",function(wd){
      name = wd.name;
      weatherDesc = wd.weather[0].description;
      currentTemp = Math.round(wd.main.temp);
      icon = 'http://openweathermap.org/img/w/'+wd.weather[0].icon+'.png';
      Celsius = Math.round(((currentTemp-32)*5)/9);
      
      
      $(".col-xs-8").prepend("<img src="+icon+">"); 
      $('#location').html('Weather @ ' + name);
      $('#currentTemp').html(currentTemp + '°F');
      $('#weatherDesc').html(weatherDesc);
      $('#tempButton').click(function(){
        if(tempSwitch){
          $('#currentTemp').html(currentTemp + '°F');
          tempSwitch=false;
        }
        else {
          $('#currentTemp').html(Celsius + "°C");
          tempSwitch=true;
        }
      });
      
      if(weatherDesc === "scattered clouds" || weatherDesc === "few clouds" || weatherDesc==="broken clouds" || "overcast clouds")
        {
          $('html body').css("background-image", "url('https://res.cloudinary.com/dfpvu7r4b/image/upload/v1487186505/1c4Qrrv_dn35cv.jpg')");
          $('html body').css("background-size", "cover");
          $('html body').css("background-position", "center");
          $('html body').css("background-repeat","no-repeat");
        }
      else if (weatherDesc === "clear sky"){
        $('html body').css("background-image", "url('https://res.cloudinary.com/dfpvu7r4b/image/upload/v1487186505/tKCNgb1_frkiz7.jpg')");
          $('html body').css("background-size", "cover");
          $('html body').css("background-position", "center");
          $('html body').css("background-repeat","no-repeat");
      }
      else if (weatherDesc === "shower rain" || weatherDesc === "rain"){
        $('html body').css("background-image", "url('https://res.cloudinary.com/dfpvu7r4b/image/upload/v1487186505/TKBIDaN_clvd9n.jpg')");
          $('html body').css("background-size", "cover");
          $('html body').css("background-position", "center");
          $('html body').css("background-repeat","no-repeat");
      }
      else if (weatherDesc === "thunderstorm"){
        $('html body').css("background-image", "url('https://res.cloudinary.com/dfpvu7r4b/image/upload/v1487186505/VOxUcSP_ylownt.jpg')");
          $('html body').css("background-size", "cover");
          $('html body').css("background-position", "center");
          $('html body').css("background-repeat","no-repeat");
      }
      else if (weatherDesc === "snow"){
        $('html body').css("background-image", "url('https://res.cloudinary.com/dfpvu7r4b/image/upload/v1487186504/1gDSoTS_r94img.jpg')");
          $('html body').css("background-size", "cover");
          $('html body').css("background-position", "center");
          $('html body').css("background-repeat","no-repeat");
      }
      else if (weatherDesc === "mist"){
        $('html body').css("background-image", "url('https://i.imgur.com/FF7lxgB.jpg')");
          $('html body').css("background-size", "cover");
          $('html body').css("background-position", "center");
          $('html body').css("background-repeat","no-repeat");
      }
    });
  });
});

Comments