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]