Javascript calculator passing 15/16

Tell us what’s happening:
I’ve been working on the javascript calculator, and I can’t seem to get test 13 to pass could someone help me with this one?

   **Your code so far**
html
______

<div id='root'></div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

______

css
______

#equals {
  position:relative;
    height: 76px;
  curser:pointer;
}
.notSpan {
  height: 38px;
}
.moveABit {
  position:relative;
  right: 4.2%;
  bottom: 38px;
}
#display{
  width:67%;
}
______

js
______

import React from "https://cdn.skypack.dev/react"
import {useState} from "https://cdn.skypack.dev/react"
import ReactDOM from "https://cdn.skypack.dev/react-dom"

function App() {
  
  const [operation ,setOperation] = useState('')
  const [resultDisplayed, setResultDisplayed] = useState(false)
  const [prevDisplay, setPrevDisplay] = useState('')
  const [currentDisplay, setCurrentDisplay] = useState('')
  
  function display(input) {
    if (resultDisplayed) {
      setPrevDisplay(currentDisplay)
      setCurrentDisplay(input)
      setResultDisplayed(false)
    }else if (!resultDisplayed) {
       setCurrentDisplay(currentDisplay + input)
    }
  }
  
  function compute(op) {
    let currD = currentDisplay
    let prevD = prevDisplay ? prevDisplay : undefined
    if(op !=='-' && currentDisplay === '-') setCurrentDisplay('')
    if (op && op !== '=') {
        setOperation(op)
        setResultDisplayed(false)
    }
    
    if (op && !prevDisplay){
      setPrevDisplay(currentDisplay)
      setCurrentDisplay('')
    }
     if (op === '=' && currentDisplay && prevDisplay && operation) {
      setCurrentDisplay(eval(`${prevD} ${operation}  ${currD}`))
      setOperation('')
      setPrevDisplay('')
      setResultDisplayed(true)
     } else if (op && currentDisplay && prevDisplay && operation){
      setPrevDisplay(eval(`${prevD} ${operation}  ${currD}`))
      setCurrentDisplay('')
    }
  }
  return (
    <div class='container bg-dark'>
      <div id='display'>
        <p id='prev' className='text-white text-end'>{prevDisplay}{operation}</p>
        <h2 id='curr' className='text-white text-end'>{currentDisplay ? currentDisplay : '0'}</h2>
      </div>
      
      
      
        <div id='keypad'>

          <div class='row gap-1 justify-content-center'>
            <button data-clear id='clear' className='btn btn-danger col-2' onClick={() => {
                setCurrentDisplay('')
                setPrevDisplay('')
                setOperation('')
              }}>AC</button>
            <button data-operation id='divide' className='btn btn-secondary opacity-75 col-1' onClick={() => {
                compute('/')}
              }>/</button>
            <button data-operation id='multiply' className='btn btn-secondary opacity-75 col-1' onClick={() => compute('*')}>X</button>
          </div>

          <div class='row gap-1 justify-content-center'>
            <button data-number id='seven' className='btn btn-secondary opacity-75 col-1' 
              onClick={() => display('7')}
            >7</button>
            
            <button data-number id='eight' className='btn btn-secondary opacity-75 col-1' 
              onClick={() => display('8')}
            >8</button>
            
            <button data-number id='nine' className='btn btn-secondary opacity-75 col-1' 
              onClick={() => display('9')}
            >9</button>
            
            <button id='subtract' className='btn btn-secondary opacity-75 col-1' 
              onClick={() => {
                if (!currentDisplay) {
                  display('-')
                } else{
                   compute('-') 
                      }
                }}>-</button>
          
          </div>


          <div class='row gap-1 justify-content-center'>
            <button data-number id='four' className='btn btn-secondary opacity-75 col-1' 
              onClick={() => display('4')}
            >4</button>
            
            <button data-number id='five' className='btn btn-secondary opacity-75 col-1' 
              onClick={() => display('5')}
            >5</button>
            
            <button data-number id='six' className='btn btn-secondary opacity-75 col-1' 
              onClick={() => display('6')}
            >6</button>
            
            <button data-operation id='add' className='btn btn-secondary opacity-75 col-1' onClick={() => compute('+')}>+</button>
          </div>

          <div className='row gap-1 justify-content-center'>
              <button data-number id='one' className='notSpan btn btn-secondary opacity-75 col-1' 
                onClick={() => display('1')}
            >1</button>
            
              <button data-number id='two' className='notSpan btn btn-secondary opacity-75 col-1' 
                onClick={() => display('2')}
            >2</button>
            
              <button data-number id='three' className='notSpan btn btn-secondary opacity-75 col-1' 
                onClick={() => display('3')}
            >3</button>
            
              <button data-equals id='equals' className='btn btn-secondary opacity-75 col-1 'onClick={ () => compute('=')}>=</button>
          </div> 

          <div class='row gap-1 justify-content-center moveABit'>
            
            <button data-number id='zero' className='btn btn-secondary opacity-75 col-2' 
              onClick={() => currentDisplay && display('0')}>0</button>
            
            <button data-number id='decimal' className='btn btn-secondary opacity-75 col-1' 
              onClick={() => currentDisplay.includes('.') ? '' : display('.')}>.</button>
            
          </div>

        </div>
          
    </div>
      
  )
}
ReactDOM.render(
  <App/>,
  document.getElementById('root')
)
   **Your browser information:**

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

Challenge: Build a JavaScript Calculator

Link to the challenge:

[/quote]

A link to your codepen would be helpful so we can see what the error is.

Manually I can see that your app is conforming to the test description.

It seems that the tests are broken, but before rushing to that conclusion, here is what I would suggest you try :

  1. Try deliberately making one of the simple tests fail.
  2. See the error the test gives.
  3. If the error is similar to the stack trace that 13. shows, then then the tests are fine, otherwise they’re not working for your app and are therefore broken (they’re expecting something else).

I got it, finally, the issue with 13 was failing on the pressing operation buttons consecutivly bit. it took juggling tests 9 and 13 failing, and then just 14 because which I broke somehow, which took me longer than it should have to fix it.

Yay congratulations :slight_smile:

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