JavaScript Calculator - Allowing negative number to be first operand

user_15759351 0
Viewed 640

I'm working on a basic JavaScript calculator and I would like to be able to start a calculation with negative numbers too. For now if I click on the ' - ' before a number is entered the ' - ' won't show thus I can only start with a positive number. Could somebody please tell me how could I include that in my code?

const prevText = document.querySelector('[data-prev]');
const currentText = document.querySelector('[data-current]');
const buttons = document.querySelectorAll('.btn');
const resetBtn = document.querySelector('[data-reset]');
const delBtn = document.querySelector('[data-delete]');
const numberBtn = document.querySelectorAll('[data-number]');
const operationBtn = document.querySelectorAll('[data-operator]');
const equalBtn = document.querySelector('[data-equal]');

class Calculator {
  constructor(prevText, currentText) {
    this.prevText = prevText;
    this.currentText = currentText;
    this.clear();
  }

  clear() {
    this.prev = '';
    this.current = '';
    this.operator = undefined;
  }

  delete() {
    this.current = this.current.toString().slice(0, -1);
    if (this.current === '') {
      this.current = this.prev;
      this.prev = '';
      this.operator = undefined;
    }
  }


  appendNumber(nr) {
    this.current = this.current.toString() + nr.toString();
  }

  chooseOperation(operator) {
    if (this.current === '') return;
    if (this.prev !== '') {
      this.calculate();
    }

    this.operator = operator;
    this.prev = this.current;
    this.current = '';
  }

  calculate() {
    let result;
    const previousValue = parseInt(this.prev);
    const currentValue = parseInt(this.current);

    if (isNaN(previousValue) || isNaN(currentValue)) return;

    switch (this.operator) {
      case '+':
        result = previousValue + currentValue;
        break;
      case '-':
        result = previousValue - currentValue;
        break;
      default:
        return;
    }
    this.current = result;
    this.operator = undefined;
    this.prev = '';
  }

  getDisplayNr(nr) {
    const floatNr = parseFloat(nr);
    if (isNaN(floatNr)) return '';
    return floatNr.toLocaleString('en');
  }

  updateDisplay() {
    this.currentText.innerText = this.getDisplayNr(this.current);
    // this.prevText.innerText = this.prev;
    if (this.operator != null) {
      this.prevText.innerText = ` ${this.getDisplayNr(this.prev)} ${
            this.operator
          }`;
    } else {
      this.prevText.innerText = '';
    }
  }
}


const calculator = new Calculator(prevText, currentText);

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

operationBtn.forEach((btn) => {
  btn.addEventListener('click', () => {
    calculator.chooseOperation(btn.innerText);

    calculator.updateDisplay();
  });
});

equalBtn.addEventListener('click', (btn) => {
  calculator.calculate();
  calculator.updateDisplay();
});

resetBtn.addEventListener('click', (btn) => {
  calculator.clear();
  calculator.updateDisplay();
});

delBtn.addEventListener('click', (btn) => {
  calculator.delete();
  calculator.updateDisplay();
});
<div class="calculator">
  <div class="calculation">
    <div data-prev class="prev"></div>
    <div data-current class="current"></div>
    <!-- <div class="display">0</div> -->
  </div>
  <button class="bigger reset btn" data-reset>RES</button>
  <button class="bigger delete btn" data-delete>DEL</button>
  <button class="nr btn" data-number>1</button>
  <button class="nr btn" data-number>2</button>
  <button class="nr btn" data-number>3</button>
  <button class="plus operator btn" data-key='plus' data-operator>+</button>
  <button class="nr btn" data-number>4</button>
  <button class="nr btn" data-number>5</button>
  <button class="nr btn" data-number>6</button>
  <button class="minus operator btn" data-key='minus' data-operator>-</button>
  <button class="nr btn" data-number>7</button>
  <button class="nr btn" data-number>8</button>
  <button class="nr btn" data-number>9</button>
  <button class="nr btn" data-number>0</button>
  <button class="bigger equal btn" data-equal>=</button>
</div>

calculator javascript
3 Answers

You can add check for - in checkOperator method. If you find - and the currentValue is null then set the currentValue to 0

