Replace Ballmer Peak example with Quadratic Formula
Paul O’Shannessy committed
Feb 9, 2015 at 19:36 UTC
1caeda30ea4d9e3246d95b5a3d8f325725e8401e
4 files changed
+59
-42
examples/ballmer-peak/ballmer_peak.png
Binary files a/examples/ballmer-peak/ballmer_peak.png and /dev/null differ
examples/ballmer-peak/example.js
deleted
-40
@@ -1,40 +0,0 @@
1
-function computeBallmerPeak(x) {
2
- // see: http://ask.metafilter.com/76859/Make-a-function-of-this-graph-Thats-like-an-antigraph
3
- x = x * 100;
4
- return (
5
- 1-1/(1+Math.exp(-(x-6)))*.5 + Math.exp(-Math.pow(Math.abs(x-10), 2)*10)
6
- ) / 1.6;
7
-}
8
-
9
-function percentage(x) {
10
- return isNaN(x) ? 'N/A' : (100 - Math.round(x * 100)) + '%';
11
-}
12
-
13
-var BallmerPeakCalculator = React.createClass({
14
- getInitialState: function() {
15
- return {bac: 0};
16
- },
17
- handleChange: function(event) {
18
- this.setState({bac: event.target.value});
19
- },
20
- render: function() {
21
- var pct = percentage(computeBallmerPeak(this.state.bac));
22
- return (
23
- <div>
24
- <img src="./ballmer_peak.png" />
25
- <p>Credit due to <a href="http://xkcd.com/323/">xkcd</a>.</p>
26
- <h4>Compute your Ballmer Peak:</h4>
27
- <p>
28
- If your BAC is{' '}
29
- <input type="text" onChange={this.handleChange} value={this.state.bac} />
30
- {', '}then <b>{pct}</b> of your lines of code will be bug free.
31
- </p>
32
- </div>
33
- );
34
- }
35
-});
36
-
37
-React.render(
38
- <BallmerPeakCalculator />,
39
- document.getElementById('container')
40
-);
examples/quadratic/example.js
new
+57
@@ -0,0 +1,57 @@
1
+var QuadraticCalculator = React.createClass({
2
+ getInitialState: function() {
3
+ return {
4
+ a: 1,
5
+ b: 3,
6
+ c: -4
7
+ };
8
+ },
9
+
10
+ /**
11
+ * This function will be re-bound in render multiple times. Each .bind() will
12
+ * create a new function that calls this with the appropriate key as well as
13
+ * the event. The key is the key in the state object that the value should be
14
+ * mapped from.
15
+ */
16
+ handleInputChange: function(key, event) {
17
+ var partialState = {};
18
+ partialState[key] = parseFloat(event.target.value);
19
+ this.setState(partialState);
20
+ },
21
+
22
+ render: function() {
23
+ var a = this.state.a;
24
+ var b = this.state.b;
25
+ var c = this.state.c
26
+ var x1 = (-b + Math.sqrt(Math.pow(b, 2) - 4 * a * c)) / (2 * a);
27
+ var x2 = (-b - Math.sqrt(Math.pow(b, 2) - 4 * a * c)) / (2 * a);
28
+ return (
29
+ <div>
30
+ <strong>
31
+ <em>ax</em><sup>2</sup> + <em>bx</em> + <em>c</em> = 0
32
+ </strong>
33
+ <h4>Solve for <em>x</em>:</h4>
34
+ <p>
35
+ <label>
36
+ a: <input type="number" value={a} onChange={this.handleInputChange.bind(null, 'a')} />
37
+ </label>
38
+ <br />
39
+ <label>
40
+ b: <input type="number" value={b} onChange={this.handleInputChange.bind(null, 'b')} />
41
+ </label>
42
+ <br />
43
+ <label>
44
+ c: <input type="number" value={c} onChange={this.handleInputChange.bind(null, 'c')} />
45
+ </label>
46
+ <br />
47
+ x: <strong>{x1}, {x2}</strong>
48
+ </p>
49
+ </div>
50
+ );
51
+ }
52
+});
53
+
54
+React.render(
55
+ <QuadraticCalculator />,
56
+ document.getElementById('container')
57
+);
examples/quadratic/index.html
renamed
+2
-2
@@ -2,11 +2,11 @@
2
<html>
3
<head>
4
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
5
- <title>Ballmer Peak Calculator</title>
5
+ <title>Quadratic Formula Calculator</title>
6
<link rel="stylesheet" href="../shared/css/base.css" />
7
</head>
8
<body>
9
- <h1>Ballmer Peak Calculator</h1>
9
+ <h1>Quadratic Formula Calculator</h1>
10
<div id="container">
11
<p>
12
If you can see this, React is not working right. This is probably because you're viewing