How to Build Simple Calculator with JavaScript

Building a calculator with javascript is possible. In this tutorial, we start with three files. And then we link the CSS and JS on an index.html

Building a calculator with javascript is possible. In this tutorial, we start with three files. And then we link the CSS and JS on an index.html. we are using visual studio for creating this calculator. Visual studio code is the free source code editor developed by Microsoft. It is available for Windows, Linux, macOS.

We are going to make the layout of the calculator with HTML and design it with CSS. And then we add a function on the calculator with javascript. Then our calculator will finally be made.

Step of Build Calculator with Javascript

1. Create Required File

First, we are creating the required file for our calculator. First, you create a folder in a specific place. Now we are creating three HTML, CSS, and js files in a folder.

Index.html
style.css
script.js

2. Link CSS and JS

Now we link the CSS and js on HTML. First, we link the CSS: <link rel="stylesheet" href="style.css">. And then link the JS on HTML. <script src="script.js"></script>

3. Create Layout With HTML

We are creating the layout of the calculator with HTML. Our calculator contains a display, AC, DEL, Numbers, Equal to, divide, multiply, minus, and plus. Use this code

 
      <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">AC</button>

        <button data-delete>DEL</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>4</button>

        <button data-number>5</button>

        <button data-number>6</button>

        <button data-operation>+</button>

        <button data-number>7</button>

        <button data-number>8</button>

        <button data-number>9</button>

        <button data-operation>-</button>

        <button data-number>.</button>

        <button data-number>0</button>

        <button data-equals class="span-two">=</button>

        </div>

4. Style with CSS

Now it's time to style the calculator with CSS. There we can give our HTML as a calculator shape. We already create a CSS file as a style.css.

*, *::before, *::after {
    box-sizing: border-box;
    font-family: Gotham Rounded, sans-serif;
    font-weight: normal;
  }
  
  body {
    padding: 0;
    margin: 0;
    background: linear-gradient(to right, #00AAFF, #00FF6C);
  }
  
  .calculator-grid {
    display: grid;
    justify-content: center;
    align-content: center;
    min-height: 100vh;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: minmax(120px, auto) repeat(5, 100px);
  }
  
  .calculator-grid > button {
    cursor: pointer;
    font-size: 2rem;
    border: 1px solid white;
    outline: none;
    background-color: rgba(255, 255, 255, .75);
  }
  
  .calculator-grid > button:hover {
    background-color: rgba(255, 255, 255, .9);
  }
  
  .span-two {
    grid-column: span 2;
  }
  
  .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;
  }

3. Add function with js

Now it's time to make our calculator functional. We are used the script.js file to write js code. If you are a beginner then you are confused about js code. But don't worry I will provide complete code which you can embed on the text editor. We are make working functions such as plus, minus, divide, multiply, equal to, AC(All Clear), DEL, and more. There is the basic function of a simple calculator.

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 '*':
                computation = prev * current
                break
            case '÷':
                computation = prev / 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()
})