I added below two lines;

if (this.current === '' && !operator == '-') return;
if (this.current === '' && operator == '-') this.current = 0;

See the Snippet below:

const prevText = document.querySelector('[data-prev]');
const currentText = document.querySelector('[data-current]');
const buttons = document.querySelectorAll('.btn');
const resetBtn = document.querySelector('[data-reset]');
const delBtn = document.querySelector('[data-delete]');
const numberBtn = document.querySelectorAll('[data-number]');
const operationBtn = document.querySelectorAll('[data-operator]');
const equalBtn = document.querySelector('[data-equal]');

class Calculator {
  constructor(prevText, currentText) {
    this.prevText = prevText;
    this.currentText = currentText;
    this.clear();
  }

  clear() {
    this.prev = '';
    this.current = '';
    this.operator = undefined;
  }

  delete() {
    this.current = this.current.toString().slice(0, -1);
    if (this.current === '') {
      this.current = this.prev;
      this.prev = '';
      this.operator = undefined;
    }
  }


  appendNumber(nr) {
    this.current = this.current.toString() + nr.toString();
    if(this.prev == '')
      this.calculate();
  }

  chooseOperation(operator) {
    if (this.current === '' && !operator == '-') return;
    //if (this.current === '' && operator == '-') this.current = 0;
    if (this.prev !== '') {
      this.calculate();
    }

    this.operator = operator;
    this.prev = this.current;
    this.current = '';
  }

  calculate() {
    let result;
    const previousValue = parseInt(this.prev) || 0;
    const currentValue = parseInt(this.current);

    if (isNaN(previousValue) || isNaN(currentValue)) return;

    switch (this.operator) {
      case '+':
        result = previousValue + currentValue;
        break;
      case '-':
        result = previousValue - currentValue;
        break;
      default:
        return;
    }
    this.current = result;
    this.operator = undefined;
    this.prev = '';
  }

  getDisplayNr(nr) {
    const floatNr = parseFloat(nr);
    if (isNaN(floatNr)) return '';
    return floatNr.toLocaleString('en');
  }

  updateDisplay() {
    this.currentText.innerText = this.getDisplayNr(this.current);
    // this.prevText.innerText = this.prev;
    if (this.operator != null) {
      this.prevText.innerText = ` ${this.getDisplayNr(this.prev)} ${
            this.operator
          }`;
    } else {
      this.prevText.innerText = '';
    }
  }
}


const calculator = new Calculator(prevText, currentText);

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

operationBtn.forEach((btn) => {
  btn.addEventListener('click', () => {
    calculator.chooseOperation(btn.innerText);

    calculator.updateDisplay();
  });
});

equalBtn.addEventListener('click', (btn) => {
  calculator.calculate();
  calculator.updateDisplay();
});

resetBtn.addEventListener('click', (btn) => {
  calculator.clear();
  calculator.updateDisplay();
});

delBtn.addEventListener('click', (btn) => {
  calculator.delete();
  calculator.updateDisplay();
});
<div class="calculator">
  <div class="calculation">
    <div data-prev class="prev"></div>
    <div data-current class="current"></div>
    <!-- <div class="display">0</div> -->
  </div>
  <button class="bigger reset btn" data-reset>RES</button>
  <button class="bigger delete btn" data-delete>DEL</button>
  <button class="nr btn" data-number>1</button>
  <button class="nr btn" data-number>2</button>
  <button class="nr btn" data-number>3</button>
  <button class="plus operator btn" data-key='plus' data-operator>+</button>
  <button class="nr btn" data-number>4</button>
  <button class="nr btn" data-number>5</button>
  <button class="nr btn" data-number>6</button>
  <button class="minus operator btn" data-key='minus' data-operator>-</button>
  <button class="nr btn" data-number>7</button>
  <button class="nr btn" data-number>8</button>
  <button class="nr btn" data-number>9</button>
  <button class="nr btn" data-number>0</button>
  <button class="bigger equal btn" data-equal>=</button>
</div>

New Update

You can also add below condition in appendNumber method. This will call calculate method if you're selecting any operator first.

if(this.prev == '')
      this.calculate();
user_84405980

