calculator/script.js at master · abdul-1212/calculator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
class Calculator {
    constructor(previousOperandTxtElement, currentOperandTxtElement) {
        this.previousOperandTxtElement = previousOperandTxtElement;
        this.currentOperandTxtElement = currentOperandTxtElement;
        this.readyToReset = false;
        this.clear();
    }

    clear() {
        this.currentOperand = "";
        this.previousOperand = "";
        this.operation = undefined;
    }

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

    chooseOperation(operation) {
        if(this.currentOperand === "")
        return
        if(this.currentOperand !== "" && this.previousOperand !== "")
        this.compute();
        this.operation = operation;
        this.previousOperand = this.currentOperand;
        this.currentOperand = "";
    }

    compute() {
        let computation
        let mod
        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;
            case "^": computation = prev ** current; break;
            case "%": mod = prev / current; mod = Math.floor(mod); mod = mod * current; mod = prev - mod; computation = mod; break;
            default: return;
        }
        this.readyToReset = true;
        this.currentOperand = computation;
        this.operation = undefined;
        this.previousOperand = "";
    }

    updateDisplay() {
        this.currentOperandTxtElement.innerText =
        this.currentOperand;
        if(this.operation != null) {
            this.previousOperandTxtElement.innerText =
            `${this.previousOperand} ${this.operation}`
        }
        else{this.previousOperandTxtElement.innerText = "";}
    }
}

const numberButtons = document.querySelectorAll('[data-number]')
const operationButtons = document.querySelectorAll('[data-operation]')
const equalsButton = document.querySelector('[data-equals]')
const allClearButton = document.querySelector('[data-allClear]')
const previousOperandTxtElement = document.querySelector('[data-prevOperand]')
const currentOperandTxtElement = document.querySelector('[data-curOperand]')

const calculator = new Calculator(previousOperandTxtElement, currentOperandTxtElement);
allClearButton.addEventListener("click", () => {
    calculator.clear();
    calculator.updateDisplay();
})

numberButtons.forEach(button => {
   button.addEventListener('click', ()=> {
    if(calculator.previousOperand === "" &&
    calculator.currentOperand !== "" &&
    calculator.readyToReset) {
        calculator.currentOperand = "";
        calculator.readyToReset = false;
    }
       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();
})