weather app v3

React Component

by Sparrow Squire

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="weatherContainer"></div>

CSS

.weatherAverages {
  position: relative; 
  width: 100%;
  max-width: 768px;
  height: 300px; /*TODO: dynamic*/
  color: #5c5e60;
  font-family: sans-serif;
  font-size: 16px;
  margin: 0 auto; 
  padding: 0;
  padding-right: 170px; /*Space for key*/
}

.weatherAverages th,
.weatherAverages tr,
.weatherAverages td { 
  position: relative;
  display: table-column;
  text-align: center;
  margin: 0; 
  padding: 0;
  z-index: 2;
 }

.weatherAverages tr {
  float: left;
  height: 300px; /*TODO: dynamic*/
  width: 7.416%
}

.weatherAverages .bar {
  position: absolute;
  bottom: 0;
  display: table-cell;
  width: 100%
}

  .weatherAverages .bar span {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
  }
  
  .weatherAverages .temp {
    background: #F38630
   }
   
  /*Rain scatter TODO: Replace with icon*/
  .weatherAverages .bar.rain:after {
    content: "*";
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 999999;
    color: #69D2E7;
    margin-top: -5px;
    display: block;
    height: 10px;
    margin-left: -3px;
  }
  
  /* //Rain bar
  .weatherAverages .rain {
    background: #69D2E7;
    left: 50%
  } */

/*Axis*/
.weatherAverages thead,
.weatherAverages tfoot {
  position: relative;
  float: left;
  width: 10%;
  height: 300px; /*TODO: dynamic*/
}

.weatherAverages thead th,
.weatherAverages thead tr,
.weatherAverages thead td,
.weatherAverages tfoot th,
.weatherAverages tfoot tr,
.weatherAverages tfoot td {
  display: block;
  width: 100%
}

.weatherAverages thead tr,
.weatherAverages tfoot tr {
  position: absolute;
  bottom: -10px;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

  .weatherAverages thead tr {padding-right: 15px}

  .weatherAverages tfoot tr {padding-left: 15px}

  .weatherAverages thead tr:first-of-type,
  .weatherAverages tfoot tr:first-of-type {
    top: 0;
    bottom: auto
  }

.weatherAverages thead td {text-align:...

JavaScript 1.7

var WeatherComponent = React.createClass({
    render: function() {
    	var months = [
      	{
        	month: 'Jan',
          cel: '10',
          fah: '65',
          rain: '100',
          wind: '7',
          humid: '77',
          precip: '35'
        },
      	{
        	month: 'Feb',
          cel: '15',
          fah: '90',
          rain: '90',
          wind: '7',
          humid: '77',
          precip: '35'
        },
      	{
        	month: 'Mar',
          cel: '20',
          fah: '65',
          rain: '80',
          wind: '7',
          humid: '77',
          precip: '35'
        },
      	{
        	month: 'Apr',
          cel: '25',
          fah: '65',
          rain: '70',
          wind: '7',
          humid: '77',
          precip: '35'
        },
      	{
        	month: 'May',
          cel: '30',
          fah: '65',
          rain: '60',
          wind: '7',
          humid: '77',
          precip: '35'
        },
      	{
        	month: 'Jun',
          cel: '40',
          fah: '65',
          rain: '50',
          wind: '7',
          humid: '77',
          precip: '35'
        },
      	{
        	month: 'Jul',
          cel: '50',
          fah: '65',
          rain: '40',
          wind: '7',
          humid: '77',
          precip: '35'
        },
      	{
        	month: 'Aug',
          cel: '60',
          fah: '65',
          rain: '30',
          wind: '7',
          humid: '77',
          precip: '35'
        },
      	{
        	month: 'Sep',
          cel: '50',
          fah: '65',
          rain: '50',
          wind: '7',
          humid: '77',
          precip: '35'
        },
      	{
        	month: 'Oct',
          cel: '40',
          fah: '65',
          rain: '60',
          wind: '7',
          humid: '77',
          precip: '35'
        },
      	{
        	month: 'Nov',
          cel: '30',
          fah: '65',
          rain: '70',
          wind: '7',
          humid: '77',
          precip: '35'
     ...