weather

vuejs

by JThomas

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.3/lodash.min.js"></script>
<template id="widget-weather-template">
  <div class="weather-widget">
    <div class="weather-animation-stage" v-html="weatherGraphicSvg">

    </div>
    <span class="weather-tempature">
      {{ tempature }}&#176;
    </span>
  </div>
</template>

<div id="app">
  <div class="center info">
    Weather for
    <input type="number" class="holo" v-model="input.zipcode" v-focus/>
  </div>
  <div class="text-important center push-down-20">{{ city }}</div>

  <widget-weather v-bind="todaysWeather"></widget-weather>

  <div class="center info">
    <small>This example uses <a href="https://lodash.com/">lodash</a>, <a href="https://polyfill.io/v2/docs/">polyfill</a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">fetch</a> APIs.  CSS Weather animations provided by <a href="https://codepen.io/getreworked/pen/GpBpmg">Alessio Atzeni</a>.  ICS-Like input provided by <a href="https://stackoverflow.com/questions/11816166/android-ics-like-input-field-in-css">lordvlad</a>.</small>
  </div>
</div>

CSS

html {
  font-family: "Roboto", "Droid Sans", sans-serif;
}

.center {
  text-align: center;
  margin: 0 auto;
}

.info {
  color: #777
}

.text-important {
  color: #000;
  font-size: 1.5em;
}

.push-down-20 {
  margin-top: 20px;
}


/* input styles */

input.holo {
  /* You can set width to whatever you like */
  width: 125px;
  font-size: 16px;
  margin: 0;
  padding: 8px 8px 6px 8px;
  position: relative;
  display: inline-block;
  outline: none;
  border: none;
  background: bottom left linear-gradient(#a9a9a9, #a9a9a9) no-repeat, bottom center linear-gradient(#a9a9a9, #a9a9a9) repeat-x, bottom right linear-gradient(#a9a9a9, #a9a9a9) no-repeat;
  background-size: 1px 1px, 1px 1px, 1px 1px;
}

input.holo:hover,
input.holo:focus {
  background: bottom left linear-gradient(#0099cc, #0099cc) no-repeat, bottom center linear-gradient(#0099cc, #0099cc) repeat-x, bottom right linear-gradient(#0099cc, #0099cc) no-repeat;
  background-size: 1px 1px, 1px 1px, 1px 1px;
}


/* Weather Animations */

.weather-widget {
  padding: 10px;
  text-align: center;
  margin: 0 auto;
}

.weather-tempature {
  display: block;
  font-size: 2em;
}

.weather-animation-stage {
  display: inline-block;
  position: relative;
}

.weather-animation-stage > svg {
  height: 125px;
  width: 125px;
  fill: #000;
}


/* Thunder Bolt Animation */

.thunder-cloud .bolt {
  -webkit-animation: flash 2s infinite;
  animation: flash 2s infinite;
}

@-webkit-keyframes flash {
  0% {
    -webkit-transform: translateY(-25px) translateX(25px) scaleY(0.95);
    transform: translateY(-25px) translateX(25px) scaleY(0.95);
    opacity: 0;
  }
  5%,
  25% {
    opacity: 1;
  }
  15%,
  20% {
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(8px) translateX(-10px);
    transform: translateY(8px) translateX(-10px);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateY(8px) translateX(-10px);
    transform: translateY(8px) translateX(-10px);
    opacity: 0;
  }
  100% {
    -webkit-transform:...

JavaScript

//This is just to get a nice graphic, it is unimportant and can be skipped
//Skip to line 24 or search 32541 to find the start
window.WeatherSvgs = {
  getWeatherGraphicByCode: function(code) {
    return this._getCodeGroup(code);
  },
  _getCodeGroup: function(code) {
    if (code >= 200 && code < 300) return this.Thunderstorm;
    if (code >= 300 && code < 600) return this.Rain;
    if (code >= 600 && code < 700) return this.Snow;
    if (code == 800) return this.Sunny;
    if (code >= 801 && code < 900) return this.Cloudy;
    if (code >= 900 && code < 1000) return this.Windy;
    return '';
  },
  Thunderstorm: '<svg class="thunder-cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M400,64c-5.3,0-10.6,0.4-15.8,1.1C354.3,24.4,307.2,0,256,0s-98.3,24.4-128.2,65.1c-5.2-0.8-10.5-1.1-15.8-1.1 C50.2,64,0,114.2,0,176s50.2,112,112,112c13.7,0,27.1-2.5,39.7-7.3c12.3,10.7,26.2,19,40.9,25.4l24.9-24.9 c-23.5-7.6-44.2-21.3-59.6-39.9c-13,9.2-28.8,14.7-45.9,14.7c-44.2,0-80-35.8-80-80s35.8-80,80-80c10.8,0,21.1,2.2,30.4,6.1 C163.7,60.7,206.3,32,256,32s92.3,28.7,113.5,70.1c9.4-3.9,19.7-6.1,30.5-6.1c44.2,0,80,35.8,80,80s-35.8,80-80,80	c-17.1,0-32.9-5.5-45.9-14.7c-10.4,12.5-23.3,22.7-37.6,30.6L303,312.2c20.9-6.6,40.5-16.9,57.3-31.6c12.6,4.8,26,7.3,39.7,7.3	c61.8,0,112-50.2,112-112S461.8,64,400,64z" />    <polygon class="bolt" points="192,352 224,384 192,480 288,384 256,352 288,256 " />  </svg>',
  Snow: '<svg class="snow-cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">    <path d="M512,176c0-61.8-50.2-112-112-112c-5.3,0-10.6,0.4-15.8,1.1C354.3,24.4,307.2,0,256,0s-98.3,24.4-128.2,65.1 c-5.2-0.8-10.5-1.1-15.8-1.1C50.2,64,0,114.2,0,176s50.2,112,112,112c13.7,0,27.1-2.5,39.7-7.3c29,25.2,65.8,39.3,104.3,39.3 c38.5,0,75.3-14.1,104.3-39.3c12.6,4.8,26,7.3,39.7,7.3C461.8,288,512,237.8,512,176z M354.1,241.3C330.6,269.6,295.6,288,256,288...