Front End Development Libraries Projects - Build a JavaScript Calculator

Tell us what’s happening:
Live link to project:https://calculations-v2.netlify.app/

Describe your issue in detail here.
I have problem with test 9 where manually the result is correct,1, but the test somehow fails it.Otherwise the code is not done yet so i can not speak for the rest of the tests if they work as inteded or not.
Your code so far


function App() {
  const [currDisplay, setcurrDisplay] = useState<string>("0")

  useEffect(() => {
    if (currDisplay.length === 2 && currDisplay[0] === "0" && currDisplay[1] !== "." && currDisplay[1] !== "+" && currDisplay[1] !== "-" && currDisplay[1] !== "*" && currDisplay[1] !== "/") {
      // console.log(3 + 5 * 6 - 2 / 4);
      setcurrDisplay(currDisplay[1])
    }
  }, [currDisplay])

  function handleEquals(e: any) {
    console.log();
    const result = eval?.(`"use strict";(${currDisplay})`)
    return setcurrDisplay(result)
  }

  return (
    <div className="App">
      <div id='calculator'>
        <div id='display'>{currDisplay}</div>
        <div id='buttons'>
          <div id='numbers'>
            <button id='zero' onClick={() => setcurrDisplay(currDisplay + "0")}>0</button>
            <button id='one' onClick={() => setcurrDisplay(currDisplay + "1")}>1</button>
            <button id='two' onClick={() => setcurrDisplay(currDisplay + "2")}>2</button>
            <button id='three' onClick={() => setcurrDisplay(currDisplay + "3")}>3</button>
            <button id='four' onClick={() => setcurrDisplay(currDisplay + "4")}>4</button>
            <button id='five' onClick={() => setcurrDisplay(currDisplay + "5")}>5</button>
            <button id='six' onClick={() => setcurrDisplay(currDisplay + "6")}>6</button>
            <button id='seven' onClick={() => setcurrDisplay(currDisplay + "7")}>7</button>
            <button id='eight' onClick={() => setcurrDisplay(currDisplay + "8")}>8</button>
            <button id='nine' onClick={() => setcurrDisplay(currDisplay + "9")}>9</button>
          </div>
          <div id='operators'>
            <button id='add' onClick={() => setcurrDisplay(currDisplay + "+")}>+</button>
            <button id='subtract' onClick={() => setcurrDisplay(currDisplay + "-")}>-</button>
            <button id='multiply' onClick={() => setcurrDisplay(currDisplay + "*")}>*</button>
            <button id='divide' onClick={() => setcurrDisplay(currDisplay + "/")}>/</button>
          </div>
          <div id='other'>
            <button id='equals' onClick={handleEquals}>=</button>
            <button id='decimal' onClick={() => setcurrDisplay(currDisplay + ".")}>.</button>
            <button id='clear' onClick={() => setcurrDisplay("0")}>clear</button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: Front End Development Libraries Projects - Build a JavaScript Calculator

Link to the challenge:

1 Like

Hello past me,it’s future me!

I have solved your problem for test 9 and more that are affected by this.

You need to check which react version you are using as the current,18, one causes inconsistency between automatic and manual testing,therefore switch to a older one and it will solve itself.

I used react version 17 to solve it,while 18 caused many of the problems mentioned.

Link to explain why switching versions help:

Cheers!

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