harunpehlivan
3/13/2018 - 11:02 PM

Local Weather

Local Weather

styles
content_copyfile_download
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
style.scss
content_copyfile_download
.thunderstorm-day {
  background: url(http://createapk.com/project/2014/06/hary777/thunderstorm-wallpaper/image/6596-thunderstorm-wallpaper.jpg);
  background-repeat: no-repeat;
  background-posistion: center;
  background-size: cover;
}
.thunderstorm-night {
  background: url(http://img.wallpaperstock.net:81/thunderstorm-wallpapers_26255_1920x1200.jpg);
  background-repeat: no-repeat;
  background-posistion: center;
  background-size: cover;
}
.clear-day {
  background: url(https://blog.wwf.org.au/wp-content/uploads/2012/07/DSC_00312.jpg);
  background-repeat: no-repeat;
  background-posistion: center;
  background-size: cover;
}

.clear-night {
  background: url(https://jjhiii24.files.wordpress.com/2014/06/stars-at-night2.jpg);
  background-repeat: no-repeat;
  background-posistion: center;
  background-size: cover;
}

.clouds-day {
  background: url(http://bestdesignoptions.com/wp-content/uploads/2009/08/clouds-background-41.jpg);
  background-repeat: no-repeat;
  background-posistion: center;
  background-size: cover;
}
.clouds-night {
  background: url(https://amazingpict.com/wp-content/uploads/2015/06/night-clouds-moon-hd-image.jpg);
  background-repeat: no-repeat;
  background-posistion: center;
  background-size: cover;
}

.rain-day {
  background: url(http://desktopbackgroundshq.com/backgrounds/rain-pictures-wallpaper-water-backgrounds-30156.jpg);
  background-repeat: no-repeat;
  background-posistion: center;
  background-size: cover;
}

.rain-night {
  background: url(http://naturewallpaper.rocks/wp-content/uploads/2015/07/rain-night-hd-wallpaper-for-desktop.jpg);
  background-repeat: no-repeat;
  background-posistion: center;
  background-size: cover;
}
.snow-day {
  background: url(http://www.wallpaperup.com/uploads/wallpapers/2013/01/07/28265/a37ef69062c8eccadcd03fa1b7d46bf7.jpg);
  background-repeat: no-repeat;
  background-posistion: center;
  background-size: cover;
}
.snow-night {
  background: url(https://t1.gstatic.com/images?q=tbn:ANd9GcTM5oJjCoNK1NjlNJpWOQubWH2oAHFZXaZlHbOuVFinvTInX02HDQ);
  background-repeat: no-repeat;
  background-posistion: center;
  background-size: cover;
}
.mist-day {
  background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuZG1jpdzXdlGTEyqE5PIJFmm4qzXIQUZwaT1o5t-kMs4Bb6Zb);
  background-repeat: no-repeat;
  background-posistion: center;
  background-size: cover;
}

.mist-night {
  background: url(http://www.wallpaperup.com/uploads/wallpapers/2013/02/28/46429/03e392d9a1a008f002b1609014a1fa57.jpg);
  background-repeat: no-repeat;
  background-posistion: center;
  background-size: cover;
}
.container {
  width: 80%;
  background: rgba(21,20,21,0.9);
  margin-top: 25px;
}
.navbar {
  border: none;
  border-radius: 0;
  background: rgba(20,20,20,0.9);
  h1 {
    color: white;
  }
  form {
    opacity: 1;
    padding: 15px 0 0 0;
  }
}
.current-weather {
  border-bottom: 1px solid #444;
  .form-control {
    width: 180px;
    margin: 15px auto 0 auto;
  }
  .icon-temp {
    .icon {
      img {
        display: block;
        margin: 0 auto;
        width: 200px;
        height: 200px;
      }
    }
    .temp {
      padding: 30px 0;
      h3 {
        color: white;
        font-size: 3em;
        padding: 25px 0 0 0;
        text-align: center;
      } 
    }
    .over-all {
      padding: 0 30px;
      margin-top: 20px;
       list-style-type: none;
        li {
          color: white;
          border-bottom: 1px solid #333;
          margin:15px 0;
        }
      }
  }
  .description {
    h1 {
      color: white;
      text-align: center;
    }
  }
  .detail {
    padding: 0;
    margin-top: 20px;
    border-left: 2px solid #444;
    ul {
      padding-right: 10px; 
      list-style-type: none;
      li {
        color: white;
        border-bottom: 1px solid #333;
        margin:15px 0;
      }
    }
  }
}

.forecast-container {
  .forecast-heading {
    color: white;
    text-align: center;
  }
  .forecast {
    .forecast-icon {
      img {
        display: block;
        margin: 0 auto;
        width: 100px;
        height: 100px;
      }
    }
    .forecast-temp {
      h3 {
        color: white;
        text-align: center;
        font-size: 3em;
      }
    }
    .forecast-detail {
      h3 {
        color: white;
        text-align: center;
      }
    }
  }
}
scripts
content_copyfile_download
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
script.js
content_copyfile_download
$(document).ready(function() {
var scale = $("#scale").val();
var cityName = "City";
//function time for background 
 function bgTime() {
   var d = new Date();
   var hr = d.getHours();
   if(hr >= 6 && hr <= 18)
     return "day";
   return "night";
 }
 //sets background
 function setBackground(id) {
   console.log(id);
   $("body").removeAttr('class');
   if(id >= 200 && id <= 232) {
     $("body").addClass("thunderstorm-"+ bgTime());
   }
   else if(id >= 300 && id <= 531) {
     $("body").addClass("rain-"+ bgTime());
   }
   else if(id >= 600 && id <= 622) {
     $("body").addClass("snow-"+ bgTime());
   }
   else if(id >= 701 && id <= 781) {
     $("body").addClass("mist-"+ bgTime());
   }
   else if(id === 800) {
     $("body").addClass("clear-"+ bgTime());
   }
   else if(id >= 801 && id <= 804) {
     $("body").addClass("clouds-"+ bgTime());
   }
   else {
     $("body").addClass("clear-"+ bgTime());
   }
 }
//Returns Current Part of the day depending on current time
function time() {
  var d = new Date();
  var hr = d.getHours();
  if(hr < 12)
    return "morn";
  else if(hr < 16)
    return "day";
  else if(hr <= 18)
    return "eve";
  else 
    return "night";
  
}
  time();
// Sets Current Weather
function currentWeather() {
  $.getJSON("https://api.openweathermap.org/data/2.5/forecast/daily?q="+cityName+"&units="+scale+"&cnt=5&appid=7afc47d8e1cbb3790b086d046b8ba293").done(function(data) {
    
    var today = data.list[0];
    var today_weather = today.weather[0];
    var today_temp = today.temp;
    
    setBackground(today_weather.id);
    //city name
    $('#city').text(data.city.name);
    
    //Current Icon
    var icon_src = "https://openweathermap.org/img/w/"+today_weather.icon+".png";
    $("#current-icon").attr("src", icon_src);
    
    
    //Set Current Date
    var date = new Date();
    $("#date").text(date.toDateString());
    
    //Current Temp
    $("#current-temp").html( (scale === "metric") ? today.temp[time()] + "&deg; C" : today.temp[time()] + "&deg; F" );
    
    //Current Description
    $("#current-des").text(today_weather.description);
    
    //Full Day description
    $("#morn").html( (scale === "metric") ? today.temp.morn + "&deg; C" : today.temp.morn + "&deg; F" );
    $("#day").html( (scale === "metric") ? today.temp.day + "&deg; C" : today.temp.day + "&deg; F" );
    $("#eve").html( (scale === "metric") ? today.temp.eve + "&deg; C" : today.temp.eve + "&deg; F" );
    $("#night").html( (scale === "metric") ? today.temp.night + "&deg; C" : today.temp.night + "&deg; F" );
    
    $("#max").html( (scale === "metric") ? today.temp.max + "&deg; C" : today.temp.max + "&deg; F" );
    $("#min").html( (scale === "metric") ? today.temp.min + "&deg; C" : today.temp.min + "&deg; F" );
    
    $("#humidity").text(today.humidity + "%");
    $("#wind-speed").text( (scale === "metric") ? today.speed + " meter/sec" : today.speed + " miles/hour" );
    $("#pressure").text(today.pressure + " hpa");
    
  }); // json request end
  
}// Sets Current Weather end
  
function forecast() {
  //forecast
    $.getJSON("https://api.openweathermap.org/data/2.5/forecast/daily?q="+cityName+"&mode=json&units="+scale+"&cnt=5&appid=7afc47d8e1cbb3790b086d046b8ba293").done(function(data) {
    Array.prototype.shift.apply(data.list);
    var forecast = data.list;
    var source = $("#forecast").html();
		var template = Handlebars.compile(source);

		var result = template(forecast);
		$(".forecast-container").html(result);
		$(".forecast-unit").html((scale === "metric") ? "&deg; C" : "&deg; F");
  }); // json request end
}
  
  //Information About User Current Region
  $.ajax({
    url: "https://geoip-db.com/jsonp",
    jsonpCallback: "callback",
    dataType: "jsonp",
    success: function( data ) {
      cityName = data.city;
      currentWeather();
      forecast();
    }
  }); 
// $.getJSON('http://ip-api.com/json/?callback=?').done(function(data) {
//   cityName = data.city;
//   currentWeather();
//   forecast();
// });
  //When Selection option changes
  $("#scale").change(function() {
    scale = $("#scale").val();
    currentWeather();
    forecast();
  });
  
  	
$( "#city-form" ).submit(function( event ) {
  var name = $("#cityName").val();
  if(name !== "") {
    cityName = name;
    currentWeather();
    forecast();
  }
  event.preventDefault();
});
  
});
local-weather.markdown
content_copyfile_download
  • Rendered
  • Source

Local Weather

A Pen by HARUN PEHLİVAN on CodePen.

License.

index.html
content_copyfile_download
<body>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <div class="row">
        <h1 class="col col-lg-5 col-md-5 col-sm-5">Local Weather</h1>
        <form id="city-form" class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input id="cityName" type="text" class="form-control" placeholder="City Name">
          </div>
          <button type="submit" class="btn btn-default">Search</button>
        </form>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="current-weather row">
    <h1 id="city" class="col col-lg-4 col-md-4 col-sm-4 text-center" style="color: white;">City</h1>
    <h1 id="main-heading" class="text-center col col-lg-4 col-md-4 col-sm-4" style="color: white;">Current Weather</h1>
    <div class="col col-lg-4 col-md-4 col-sm-4">
 		<select id="scale" class="form-control">
 			<option value="metric">Celsius</option>
 			<option value="imperial">Fahrenheit</option>
 		</select>
    </div>

       <div class="col col-lg-8 col-md-8 col-sm-8">
         <div class="row icon-temp">
           <div class="icon col col-lg-4 col-md-4 col-sm-6">
             <img id="current-icon" src="http://openweathermap.org/img/w/01d.png" alt="Weather icon" />
           </div>
           <div class="temp col col-lg-4 col-md-4 col-sm-6">
             <h3 id="current-temp">Temp</h3>
           </div>
           <ul class="over-all col col-lg-4 col-md-4 hidden-sm hidden-xs">
             <li>Morning: <span class="pull-right" id="morn">16&deg;</span></li>
             <li>Day: <span class="pull-right" id="day">21&deg;</span></li>
             <li>Evening: <span class="pull-right" id="eve">21&deg;</span></li>
             <li>Night: <span class="pull-right" id="night">16&deg;</span></li>
           </ul>
         </div><!-- Icon-temp -->
         <div class="row description">
             <h1 id="current-des" class="col col-lg-8 col-md-8 col-sm-8">Description</h1>
         </div><!-- descript/row -->
       </div> <!-- col-g-8 -->
      
        <div class="detail col col-lg-4 col-md-4 col-sm-4">
          <ul>
          	<li>Date: <span id="date" class="pull-right">08-20-2015</span></li>
            <li>Max Temp: <span class="pull-right" id="max">28&deg;</span></li>
            <li>Min Temp: <span class="pull-right" id="min">22&deg;</span></li>
            <li>Humidity: <span class="pull-right" id="humidity">40%</span></li>
            <li>Wind Speed: <span class="pull-right" id="wind-speed">3.6mph</span></li>
            <li>Pressure: <span class="pull-right" id="pressure">1017.5hPa</span></li>
          </ul>  
       </div> <!-- col-lg-4-->
      
    </div><!-- Current Weather/row-->
    
    <div class="row forecast-container">
      
    </div><!-- Forecast-container -->
    
  </div><!-- Conainer -->
  
<script id="forecast" type="text/x-handlebars-template">
<h1 class="forecast-heading">Forecast</h1>  
<ul class="forecast">
{{#each this}}
	<li class="col col-lg-3 col-md-3 col-sm-3">
	{{#each this.weather}}
	    <div class="forecast-icon">
	      <img src="http://openweathermap.org/img/w/{{icon}}.png" />
	    </div>
	{{/each}}
	    <div class="forecast-temp">
	      <h3>{{this.temp.day}}<span class="forecast-unit"></span></h3>
	    </div>
	{{#each this.weather}}
	    <div class="forecast-detail">
	      <h3>{{description}}</h3>
	    </div>
	{{/each}}
	</li>
{{/each}}
</ul>
</body>