I marked the 2 code edits with [EDIT]

const prevText = document.querySelector('[data-prev]');
const currentText = document.querySelector('[data-current]');
const buttons = document.querySelectorAll('.btn');
const resetBtn = document.querySelector('[data-reset]');
const delBtn = document.querySelector('[data-delete]');
const numberBtn = document.querySelectorAll('[data-number]');
const operationBtn = document.querySelectorAll('[data-operator]');
const equalBtn = document.querySelector('[data-equal]');

class Calculator {
  constructor(prevText, currentText) {
    this.prevText = prevText;
    this.currentText = currentText;
    this.clear();
  }

  clear() {
    this.prev = '';
    this.current = '';
    this.operator = undefined;
  }

  delete() {
    this.current = this.current.toString().slice(0, -1);
    if (this.current === '') {
      this.current = this.prev;
      this.prev = '';
      this.operator = undefined;
    }
  }


  appendNumber(nr) {
    this.current = this.current.toString() + nr.toString();
  }

  chooseOperation(operator) {
    // [EDIT] dont use "-" operator when typed before a number, instead add to this.current (appendNumber)
    if(this.current === '' && operator == '-'){
      this.appendNumber("-");return;
    }
    // [/EDIT]
    if (this.current === '') return;
    if (this.prev !== '') {
      this.calculate();
    }

    this.operator = operator;
    this.prev = this.current;
    this.current = '';
  }

  calculate() {
    let result;
    const previousValue = parseInt(this.prev);
    const currentValue = parseInt(this.current);

    if (isNaN(previousValue) || isNaN(currentValue)) return;

    switch (this.operator) {
      case '+':
        result = previousValue + currentValue;
        break;
      case '-':
        result = previousValue - currentValue;
        break;
      default:
        return;
    }
    this.current = result;
    this.operator = undefined;
    this.prev = '';
  }

  getDisplayNr(nr) {
    const floatNr = parseFloat(nr);
    if (isNaN(floatNr)) return '';
    return floatNr.toLocaleString('en');
  }

  updateDisplay() {
    this.currentText.innerText = this.getDisplayNr(this.current);
    // this.prevText.innerText = this.prev;
    if (this.operator != null) {
      this.prevText.innerText = ` ${this.getDisplayNr(this.prev)} ${
            this.operator
          }`;
    } else {
      this.prevText.innerText = '';
    }
  }
}


const calculator = new Calculator(prevText, currentText);

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

operationBtn.forEach((btn) => {
  btn.addEventListener('click', () => {
    calculator.chooseOperation(btn.innerText);
    // [EDIT] Dont call updateDisplay, because u havent typed number yet (only "-")
    if(!(calculator.current == '' && btn.innerText =="-")){
    calculator.updateDisplay();}
    // [/EDIT]

  });
});

equalBtn.addEventListener('click', (btn) => {
  calculator.calculate();
  calculator.updateDisplay();
});

resetBtn.addEventListener('click', (btn) => {
  calculator.clear();
  calculator.updateDisplay();
});

delBtn.addEventListener('click', (btn) => {
  calculator.delete();
  calculator.updateDisplay();
});
<div class="calculator">
  <div class="calculation">
    <div data-prev class="prev"></div>
    <div data-current class="current"></div>
    <!-- <div class="display">0</div> -->
  </div>
  <button class="bigger reset btn" data-reset>RES</button>
  <button class="bigger delete btn" data-delete>DEL</button>
  <button class="nr btn" data-number>1</button>
  <button class="nr btn" data-number>2</button>
  <button class="nr btn" data-number>3</button>
  <button class="plus operator btn" data-key='plus' data-operator>+</button>
  <button class="nr btn" data-number>4</button>
  <button class="nr btn" data-number>5</button>
  <button class="nr btn" data-number>6</button>
  <button class="minus operator btn" data-key='minus' data-operator>-</button>
  <button class="nr btn" data-number>7</button>
  <button class="nr btn" data-number>8</button>
  <button class="nr btn" data-number>9</button>
  <button class="nr btn" data-number>0</button>
  <button class="bigger equal btn" data-equal>=</button>
</div>

user_17129050
user_1170300
Related