Strange Results on Build a JavaScript Calculator Challenge

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.

My CodePen Code

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:

Thanks Dawson! I added an IF statement to fix that. As of right now, all tests are passing except for one which I still need to work on (story 11).

After reading up on the eval() method though I did see that it’s not recommended to use as it is a security risk. So once I get the final test to pass I’m planning to try to redo the code so that it will work without needing to use the eval() method.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.