Hi All,
I’m a bit lost as to why my JavaScript calculator is not passing more of the tests. It appears to be working fine when I press the buttons and run calculations on it, but only 7 of the 16 tests pass. Sometimes when I run the test, it bugs out and the calculator disappears. Please see code and error messages below. My guess is it has something to do with me using the eval() method to set this.state.displaybottom which gets displayed in the element with ID “display”, but I’m not sure.
JS
import React, { useState } from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
import useStateInCustomProperties from "https://cdn.skypack.dev/use-state-in-custom-properties";
const operatorArr = ["+", "-", "*", "/"];
const numArr = [];
const strArr = [];
class Calculator extends React.Component {
constructor(props) {
super(props);
this.state = {
displaytop: 0,
displaybottom: 0
}
this.numInput = this.numInput.bind(this);
this.equals = this.equals.bind(this);
}
equals() {
this.setState({
displaytop: eval(strArr.join("")),
displaybottom: eval(strArr.join(""))
});
}
numInput(str, num) {
if (numArr[0] === 0) {
numArr.splice(0);
strArr.splice(0);
}
numArr.push(num);
strArr.push(str);
if (str === "clear") {
strArr.splice(0);
strArr.push("0");
numArr.splice(0);
numArr.push(0);
}
if (operatorArr.includes(strArr[strArr.length-1]) && operatorArr.includes(strArr[strArr.length-2]) && strArr[strArr.length-1] !== "-") {
strArr.splice(strArr.length-2, 1);
}
if (strArr[strArr.length-1] === "-" && strArr[strArr.length-2] === "-") {
strArr.splice(strArr.length-2, 1);
}
this.setState({
displaytop: eval(strArr.join("")),
displaybottom: numArr
});
}
render()
{
return (
<div>
<div id="calculator">
<div id="clear" onClick={() => this.numInput("clear")}><p class="btntxt">AC</p></div>
<div id="display-container"><p id="display-top">{this.state.displaytop}</p><br/><p id="display">{this.state.displaybottom}</p>
<p></p>
</div>
<br/>
<div class="funcbtn" id="add" onClick={() => this.numInput("+")}><p class="funcbtntxt">+</p></div>
<div class="funcbtn" id="subtract" onClick={() => this.numInput("-")}><p class="funcbtntxt">-</p></div>
<div class="funcbtn" id="divide" onClick={() => this.numInput("/")}><p class="funcbtntxt">/</p></div>
<div class="funcbtn" id="multiply" onClick={() => this.numInput("*")}><p class="funcbtntxt">x</p></div>
<br/>
<div class="smallbtn" id="one" onClick={() => this.numInput("1",1)}><p class="numbtntxt">1</p></div>
<div class="smallbtn" id="two" onClick={() => this.numInput("2",2)}><p class="numbtntxt">2</p></div>
<div class="smallbtn" id="three" onClick={() => this.numInput("3",3)}><p class="numbtntxt">3</p></div>
<div class="smallbtn" id="four" onClick={() => this.numInput("4",4)}><p class="numbtntxt">4</p></div>
<div class="smallbtn" id="five" onClick={() => this.numInput("5",5)}><p class="numbtntxt">5</p></div>
<div class="smallbtn" id="six" onClick={() => this.numInput("6",6)}><p class="numbtntxt">6</p></div>
<div class="smallbtn" id="seven" onClick={() => this.numInput("7",7)}><p class="numbtntxt">7</p></div>
<div class="smallbtn" id="eight" onClick={() => this.numInput("8",8)}><p class="numbtntxt">8</p></div>
<div class="smallbtn" id="nine" onClick={() => this.numInput("9",9)}><p class="numbtntxt">9</p></div>
<div class="smallbtn" id="zero" onClick={() => this.numInput("0",0)}><p class="numbtntxt">0</p></div>
<div class="smallbtn" id="decimal" onClick={() => this.numInput(".")}><p class="numbtntxt">.</p></div>
<div id="equals" onClick={this.equals}><p id="equalstxt">=</p></div>
</div>
</div>
);
}
};
ReactDOM.render(<Calculator/>, document.getElementById('root'))
CSS
body {
background-color: lightgray;
}
#calculator {
margin: auto;
width: 300px;
height: 420px;
background-color: green;
border-radius: 10%;
padding: 20px;
}
.smallbtn {
width: 40px;
height: 40px;
border-radius: 50%;
color: black;
background-color: white;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
display: inline-block;
text-align: center;
}
.numbtntxt {
margin-top: 30%;
}
.funcbtn {
width: 40px;
height: 25px;
border-radius: 50%;
color: black;
background-color: white;
margin: 30px 25px 10px 10px;
display: inline-block;
text-align: center;
}
#clear {
text-align: center;
width: 80px;
height: 40px;
color: black;
background-color: white;
border-radius: 20%;
display: inline-block;
}
#equals {
text-align: center;
height: 40px;
width: 40px;
color: black;
border-radius: 20%;
background-color: white;
display: inline-block;
margin-left: 10%;
margin-right: 0%;
margin-top: 10%;
}
.funcbtntxt {
margin: auto;
margin-top: 8%;
}
#display-container {
width: 180px;
height: 40px;
border-radius: 5%;
margin-left: 8%;
text-align: center;
display: inline-block;
background-color: white;
}
#display {
font-weight: bold;
margin: 0;
overflow: hidden;
float: right;
}
#display-top {
margin: 0;
overflow: hidden;
float: right;
}
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<head>
<link
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>Calculator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
</script>
</head>
<div id="root">
</div>
</body>
</html>
Errors
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
Challenge: Front End Development Libraries Projects - Build a JavaScript Calculator
Link to the challenge: