<script>
    class Calculator {
        constructor(previousOperandTextElement, currentOperandTextElement) {
            this.previousOperandTextElement = previousOperandTextElement
            this.currentOperandTextElement = currentOperandTextElement
            this.clear()
        }
        clear() {
            this.currentOperand = ''
            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.currentOperand === '') return
            if (this.previousOperand !== '') {
                this.compute()
            }
            this.operation = operation
            this.previousOperand = this.currentOperand
            this.currentOperand = ''
        }

        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 'x':
                    computation = prev * current
                    break
                case '/':
                    computation = prev / current
                    break
                case '%':
                    computation = prev / 100 * current
                    break
                case '‰':
                    computation = prev / 1000 * current
                    break
                default:
                    return
            }
            this.currentOperand = computation
            this.operation = undefined
            this.previousOperand = ''
        }

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

        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()
    })
</script>

<style>


    #standard-calculator-body {
        padding: 0;
        margin: 1px;
        background-image: linear-gradient(236deg, #ebf3f1, #ebf3f1);
    }
    .covering{
        border: 1px solid gray;
        border-radius: 10px;
    }

    .calculator-grid {
        display: grid;
        justify-content: center;
        align-content: center;
        grid-template-columns: repeat(4, 140px);
        grid-template-rows: minmax(100px, auto) repeat(6, 60px);
    }

    .calculator-grid > button {
        cursor: pointer;
        font-size: 2rem;
        border: 1px solid #9f9595;
        outline: none;
        background-color: rgba(255, 255, 255, .9);

    }

    .calculator-grid > button:hover {
        background-color: rgba(217, 197, 173, 0.75);

    }

    .span-two {
        grid-column: span 2;
    }
    .span-four {
        grid-column: span 4;
    }

    .output {
        grid-column: 1 / -1;
        background-color: rgba(0, 0, 0, .75);
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        flex-direction: column;
        padding: 10px;
        word-wrap: break-word;
        word-break: break-all;
    }

    .output .previous-operand {
        color: rgba(255, 255, 255, .75);
        font-size: 1.5rem;
    }

    .output .current-operand {
        color: white;
        font-size: 2.5rem;
    }

    #key--equal {
        background-image: linear-gradient(to bottom, #fe886a, #ff7033);
    }

</style>
<div id="standard-calculator-body">
    <div class="covering">
        <div class="calculator-grid">
            <div class="output">
                <div data-previous-operand class="previous-operand"></div>
                <div data-current-operand class="current-operand"></div>
            </div>
            <button data-all-clear class="span-two">CLEAR</button>
            <button data-delete>DEL</button>
            <button data-operation>/</button>
            <button data-number>7</button>
            <button data-number>8</button>
            <button data-number>9</button>
            <button data-operation>x</button>
            <button data-number>4</button>
            <button data-number>5</button>
            <button data-number>6</button>
            <button data-operation>+</button>
            <button data-number>1</button>
            <button data-number>2</button>
            <button data-number>3</button>
            <button data-operation>-</button>
            <button data-number>00</button>
            <button data-number>0</button>
            <button data-number>000</button>
            <button data-number>.</button>
            <button data-operation>%</button>
            <button data-operation>‰</button>
            <button id="key--equal" data-equals class="span-two">=</button>
        </div><br>
    </div>

</div>








<?php /**PATH /home/zedarroot/public_html/edwulp/resources/views/libs/premium-calculators.blade.php ENDPATH**/ ?>