added ErrorModal.jsx && styling error msg

app/components/ErrorModal.jsx

@@ -0,0 +1,23 @@
+var React = require('react');
+
+var ErrorModal = React.createClass({
+  componentDidMount: function (){
+    var modal = new Foundation.Reveal($('#error-modal'));
+    modal.open();
+  },
+  render: function () {
+    return (
+      <div id="error-modal" className="tiny reveal text-center" data-reveal="">
+        <h4>Hey, Excuse me</h4>
+        <p>error: city not found</p>
+        <p>
+          <button className="button hollow warning" data-close="">
+            Try Another city
+          </button>
+        </p>
+      </div>
+    );
+  }
+});
+
+module.exports = ErrorModal;

app/components/Weather.jsx

@@ -1,6 +1,7 @@
 var React = require('react');
 var WeatherForm = require('WeatherForm');
 var WeatherMessage = require('WeatherMessage');
+var ErrorModal = require('ErrorModal');
 var openWeatherMap = require('openWeatherMap');
 
 var Weather = React.createClass({
@@ -12,7 +13,10 @@ var Weather = React.createClass({
   handleSearch: function (location) {
     var that = this;
 
-    this.setState({isLoading: true});
+    this.setState({
+      isLoading: true,
+      errorMessage: undefined
+    });
 
     openWeatherMap.getTemp(location).then(function (temp) {
       that.setState({
@@ -20,13 +24,15 @@ var Weather = React.createClass({
         temp: temp,
         isLoading: false
       });
-    }, function (errorMessage) {
-      that.setState({isLoading: false});
-      alert(errorMessage);
+    }, function (e) {
+      that.setState({
+        isLoading: false,
+        errorMessage: e.message
+      });
     });
   },
   render: function () {
-    var {isLoading, temp, location} = this.state;
+    var {isLoading, temp, location, errorMessage} = this.state;
 
     function renderMessage () {
       if (isLoading) {
@@ -36,11 +42,20 @@ var Weather = React.createClass({
       }
     }
 
+    function renderError() {
+      if (typeof errorMessage === 'string') {
+        return (
+          <ErrorModal/>
+        )
+      }
+    }
+
     return (
       <div>
         <h1 className="text-center">Get Weather</h1>
         <WeatherForm onSearch={this.handleSearch}/>
         {renderMessage()}
+        {renderError()}
       </div>
     )
   }

webpack.config.js

@@ -29,7 +29,8 @@ module.exports = {
        WeatherMessage: 'app/components/WeatherMessage.jsx',
        About: 'app/components/About.jsx',
        Examples: 'app/components/Examples.jsx',
-       openWeatherMap: 'app/api/openWeatherMap.jsx'
+       openWeatherMap: 'app/api/openWeatherMap.jsx',
+       ErrorModal: 'app/components/ErrorModal.jsx'
       },
     extensions: ['', '.js', '.jsx']
   },