JSFiddle - React, Tailwind, and code Playground

by NV

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<div id="temp_converter"></div>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

input {
    width: 6em;
    text-align: right;
}

JavaScript 1.7

/**
 * @jsx React.DOM
 */
var NumberField = React.createClass({
	render: function() {
		return <input type="number" value={this.props.value} onInput={this.onInput}/>;
	},
	onInput: function(e) {
		if (!this.props.onValueChange) {
			return;
		}
		var value = parseInt(e.target.value, 10);
		return this.props.onValueChange(value);
	}
});


/**
 * @jsx React.DOM
 */
var TempConverter = React.createClass({
	getInitialState: function() {
		return {c: 0};
	},
	render: function() {
		var c = this.state.c;
		return <p>
			<NumberField onValueChange={this.onChangeC} value={c}/> C
			<br/>
			<NumberField onValueChange={this.onChangeF} value={c2f(c)}/> F
		</p>;
	},
	onChangeC: function(c) {
		this.setState({c: c});
	},
	onChangeF: function(f) {
		this.setState({c: f2c(f)});
	}
});


function c2f(c) {
	return 1.8 * c + 32;
}
function f2c(f) {
	return 0.5555555555555 * (f - 32);
}


React.renderComponent(
	<TempConverter/>,
	document.getElementById('temp_converter')
);