Calculator/script.js at master · ajmalzyne/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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

class Calculator{
    constructor(previousOperandTextElemnt , currentOperandTextElemnt){
        this.previousOperandTextElemnt = previousOperandTextElemnt
        this.currentOperandTextElemnt =currentOperandTextElemnt
        this.clear()
    }

    clear(){
        this.currentOperant = ''
        this.previousOperant = ''
        this.operation = undefined
    }

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

    appendNumber(number){
        if(number === '.' && this.currentOperant.includes('.')) return
        this.currentOperant = this.currentOperant.toString() + number.toString()

    }

    chooseOperation(operation){
        if(this.currentOperant === '') return
        if(this.previousOperant !== ''){
            this.compute()
        }
        this.operation = operation
        this.previousOperant = this.currentOperant
        this.currentOperant = ''
    }

    compute(){

        let computation
        const prev = parseFloat(this.previousOperant)
        const current = parseFloat(this.currentOperant)
        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.currentOperant = computation
        this.operation = undefined
        this.previousOperant = ''

    }

    getDisplayNumber(number){
        const StringNumber = number.toString()
        const integerDigit = parseFloat(StringNumber.split('.')[0])
        const decimalDigit = StringNumber.split('.')[1]
        let integerDisplay
        if(isNaN(integerDigit)){
            integerDisplay = ''
        }else{
            integerDisplay = integerDigit.toLocaleString('en',{
                maximumFractionDigits:0
            })
        }
        if(decimalDigit != null){
            return `${integerDisplay}.${decimalDigit}`
        }else{
            return integerDisplay
        }
    }

    updateDispplay(){
        this.currentOperandTextElemnt.innerText = this.getDisplayNumber
        (this.currentOperant)
        if(this.operation != null){
            this.previousOperandTextElemnt.innerText =
            `${this.getDisplayNumber(this.previousOperant)} ${this.operation}`
        }else{
            this.previousOperandTextElemnt.innerText = ''
        }
    }
}


const numberButton = document.querySelectorAll('[data-number]')
const operationButton = document.querySelectorAll('[data-operation]')
const equalsButton = document.querySelector('[data-equals]')
const deleteButton = document.querySelector('[data-delete]')
const allClearButton = document.querySelector('[data-all-clear]')
const previousOperandTextElemnt = document.querySelector('[data-previous-operand]')
const currentOperandTextElemnt = document.querySelector('[data-current-operand]')

const calculator = new Calculator(previousOperandTextElemnt , currentOperandTextElemnt)

numberButton.forEach(button =>{
    button.addEventListener('click' , ()=>{
        calculator.appendNumber(button.innerText)
        calculator.updateDispplay()
    })
})

operationButton.forEach(button =>{
    button.addEventListener('click' , ()=>{
        calculator.chooseOperation(button.innerText)
        calculator.updateDispplay()
    })
})

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

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

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