Weather Pane

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

A panel to show the weather in a specific area. Design based on this Dribbble shot [https://dribbble.com/shots/1081917-WhereTO-App] from Tiberiu Neamu.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Weather Pane</title>
  
  
  <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Raleway:300,400'>
<link rel='stylesheet prefetch' href='http://chrishutchinson.me/weathericons/css/weather-icons.min.css'>

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

  
</head>

<body>

  <div class="background"></div>
<div class="container">
  <section class="top">
    <div class="overlay"></div>
    <input type="search" value="Florida, USA" placeholder="Enter a location" id="search" role="top-left" />
    <!--<button id="find" role="top-left"><i class="fa fa-search"></i> Find</button>-->
    <aside id="meta" role="top-right" class="text-right">
      <i class="fa fa-map-marker"></i>
      <p>Florida, USA</p>
      <p>20:15 pm</p>
    </aside>
    <ul id="tabs" role="bottom-left">
      <li class="active yellow">
        <a href="#"><i class="fa fa-sun-o"></i> Weather</a>
      </li>
      <li class="purple">
        <a href="#"><i class="fa fa-plane"></i> News &amp; Events</a>
      </li>
      <li class="blue">
        <a href="#"><i class="fa fa-picture-o"></i> Gallery (30)</a>
      </li>
    </ul>
    <a href="https://dribbble.com/shots/1081917-WhereTO-App" id="locations" role="bottom-right" target="_blank">Based on this Dribbble Shot <i class="fa fa-dribbble"></i></a>
  </section>
  <section class="bottom">
    <ul class="data">
      <li class="main" data-id="0">
        <span class="day">Monday 27th</span>
        <span class="temparature">87&deg;</span>
        <span class="icon">
          <i class="wi wi-rain"></i>
        </span>
        <span class="meta">4mph / 65&deg;</span>
      </li>
      <li data-id="1">
        <span class="day">Tue</span>
        <span class="icon">
          <i class="wi wi-rain-wind"></i>
        </span>
        <span class="temparature">66&deg;</span>
      </li>
      <li data-id="2">
        <span class="day">Wed</span>
        <span class="icon">
          <i class="wi wi-day-sunny"></i>
        </span>
        <span class="temparature">82&deg;</span>
      </li>
      <li data-id="3">
        <span class="day">Thu</span>
        <span class="icon">
          <i class="wi wi-lightning"></i>
        </span>
        <span class="temparature">76&deg;</span>
      </li>
      <li data-id="4">
        <span class="day">Fri</span>
        <span class="icon">
          <i class="wi wi-fog"></i>
        </span>
        <span class="temparature">65&deg;</span>
      </li>
      <li data-id="5">
        <span class="day">Sat</span>
        <span class="icon">
          <i class="wi wi-showers"></i>
        </span>
        <span class="temparature">67&deg;</span>
      </li>
      <li data-id="6">
        <span class="day">Sun</span>
        <span class="icon">
          <i class="wi wi-rain"></i>
        </span>
        <span class="temparature">76&deg;</span>
      </li>
    </ul>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/chrishutchinson/weather-pane-nKBds */
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  margin: 0 -10% -10% 0;
  max-width: 100%;
  max-height: 100%;
  min-height: 600px;
  padding: 20px;
  overflow: hidden;
  font-family: 'Raleway', sans-serif;
  color: #FFF;
  font-size: 14px;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
  line-height: 1.5em;
}

a {
  color: #FFF;
  text-decoration: none;
}

