const keyButtons = [
{name: "clear", clsName: "key long", value: "AC", visual: "AC"},
{name: "divide", clsName: "key greyKeys", value: "/", visual: "/"},
{name: "multiply", clsName: "key greyKeys", value: "x", visual: "x"},
{name: "seven", clsName: "key", value: 7, visual: 7},
{name: "eight", clsName: "key", value: 8, visual: 8},
{name: "nine", clsName: "key", value: 9, visual: 9},
{name: "subtract", clsName: "key scaleUp greyKeys", value: "-", visual: "-"},
{name: "four", clsName: "key", value: 4, visual: 4},
{name: "five", clsName: "key", value: 5, visual: 5},
{name: "six", clsName: "key", value: 6, visual: 6},
{name: "add", clsName: "key scaleUp greyKeys", value: "+", visual: "+"},
{name: "one", clsName: "key", value: 1, visual: 1},
{name: "two", clsName: "key", value: 2, visual: 2},
{name: "three", clsName: "key", value: 3, visual: 3},
{name: "equals", clsName: "key tall scaleUp", value: "=", visual: "="},
{name: "zero", clsName: "key long zero", value: 0, visual: 0},
{name: "decimal", clsName: "key scaleUp", value: ".", visual: "."},
];
function History (props) {
return(
<div id="equation" className="ops" >
{props.value}
</div>
)
}
function Key (props) {
return (
<button
id={props.name}
className={props.clsName}
onClick={(props.onClick)}
value={props.value}>
{props.visual}
</button>
);
}
class Keys extends React.Component {
constructor(props) {
super(props);
}
render() {
const arrKeyBtns = keyButtons.map((item)=>{
return(
<Key
name={item.name}
clsName={item.clsName}
onClick={this.props.onClick}
value={item.value}
visual={item.visual}
/>
);
});
return (
<div className="keyboard">
{arrKeyBtns}
</div>
);
}
}
//------- Calculator class -------------------------
class Calculator extends React.Component {
constructor(props) {
super(props);
this.state = { total: 0,
numPressed: "",
currNumber: "",
preNumber: "",
negNumber: "",
opPressed: "clear",
currEquation: "",
history: [],
operate: false,
evaled: false,
};
this.handleKeyPress = this.handleKeyPress.bind(this);
}
handleKeyPress(e) {
let val;
if(e.type === "click") {
val = e.target.value;
} else if(e.type === "keydown") {
val = e.key;
}else{return; }
let keyVal = val;
let displayStr = display.textContent;
let eqStr = equation.textContent;
let dec = /\.+/g;
let theEquation = "i am number 4";
let totalValue;
let stTotal = this.state.total;
let stNumPressed = this.state.numPressed;
let stCurrNumber = this.state.currNumber;
let stPreNumber = this.state.preNumber;
let stNegNumber = this.state.negNumber;
let stOpPressed = this.state.opPressed;
let stCurrEquation = this.state.currEquation;
let stHistory = this.state.history.slice(0);
let stOperate = this.state.operate;
let stEvaled = this.state.evaled;
switch(val) {
case "Enter":
case "=":
//Do Not Allow double evals
if(this.state.operate &&
(this.state.opPressed === "Enter" || this.state.opPressed === "="))
{return;}
//Is last Num a Neg?
if(this.state.opPressed === "Neg"){
//Get Total
stTotal = this.evalEquation(stCurrEquation + "-" + stNegNumber);
stCurrEquation += "-" + stNegNumber + "=" + stTotal;
//HUD
eqStr = stCurrEquation.replace(/\s/g, "");
displayStr = stTotal;
//State
(Array.isArray(stHistory)) ?
stHistory.push(stCurrEquation) :
stHistory = [stCurrEquation];
stCurrEquation = stTotal;
stEvaled = true;
stOperate = true;
stOpPressed = keyVal;
stPreNumber = "-" + stNegNumber;
stNegNumber = "";
stNumPressed = "";
}else{
//State
stTotal = this.evalEquation(stCurrEquation);
stCurrEquation += "=" + stTotal;
(Array.isArray(stHistory)) ?
stHistory.push(stCurrEquation) :
stHistory = [stCurrEquation];
stOperate = true;
stEvaled = true;
stOpPressed = keyVal;
stCurrEquation = stTotal;
stPreNumber = stCurrNumber;
stCurrNumber = "";
//HUD
eqStr += keyVal + stTotal;
displayStr = stTotal;
}
break;
case ".":
if(this.state.evaled || this.state.opPressed === "clear" ){ // <--- prev keyPress was = or AC
//HUD
eqStr = "0.";
displayStr = "0.";
//State
stCurrEquation = "0.";
stCurrNumber = "0.";
stOpPressed = "";
stEvaled = false;
} else if(this.state.operate){ // <--- prev keyPress was operator
eqStr += "0."
displayStr = "0.";
stCurrEquation += "0.";
stCurrNumber = "0.";
} else if(!dec.test(stCurrNumber)) { // <--- prev keyPress was Number
eqStr += val;
displayStr += val;
stCurrEquation += val;
stCurrNumber += val;
}
break;
case "-":
case "+":
case "x":
case "*":
case "/":
// Do Not Allow Dupe op KeyPress except for -
if(this.state.operate && this.state.opPressed === keyVal && keyVal !== "-"){return;}
if(stOperate && keyVal === "-" && !stEvaled){
//State
stOpPressed = "Neg";
stEvaled = false;
stOperate = false;
//HUD
displayStr = "(-)";
eqStr = stCurrEquation.replace(/\s/g, "") ;
}else{
if(this.state.opPressed === "Neg"){
//State
stTotal = this.evalEquation(stCurrEquation + "-" + stNegNumber);
stCurrEquation += "-" + stNegNumber + " " + keyVal + " ";
stEvaled = false;
stOperate = true;
stOpPressed = keyVal;
stPreNumber = "-" + stNegNumber; stNegNumber = "";
stNumPressed = "";
}else{
//State
stTotal = this.evalEquation(stCurrEquation + " " + keyVal);
stCurrEquation += " " + keyVal + " ";
stEvaled = false;
stOperate = true;
stOpPressed = keyVal;
stPreNumber = stCurrNumber;
stCurrNumber = "";
stNumPressed = "";
//HUD
eqStr += keyVal;
displayStr = stTotal;
}
}
break;
case "Delete":
case "AC":
stTotal = 0;
stNumPressed = "";
stCurrNumber = "";
stPreNumber = "";
stNegNumber = "";
stOpPressed = "clear";
stCurrEquation = "";
stOperate = false;
stEvaled = false;
displayStr = 0;
eqStr = "";
break;
case "Backspace":
// stepBack();
break;
case "0":
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
// Do Not Allow Num to start with 00
if(/^00/g.test(display.textContent + val)) {return;}
// Was Last keyPress op || = || AC? Yes: Start a new Num
if(this.state.operate || stOpPressed === "clear"){
if(this.state.opPressed === "Neg"){
//HUD
displayStr = "(-" + stNegNumber + keyVal + ")";
eqStr = displayStr;
//state
stNumPressed = keyVal;
stCurrNumber = "";
stPreNumber = stTotal;
stNegNumber = keyVal;
stOperate = false;
stEvaled = false;
stCurrEquation = (stEvaled) ? keyVal : stCurrEquation += keyVal;
// stOpPressed = "Neg";
}else{
//HUD
displayStr = keyVal;
eqStr = (stEvaled) ? keyVal : eqStr + keyVal;
//state
stNumPressed = keyVal;
stCurrNumber += keyVal;
stPreNumber = stTotal;
stNegNumber = "";
stOpPressed = "";
stCurrEquation = (stEvaled) ? keyVal : stCurrEquation += keyVal;
stOperate = false;
stEvaled = false;
}
}else{
if(this.state.opPressed === "Neg"){ // <----Neg Num
//HUD
displayStr = "(-" + stNegNumber + keyVal + ")";
eqStr = stCurrEquation.replace(/\s/g, "") + "(-" + stNegNumber + keyVal + ")" ;
//state
stNumPressed = keyVal;
stPreNumber = stNegNumber + keyVal;
stNegNumber += keyVal;
}else{ //<--- Pos Num
//HUD
displayStr += keyVal;
eqStr += keyVal;
//state
stNumPressed = keyVal;
stPreNumber = stCurrNumber;
stCurrNumber += keyVal;
stCurrEquation += keyVal;
stOpPressed = "";
}
}
break;
}
//*UPDATE HUD
equation.textContent = eqStr;
display.textContent = displayStr;
//*UPDATE STATE
this.setState({
total: stTotal,
numPressed: stNumPressed,
currNumber: stCurrNumber,
preNumber: stPreNumber,
negNumber: stNegNumber,
opPressed: stOpPressed,
currEquation: stCurrEquation,
operate: stOperate,
evaled: stEvaled,
history: stHistory,
});
} // END of handleKeyPress function
evalEquation(equation) {
equation = equation.replace(/\s=\s/g, "");
// console.log(equation);
let parts = equation.split(" ");
let result = 0;
let newNum = 0;
let op = "+"
for(let i = 0;i < parts.length; i++){
if(Number(parts[i]) || parts[i] === "0"){ // <----------- Is It a Number?
if(i === 0){ //<------------------ First loop?
result = Number(parts[i]);
}else{
newNum = Number(parts[i]);
switch(op){
case "+":
result = result + newNum;
break;
case "-":
result = result - newNum;
break;
case "*":
case "x":
result = result * newNum;
break;
case "/":
result = result / newNum;
break;
}
}
}else{
op = parts[i];
}
}
return Number.parseFloat(result.toFixed(8));
}
render() {
let historyList = (Array.isArray(this.state.history)) ? this.state.history.slice(0) : "";
if(Array.isArray(historyList)){
historyList = historyList.map((item, i) => <li key={i}>{item}</li>);
}
return (
<div id="main">
<div className="console" tabindex="0" onKeyDown={(e) => this.handleKeyPress(e)} >
<div className="title"><h2>The Counting Machine</h2></div>
<History />
<div id="display" className="display-out"></div>
<Keys onClick={(e) => this.handleKeyPress(e)} />
<div id="historyBtnRow" >
<button className="historyBtn" onClick={drpdwnFunction} title="History">
<i id="caret" className="fas fa-history rotate"></i>
</button>
</div>
</div>
<div id="history" className="panel slideup">
<ol id="log" class="custom-counter">{historyList}</ol>
</div>
</div>
);
}
}
ReactDOM.render(<Calculator />, document.getElementById("app"));
function drpdwnFunction() {
var e = document.getElementById("history");
if(e.classList.contains("slidedown")){
e.classList.replace("slidedown", "slideup");
}else{
e.classList.replace("slideup", "slidedown");
}
}
!
