DEV Community

loading...
Cover image for Make a calculator with pure HTML5 CSS3 and JavaScript!

Make a calculator with pure HTML5 CSS3 and JavaScript!

dipayan108 profile image Dipayan Ghosh ・1 min read

so, recently i made a calculator with html, css and js ! to add it to my portfolio

**code for js for operator **

function useOperator(operator) {
    const currentValue = Number(calculatorDisplay.textContent)
        // Prevent multiple operators
    if (operatorValue && awaitingNextValue) {
        operatorValue = operator
        return
    }
    // Assign firstValue if no value
    if (!firstValue) {
        firstValue = currentValue;
    } else {
        const calculation = calculate[operatorValue](firstValue, currentValue)
        calculatorDisplay.textContent = calculation
        firstValue = calculation
    }
    // Ready for next value, store operator
    awaitingNextValue = true;
    operatorValue = operator;
}
Enter fullscreen mode Exit fullscreen mode

*** for add event listener ***

// Add Event Listeners for numbers, operators, decimal buttons
inputBtns.forEach((inputBtn) => {
    if (inputBtn.classList.length === 0) {
        inputBtn.addEventListener('click', () => sendNumberValue(inputBtn.value))
    } else if (inputBtn.classList.contains('operator')) {
        inputBtn.addEventListener('click', () => useOperator(inputBtn.value))
    } else if (inputBtn.classList.contains('decimal')) {
        inputBtn.addEventListener('click', () => addDecimal())
    }
})

Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide