facebook · zpao · Feb 18, 2015 · Feb 10, 2015 · sophiebits · Feb 11, 2015
diff --git a/examples/ballmer-peak/ballmer_peak.png b/examples/ballmer-peak/ballmer_peak.png
diff --git a/examples/ballmer-peak/example.js b/examples/ballmer-peak/example.js
diff --git a/examples/quadratic/example.js b/examples/quadratic/example.js
@@ -0,0 +1,57 @@
+var QuadraticCalculator = React.createClass({
+  getInitialState: function() {
+    return {
+      a: 1,
+      b: 3,
+      c: -4
+    };
+  },
+
+  /**
+   * This function will be re-bound in render multiple times. Each .bind() will
+   * create a new function that calls this with the appropriate key as well as
+   * the event. The key is the key in the state object that the value should be
+   * mapped from.
+   */
+  handleInputChange: function(key, event) {
+    var partialState = {};
+    partialState[key] = parseFloat(event.target.value);
+    this.setState(partialState);
+  },
+
+  render: function() {
+    var a = this.state.a;
+    var b = this.state.b;
+    var c = this.state.c
+    var x1 = (-b + Math.sqrt(Math.pow(b, 2) - 4 * a * c)) / (2 * a);
+    var x2 = (-b - Math.sqrt(Math.pow(b, 2) - 4 * a * c)) / (2 * a);
+    return (
+      <div>
+        <strong>
+          <em>ax</em><sup>2</sup> + <em>bx</em> + <em>c</em> = 0
+        </strong>
+        <h4>Solve for <em>x</em>:</h4>
+        <p>
+          <label>
+            a: <input type="number" value={a} onChange={this.handleInputChange.bind(null, 'a')} />
+          </label>
+          <br />
+          <label>
+            b: <input type="number" value={b} onChange={this.handleInputChange.bind(null, 'b')} />
+          </label>
+          <br />
+          <label>
+            c: <input type="number" value={c} onChange={this.handleInputChange.bind(null, 'c')} />
+          </label>
+          <br />
+          x: <strong>{x1}, {x2}</strong>
+        </p>
+      </div>
+    );
+  }
+});
+
+React.render(
+  <QuadraticCalculator />,
+  document.getElementById('container')
+);
diff --git a/examples/ballmer-peak/index.html → examples/quadratic/index.html b/examples/ballmer-peak/index.html → examples/quadratic/index.html
@@ -2,11 +2,11 @@
 <html>
   <head>
     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
-    <title>Ballmer Peak Calculator</title>
+    <title>Quadratic Formula Calculator</title>
     <link rel="stylesheet" href="../shared/css/base.css" />
   </head>
   <body>
-    <h1>Ballmer Peak Calculator</h1>
+    <h1>Quadratic Formula Calculator</h1>
     <div id="container">
       <p>
         If you can see this, React is not working right. This is probably because you&apos;re viewing