React JS Weather App

index.html

<div id="app"></div>

React JS Weather App.markdown

React JS Weather App

A Pen by Daniel Williams on CodePen.

License.

script.js

/** @jsx React.DOM */

var WeatherApp = React.createClass({
  
  /// Capitalize the first letter of a string
  capitalizeFirstLetter : function(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
  },
  
  /// Set an initial state
  getInitialState: function () {
    return {
      location: 'Bristol'
    };
  },
  
  /// Use jQuery Ajax to get some data
  loadData: function (location) {
    return $.get('http://api.openweathermap.org/data/2.5/weather?q=' + location);
  },
  
  /// Set the state after loading data from the API
  setStateWithData: function (location) {
    this.loadData(location).then( function (data) {      
      this.setState({
         weather: this.capitalizeFirstLetter( data.weather[0].description ),
         location: data.name
      });
    }.bind(this));
  },
  
  /// After initial render
  componentDidMount: function () {
    /// Pass in the initial state to get the initial weather
    this.setStateWithData(this.state.location);
  },
  
  /// Run when we need to get data after input has changed
  getData: function () {
    var location = this.refs.newLocation.getDOMNode().value;
    if (location !== '')
    {
      this.setStateWithData(location);
    }
  },
  
  /// Run when the form is submitted
  formSubmit: function (e) {
    e.preventDefault();
    /// Clear the input
    this.refs.newLocation.getDOMNode().value = '';
  },
  
  render: function() {
    return (
      <div id="app__interface">
        <div className="panel panel-default text-center">
          <div className="panel-body">
            <form className="form-inline" onSubmit={this.formSubmit}>
                <div className="input-group">
                  <input type="text" className="form-control" placeholder="Enter a city name" ref="newLocation" required/>
                  <span className="input-group-btn">
                    <button type="submit" className="btn btn-success" onClick={this.getData}>Search</button>
                  </span>
                </div>
            </form>
          </div>
        </div>
        <WeatherDetails location={this.state.location} weather={this.state.weather}/>
      </div>
    );
  }
  
});

var WeatherDetails = React.createClass({
  
  render: function() {
    return (
      <div className="panel panel-default text-center">
        <div className="panel-heading"><strong>{this.props.location}</strong></div>
        <div className="panel-body">
          {this.props.weather}
        </div>
      </div>    
    )
  }
  
});

React.renderComponent(
  <WeatherApp/>,
  document.getElementById('app'),
  function(){
    document.getElementById('app').classList.add('in-viewport');
  }
);

scripts

<script src="https://codepen.io/chriscoyier/pen/yIgqi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.11.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.11.0/JSXTransformer.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

style.css

$panel-width:  360px;

body {
  margin: 100px;
  background-color: SteelBlue;
}

#app {
  position: absolute;
  top: -100%;
  max-height: $panel-width;
  
  
  transition: top 1s;
  
  &.in-viewport {
    top: 50%;
    left: 50%;
    margin-top: -$panel-width / 2;
    margin-left: -$panel-width / 2;
  }
}

.panel {
  max-width: $panel-width;
  margin-left: auto;
  margin-right: auto;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />