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

More from chrishutchinson

A Pen by Chris Hutchinson

A Pen by Chris Hutchinson

By chrishutchinson
A Pen by Chris Hutchinson

A Pen by Chris Hutchinson

By chrishutchinson
A Pen by Chris Hutchinson

A Pen by Chris Hutchinson

By chrishutchinson
Better carousel / slider with label navigation &amp; CSS animation

Better carousel / slider with label navigation & CSS animation

By chrishutchinson

You Might Also Like

Drawing circles

Drawing circles

By ghyde03
Everything is Free Until Sunday!

Everything is Free Until Sunday!

By reallygoodemails
A Pen by Daksh Dobhal

A Pen by Daksh Dobhal

By KiraDeus
Convert Image to Grayscale

Convert Image to Grayscale

By dalir
A Pen by Kristy Sullivan

A Pen by Kristy Sullivan

By ksullivan
SVG spinner

SVG spinner

By karbonik
A Pen by Alberto Cano

A Pen by Alberto Cano

By albertocanog
HTML5 draggable

HTML5 draggable

By teckliew
© 2018 - Copyright CodeSeek.co
contact email