JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<script src="http://fb.me/JSXTransformer-0.5.1.js"></script>
<script src="http://fb.me/react-with-addons-0.5.1.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<h1>Ballmer Peak calculator</h1>
    <div id="container">
      <p>
        If you can see this, React is not working right. This is probably because you&apos;re viewing
        this on your file system instead of a web server. Try running
        <pre>
          python -m SimpleHTTPServer
        </pre>
        and going to <a href="http://localhost:8000/">http://localhost:8000/</a>.
      </p>
    </div>
    <h4>Example Details</h4>
    <ul>
      <li>
        This is built with
        <a href="https://github.com/substack/node-browserify">browserify</a>.
      </li>
      <li>
        This is written with JSX in a separate file and transformed in the browser.
      </li>
    </ul>
    <p>
    </p>
    <p>
      Learn more at
      <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
    </p>

CSS

body {
  background: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  padding: 30px;
}

a {
  color: #4183c4;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
  font-size: 12px;
  margin: 0 2px;
  padding: 0px 5px;
}

h1, h2, h3, h4 {
  font-weight: bold;
  margin: 0 0 15px;
  padding: 0;
}

h1 {
  border-bottom: 1px solid #ddd;
  font-size: 2.5em;
  font-weight: bold;
  margin: 0 0 15px;
  padding: 0;
}

h2 {
  border-bottom: 1px solid #eee;
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.2em;
}

p, ul {
  margin: 15px 0;
}

ul {
  padding-left: 30px;
}

JavaScript 1.7

/**
 * @jsx React.DOM
 */

function computeBallmerPeak(x) {
  // see: http://ask.metafilter.com/76859/Make-a-function-of-this-graph-Thats-like-an-antigraph
  x = x * 100;
  return (
    1-1/(1+Math.exp(-(x-6)))*.5 + Math.exp(-Math.pow(Math.abs(x-10), 2)*10)
  ) / 1.6;
}

var BallmerPeakCalculator = React.createClass({
  getInitialState: function() {
    return {bac: 0};
  },
  handleChange: function(event) {
    this.setState({bac: event.target.value});
  },
  render: function() {
    var bac;
    var pct;
    pct = computeBallmerPeak(this.state.bac);
    if (isNaN(pct)) {
      pct = 'N/A';
    } else {
      pct = (100 - Math.round(pct * 100)) + '%';
    }
    return (
      <div>
        <img src="https://raw.github.com/facebook/react/master/examples/ballmer-peak/ballmer_peak.png" />
        <p>Credit due to <a href="http://xkcd.com/323/">xkcd</a>.</p>
        <h4>Compute your Ballmer Peak:</h4>
        <p>
          If your BAC is{' '}
          <input type="text" onChange={this.handleChange} value={this.state.bac} />
          {', '}then <b>{pct}</b> of your lines of code will have bugs.
        </p>
      </div>
    );
  }
});

React.renderComponent(
  <BallmerPeakCalculator />,
  document.getElementById('container')
);