JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="react-wrapper"></div>
CSS
@import url(https://fonts.googleapis.com/css?family=Poiret+One);
#wrapper {
width: 300px;
border: 2px solid #d5d5d5;
}
#display {
height: 40px;
line-height: 40px;
font-size: 2em;
font-family: 'Poiret One';
border: 2px solid #d5d5d5;
border-bottom: 4px solid #d5d5d5;
text-align: right;
padding: 0px 10px;
}
#clearDisplay {
width: 98%;
margin: 1% 1%;
letter-spacing: 5px;
font-size: 1.5em;
font-family: 'Poiret One';
}
.btn {
width: 23%;
margin: 1%;
font-size: 2em;
font-family: 'Poiret One';
transition: .3s;
}
.btn:hover {
transform: scale(1.1);
}
JavaScript 1.7
var layout = [
['7', '8', '9', '/'],
['4', '5', '6', '*'],
['1', '2', '3', '-'],
['0', '.', '=', '+']
]
var Button = React.createClass({
handleClick: function() {
this.props.handleClick(this.props.value);
},
render: function() {
return (
<button className={'btn'} onClick={this.handleClick}>{this.props.value}</button>
)
}
});
var Calc = React.createClass({
getInitialState: function() {
return { 'stash': '', 'display': '' }
},
clear: function() {
this.setState({ 'stash': '', 'display': '' });
},
handleClick: function(value) {
if (value === '=') {
var result = eval(this.state.display);
this.setState({ 'stash': result, 'display': result });
}
else this.setState({ 'display': this.state.display += value });
},
render: function() {
var self = this,
buttons = layout.map(function(row, i) {
var r = row.map(function(btn) {
return <Button
key={btn}
value={btn}
handleClick={self.handleClick} />
});
return <div key={i}>{r}</div>
});
return (
<div id={'wrapper'}>
<div id={'display'}>{this.state.display}</div>
<button id={'clearDisplay'} onClick={this.clear}>clear</button>
{buttons}
</div>
)
}
})
ReactDOM.render(
<Calc />,
document.getElementById('react-wrapper')
)