JavaScript calculator stuck!

I am getting this error in my calculator project in the Frameworks and Libraries challenges and I don’t get this mathematically:

The sequence “5 * - + 5” = should produce an output of “10” : expected ‘0’ to equal ‘10’.

Does it make sense to you? How? Please help.

@Charles_The_Multipod No, that does not make sense. You may need to remove the double quotes. It looks like you only need to add 5 + 5. Can we see your code so that we maybe able to assist you better?

here is my JavaScript

class Calculator{
constructor(previousOperandTextElement, currentOperandTextElement){
    this.previousOperandTextElement= previousOperandTextElement;
    this.currentOperandTextElement= currentOperandTextElement;
   this.clear();
}

clear(){
this.currentOperand='0';
this.previousOperand='';
this.operation=undefined;

}

delete(){
this.currentOperand = this.currentOperand.toString().slice(0,-1);
}

appendNumber(number){
if(number==="." && this.currentOperand.includes('.')) return
this.currentOperand = this.currentOperand.toString() + number.toString();
}

chooseOperation(operation){
    if(this.previousOperand==='' && this.currentOperand==='') return;
    if(this.operation!=='' && this.previousOperand!=='' && this.currentOperand=='' && operation!='-'){
        this.operation = operation;
        return;
      }
  if(this.operation!=='' && this.previousOperand!=='' && this.currentOperand==='' && operation=='-'){
    if(this.operation=='*' || this.operation=='÷'){
      this.previousOperand= (this.previousOperand * -1);
      return;
    }
  }
    if(this.previousOperand!=='' && this.currentOperand!==''){
        this.compute();
    }
    this.operation= operation;
    this.previousOperand =this.currentOperand;
    this.currentOperand = '';
}




compute(){
let computation;
const prev = parseFloat(this.previousOperand, 10);
const current = parseFloat(this.currentOperand, 10);
if(isNaN(prev || isNaN(current )))return 
switch (this.operation){
    case '+':
        computation = prev + current;
        break;
        case '-':
            computation = prev - current;
            break;

        case '*': 
        computation = prev * current;
        break;
 
        case '÷':
            computation = prev / current;
            break;
            default:
                return

}

this.currentOperand = computation;
this.operation = undefined;
this.previousOperand = '';
}

getDisplayNumber(number){
    const stringNumber = number.toString();
    const intergerNumber = parseFloat(stringNumber.split('.')[0]);
    const decimalDigits = stringNumber.split('.')[1];
let intergerDisplay;
if(isNaN(intergerNumber)){
    intergerDisplay='';
}else{
    intergerDisplay = intergerNumber.toLocaleString('en', 
    {maximumFractionDigits: 0});
}
  if(decimalDigits!=null){
      return `${intergerDisplay}.${decimalDigits}`
  }else{
      return intergerDisplay;
  }
}

updateDisplay(){
    this.currentOperandTextElement.innerText=
        this.getDisplayNumber(this.currentOperand);
    
    if(this.operation!=null){
        this.previousOperandTextElement.innerText= 
        `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`
    }else{
        this.previousOperandTextElement.innerText='';
    }

}
}


const numberButtons =document.querySelectorAll('[data-number]');
const operationButtons =document.querySelectorAll('[data-operation]');
const equalsButton =document.querySelector('[data-equals]');
const deleteButton =document.querySelector('[data-delete]');
const allClearButton =document.querySelector('[data-all-clear]');
const previousOperandTextElement =document.querySelector('[data-previous-operand]');
const currentOperandTextElement =document.querySelector('[data-current-operand]');


const calculator = new Calculator(previousOperandTextElement,
     currentOperandTextElement);

numberButtons.forEach(button=>{
    button.addEventListener('click',()=>{
        calculator.appendNumber(button.innerText);
        calculator.updateDisplay();
    })
})

operationButtons.forEach(button=>{
    button.addEventListener('click',()=>{
        calculator.chooseOperation(button.innerText);
        calculator.updateDisplay();
    })
})

equalsButton.addEventListener('click', button=>{
    calculator.compute();
    calculator.updateDisplay();
} 
)

allClearButton.addEventListener('click', button=>{
    calculator.clear();
    calculator.updateDisplay();
} 
)

deleteButton.addEventListener('click', button=>{
    calculator.delete();
    calculator.updateDisplay();
})

here is my html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>
   <div class="calculator-grid">
<div  class="output">
    <div data-previous-operand class="previous-operand"></div>
    <div id='display' data-current-operand class="current-operand"></div>
</div>
<button id='clear' data-all-clear class="span-two">AC</button>
<button id='delete' data-delete>DEL</button>
<button id='divide' data-operation>÷</button>
<button id='one' data-number>1</button>
<button id='two' data-number>2</button>
<button id='three' data-number>3</button>
<button id='multiply' data-operation>*</button>
<button id='four' data-number>4</button>
<button id='five' data-number>5</button>
<button id='six' data-number>6</button>
<button id='add' data-operation>+</button>
<button id='seven' data-number>7</button>
<button id='eight' data-number>8</button>
<button id='nine' data-number>9</button>
<button id='subtract' data-operation>-</button>
<button id='decimal' data-number>.</button>
<button id='zero' data-number>0</button>
<button id='equals' data-equals class="span-two">=</button>

   </div> 
</body>
</html>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>
   <div class="calculator-grid">
<div  class="output">
    <div data-previous-operand class="previous-operand"></div>
    <div id='display' data-current-operand class="current-operand"></div>
</div>
<button id='clear' data-all-clear class="span-two">AC</button>
<button id='delete' data-delete>DEL</button>
<button id='divide' data-operation>÷</button>
<button id='one' data-number>1</button>
<button id='two' data-number>2</button>
<button id='three' data-number>3</button>
<button id='multiply' data-operation>*</button>
<button id='four' data-number>4</button>
<button id='five' data-number>5</button>
<button id='six' data-number>6</button>
<button id='add' data-operation>+</button>
<button id='seven' data-number>7</button>
<button id='eight' data-number>8</button>
<button id='nine' data-number>9</button>
<button id='subtract' data-operation>-</button>
<button id='decimal' data-number>.</button>
<button id='zero' data-number>0</button>
<button id='equals' data-equals class="span-two">=</button>

   </div> 
</body>
</html>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> 

What the challenge expects is that when you enter another operator, the last one should override the previous one, so

5 * - + 5 

is just

5 + 5

(minus overrides times, plus overrides minus)

But note that you’ll have to handle the special case when a minus is entered to indicate a negative number.

1 Like

Thank you. I guess the hard work is now putting the logic into code. Let me see how to work on that