div.background {
  position: absolute;
  background: url(http://www.chrishutchinson.me/wp-content/uploads/2014/05/1749237.jpg);
  background-size: cover;
  z-index: -1;
  height: 120%;
  width: 120%;
  margin: -10%;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-filter: blur(20px);
          filter: blur(20px);
}

div.container {
  margin: 30px 20px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.4);
  max-width: 800px;
  margin: 30px auto;
}
div.container section.top {
  height: 350px;
  padding: 20px;
  position: relative;
  background: url(http://www.chrishutchinson.me/wp-content/uploads/2014/05/1749237.jpg);
  background-size: cover;
}
div.container section.top div.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}
div.container section.top input#search {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  color: #FFF;
  outline: 0;
  font-size: 2em;
}
div.container section.top input#search::-webkit-input-placeholder {
  color: #FFF;
  opacity: 0.6;
}
div.container section.top input#search:-ms-input-placeholder {
  color: #FFF;
  opacity: 0.6;
}
div.container section.top input#search::-ms-input-placeholder {
  color: #FFF;
  opacity: 0.6;
}
div.container section.top input#search::placeholder {
  color: #FFF;
  opacity: 0.6;
}
div.container section.top button#find {
  left: 240px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: #7AC865;
  height: 34px;
  color: #FFF;
  border-radius: 12px;
  text-transform: uppercase;
  padding: 4px 14px;
  outline: 0;
}
div.container section.top button#find:hover {
  background: #5bb842;
  cursor: pointer;
}
div.container section.top aside#meta i {
  font-size: 5em;
}
div.container section.top aside#meta p {
  text-transform: uppercase;
  font-size: 1.1em;
}
div.container section.top a#locations {
  bottom: 80px;
  right: 0;
  background: #7AC865;
  text-transform: uppercase;
  display: block;
  border-radius: 14px 0 0 14px;
  padding: 7px 16px;
}
div.container section.top a#locations:hover {
  background: #5bb842;
}
div.container section.top ul#tabs {
  letter-spacing: -4px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  bottom: 0;
  left: 0;
}
div.container section.top ul#tabs li {
  letter-spacing: normal;
  display: inline-block;
}
div.container section.top ul#tabs li a {
  display: block;
  padding: 8px 34px;
  font-size: 1.1em;
  opacity: 0.7;
}
div.container section.top ul#tabs li a i {
  font-size: 1.3em;
  vertical-align: middle;
  margin: 0 5px 0 0;
}
div.container section.top ul#tabs li.yellow a {
  border-bottom: 6px solid #F3C459;
}
div.container section.top ul#tabs li.purple a {
  border-bottom: 6px solid #99A3E4;
}
div.container section.top ul#tabs li.blue a {
  border-bottom: 6px solid #67CADF;
}
div.container section.top ul#tabs li.active a, div.container section.top ul#tabs li:hover a {
  opacity: 1;
}
div.container section.bottom ul.data {
  letter-spacing: -4px;
  list-style-type: none;
}
div.container section.bottom ul.data li {
  -webkit-animation: bounce-in 1s forwards;
          animation: bounce-in 1s forwards;
  opacity: 0;
  vertical-align: top;
  letter-spacing: normal;
  display: inline-block;
  width: 11%;
  border-right: 1px solid #9a9a9a;
  text-align: center;
  padding: 20px 10px;
}
div.container section.bottom ul.data li:nth-of-type(2) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
div.container section.bottom ul.data li:nth-of-type(3) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
div.container section.bottom ul.data li:nth-of-type(4) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
div.container section.bottom ul.data li:nth-of-type(5) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
div.container section.bottom ul.data li:nth-of-type(6) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
div.container section.bottom ul.data li:nth-of-type(7) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
div.container section.bottom ul.data li span.day {
  display: table;
  margin: 0 auto;
  padding: 4px 10px;
  border-radius: 15px;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.8em;
}
div.container section.bottom ul.data li span.icon {
  font-size: 2em;
  margin: 10px 0;
  display: block;
  text-align: center;
}
div.container section.bottom ul.data li span.temparature {
  font-size: 1.1em;
}
div.container section.bottom ul.data li.main {
  width: 34%;
  text-align: left;
  position: relative;
  padding: 0px 10px 35px 0px;
}
div.container section.bottom ul.data li.main span.day {
  position: absolute;
  bottom: 0;
  left: 0;
}
div.container section.bottom ul.data li.main span.temparature {
  font-size: 6em;
}
div.container section.bottom ul.data li.main span.icon {
  font-size: 3em;
  vertical-align: 4px;
  display: inline-block;
}
div.container section.bottom ul.data li.main span.meta {
  position: absolute;
  bottom: 4px;
  right: 20px;
  font-size: 0.9em;
}
div.container section.bottom ul.data li:last-of-type {
  border: 0;
}

.text-right {
  text-align: right;
}

*[role="top-left"] {
  position: absolute;
  top: 20px;
  left: 20px;
}

*[role="top-right"] {
  position: absolute;
  top: 20px;
  right: 20px;
}

*[role="bottom-left"] {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

*[role="bottom-right"] {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

@-webkit-keyframes bounce-in {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
  }
  25% {
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  75% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 0.9;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
  }
  25% {
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  75% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 0.9;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}


/*Downloaded from https://www.codeseek.co/chrishutchinson/weather-pane-nKBds */
/**
* Using the OpenWeatherMap to get the weather data for the entered location
* Work in progress
* API reference: http://openweathermap.org/API
*/
/*$(document).ready(function(){
  $('#find').on('click', function(){
    loadWeather($('#search').val());
  });
  
  function loadWeather(location){
    $.ajax({
      url: 'http://api.openweathermap.org/data/2.5/forecast/daily?mode=json&units=metric&cnt=7',
      data: {q: location},
      type: 'GET',
      success: function(response){
        var days = response.list;
        days.forEach(function(elem, index){
          var li = $('ul.data').find('li[data-id="' + index + '"]');
          console.log(elem);
          $(li).find('span.temparature').html(Math.round(elem.temp.day) + '&deg;');
        });
      },
      error: function(response){
        console.error(response);
      }
    });
  }
});
*/

Comments