A Simple Calculator made in React.JS
A Pen by Faddah Wolf on CodePen.
<div id="calc-app" class="loading">Loading</div> | |
<div class="clear"></div> |
A Simple Calculator made in React.JS
A Pen by Faddah Wolf on CodePen.
var spcButtonArr = [ | |
{ | |
name: "M+", | |
label: "M+", | |
buttonStyle: "btn btn-default btn-spc-row", | |
id: 11 | |
}, | |
{ | |
name: "M-", | |
label: "M-", | |
buttonStyle: "btn btn-default btn-spc-row", | |
id: 12 | |
}, | |
{ | |
name: "MR", | |
label: "MR", | |
buttonStyle: "btn btn-success btn-spc-row", | |
id: 13 | |
}, | |
{ | |
name: "MC", | |
label: "MC", | |
buttonStyle: "btn btn-danger btn-spc-row", | |
id: 15 | |
}, | |
{ | |
name: "%", | |
label: "%", | |
buttonStyle: "btn btn-success btn-spc-row", | |
id: 16 | |
}, | |
{ | |
name: "AC", | |
label: "AC", | |
buttonStyle: "btn btn-warning btn-spc-row", | |
id: 17 | |
} | |
]; | |
var buttonArr = [ | |
{ | |
name: "7", | |
label: "7", | |
id: 7 | |
}, | |
{ | |
name: "8", | |
label: "8", | |
id: 8 | |
}, | |
{ | |
name: "9", | |
label: "9", | |
id: 9 | |
}, | |
{ | |
name: "+", | |
label: "+", | |
id: 10 | |
}, | |
{ | |
name: "4", | |
label: "4", | |
id: 4 | |
}, | |
{ | |
name: "5", | |
label: "5", | |
id: 5 | |
}, | |
{ | |
name: "6", | |
label: "6", | |
id: 6 | |
}, | |
{ | |
name: "-", | |
label: "-", | |
id: 14 | |
}, | |
{ | |
name: "1", | |
label: "1", | |
id: 1 | |
}, | |
{ | |
name: "2", | |
label: "2", | |
id: 2 | |
}, | |
{ | |
name: "3", | |
label: "3", | |
id: 3 | |
}, | |
{ | |
name: "x", | |
label: "x", | |
id: 18 | |
}, | |
{ | |
name: "*", | |
label: "*", | |
id: 19 | |
}, | |
{ | |
name: "0", | |
label: "0", | |
id: 0 | |
}, | |
{ | |
name: ".", | |
label: ".", | |
id: 21 | |
}, | |
{ | |
name: "÷", | |
label: "÷", | |
id: 22 | |
} | |
]; | |
let nextId:number = 23; | |
var intitialNumbers = { | |
inputReceive: "0.00", | |
result: 0.00, | |
operand1: 0.00, | |
operand2: 0.00, | |
memTotal: 0.00 | |
} | |
var Display = React.createClass({ | |
propTypes: { | |
intitialNumbers: React.PropTypes.objectOf(React.PropTypes.shape({ | |
inputReceive: React.PropTypes.string.isRequired, | |
result: React.PropTypes.number.isRequired, | |
operand1: React.PropTypes.number.isRequired, | |
operand2: React.PropTypes.number.isRequired, | |
memTotal: React.PropTypes.number.isRequired | |
})).isRequired, | |
}, | |
render: function() { | |
return ( | |
<div id="grid"> | |
<div> | |
<textarea className="grid-display" name="display" readonly="true" rows="1" maxlength="15">{intitialNumbers.inputReceive}</textarea> | |
</div> | |
<SpecialButtonRow /> | |
<ButtonsRow /> | |
</div> | |
); | |
} | |
}); | |
var SpecialButtonRow = React.createClass({ | |
propTypes: { | |
spcButtonArr: React.PropTypes.arrayOf(React.PropTypes.shape({ | |
name: React.PropTypes.string.isRequired, | |
label: React.PropTypes.string.isRequired, | |
buttonStyle: React.PropTypes.string.isRequired, | |
id: React.PropTypes.number.isRequired, | |
})).isRequired, | |
}, | |
render: function() { | |
return ( | |
<div> | |
{spcButtonArr.map(function(button) { | |
return ( | |
<button type="button" className={button.buttonStyle} onClick={} id={button.name}> | |
<span>{button.label}</span> | |
</button> | |
)}) | |
} | |
</div> | |
); | |
} | |
}); | |
var ButtonsRow = React.createClass({ | |
propTypes: { | |
buttonArr: React.PropTypes.arrayOf(React.PropTypes.shape({ | |
name: React.PropTypes.string.isRequired, | |
label: React.PropTypes.string.isRequired, | |
id: React.PropTypes.number.isRequired, | |
})).isRequired, | |
}, | |
render: function() { | |
return ( | |
<div> | |
{buttonArr.map(function(button) { | |
return ( | |
<button type="button" className="btn btn-info btn-cstm" onClick={} id={button.name}> | |
<span>{button.label}</span> | |
</button> | |
)}) | |
} | |
</div> | |
); | |
} | |
}); | |
var Application = React.createClass({ | |
propTypes: { | |
}, | |
render: function() { | |
return ( | |
<Display /> | |
); | |
} | |
}); | |
ReactDOM.render(<Application initialSpcButtons={spcButtonArr} initialButtons={buttonArr}/>, document.getElementById('calc-app')); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script> | |
<script src="https://cdn.jsdelivr.net/babel/6.0.20/browser.min.js"></script> |
@import 'https://fonts.googleapis.com/css?family=Share+Tech+Mono'; | |
body { | |
font-family: 'Share Tech Mono', monospace; | |
} | |
#calc-app { | |
background-color: #F8F8F8; | |
font-family: 'Share Tech Mono', monospace; | |
font-size: 24px; | |
margin: 8px; | |
} | |
.loading:after { | |
overflow: hidden; | |
display: inline-block; | |
vertical-align: bottom; | |
-webkit-animation: ellipsis steps(4, end) 700ms infinite; | |
-moz-animation: ellipsis steps(4, end) 700ms infinite; | |
-o-animation: ellipsis steps(4, end) 700ms infinite; | |
animation: ellipsis steps(4, end) 700ms infinite; | |
content: "\2026"; | |
/* ascii code for the ellipsis character */ | |
width: 0px; | |
} | |
@keyframes ellipsis { | |
to { | |
width: 1.25em; | |
} | |
} | |
@-webkit-keyframes ellipsis { | |
to { | |
width: 1.25em; | |
} | |
} | |
@-moz-keyframes ellipsis { | |
to { | |
width: 1.25em; | |
} | |
} | |
@-o-keyframes ellipsis { | |
to { | |
width: 1.25em; | |
} | |
} | |
.clear { | |
clear: both; | |
} | |
#grid { | |
width: 380px; | |
margin: 0 auto; | |
} | |
.grid-display { | |
width: 99%; | |
height: 65px; | |
background-color: rgba(91, 192, 222, 0.7); | |
font-size: 36px; | |
font-weight: bold; | |
font-style: italic; | |
display: inherit; | |
vertical-align: middle; | |
text-align: right; | |
margin: 1% 7% 2% 0; | |
padding: 3% 3% 1% 1%; | |
border-radius: 10%; | |
resize: none; | |
} | |
.btn-cstm { | |
width: 23.95%; | |
height: 150%; | |
font-size: 30px; | |
font-weight: bold; | |
margin-bottom: 1%; | |
margin-right: 1%; | |
} | |
.btn-spc-row { | |
width: 15.5%; | |
height: 150%; | |
font-size: 30px; | |
font-weight: bold; | |
margin-bottom: 1%; | |
margin-right: 1.15%; | |
} | |
.btn-cstm:hover, | |
.btn-spc-row:hover { | |
color: black; | |
transition: 0.3s ease; | |
} | |
textarea { | |
overflow: hidden; | |
} |