CODEWITHSUNDEEP
javascripthtmlcsscalculator
Anna
Anna

Reputation: 31

How to store results and see previous calculations in my calculator?

I am trying to create a calculator that stores my results to see previous calculations. I am trying to learn and also get a trainee position for a job. Any help will be appreciated! The calculator is working correctly at the moment and my idea was to either have a separate section to log the history or modify the top line of the calculator to show the previous calculation. I have been working from a youtube tutorial which is why I am struggaling to add the additional content. 

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

//clear all, default to empty string
clear() {
    this.currentOperand = '';
    this.previousOperand = '';
    this.operation = undefined;
}

//delete single number using slice method
delete() { 
    this.currentOperand = this.currentOperand.toString().slice(0,-1);
}

//add number and only allow a single period
appendNumber(number) {
    if (number === '.' && this.currentOperand.includes('.')) return;
    this.currentOperand = this.currentOperand.toString() + number.toString();
}

//if operand is empty return
//sum is carried out if you have 2 operands and placed in previous operand  
//changes operand from current to previous
chooseOperation(operation) {
    if (this.currentOperand === '') return;
    if (this.previousOperand !== '') {
        this.compute();
    }
    this.operation = operation;
    this.previousOperand = this.currentOperand;
    this.currentOperand = '';
}

//calculate 
//dont compute if previous or current operand is empty
//switch statement for which operation is selected
compute() {
    let computation;
    const prev = parseFloat(this.previousOperand);
    const current = parseFloat(this.currentOperand);
    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.previous = '';
}

//update display and handles 
//if operation is not null then show previous operand and operation
//remove previous operand when calculated
updateDisplay() {
    this.currentOperandTextElement.innerText = this.currentOperand;    
    if (this.operation != null) {
        this.previousOperandTextElement.innerText = 
            `${this.previousOperand} ${this.operation}`;
    } else {
        this.previousOperandTextElement.innerText = '';
    }

}
}

//variables
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 previousButton = document.querySelector('[data-previous]')
const allClearButton = document.querySelector('[data-all-clear]')
const previousOperandTextElement = document.querySelector('[data-previous-        operand]')
const currentOperandTextElement = document.querySelector('[data-current-   operand]')

//create a new class and pass everything into it
const calculator = new Calculator(previousOperandTextElement,     currentOperandTextElement);

//Loop over all buttons and add event listener
numberButtons.forEach(button => {
button.addEventListener('click', () => {
    calculator.appendNumber(button.innerText);
    calculator.updateDisplay();
})
})

//Loop over operation buttons and add event listener
operationButtons.forEach(button => {
button.addEventListener('click', () => {
    calculator.chooseOperation(button.innerText);
    calculator.updateDisplay();
})
})

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

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


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

//previous button
previousButton.addEventListener('click', button => {

calculator.updateDisplay();
})

Upvotes: 3

Views: 1653

Answers (1)

Mauro Stepanoski
Mauro Stepanoski

Reputation: 725

You can use the memento design pattern to keep the operation log and it allows you undoing operations: https://www.dofactory.com/javascript/memento-design-pattern. You can find an example applied to a calculator here: https://dev.to/shikaan/design-patterns-in-web-development---2-memento-253j so you can adapt your code.

You can use the command pattern combined with a command store to log the operations too: https://www.dofactory.com/javascript/command-design-pattern

Upvotes: 1

Related Questions