How to Build a Calculator in JavaScript

Introduction

In this blog, you will learn how to develop a calculator application in JavaScript. JavaScript is a scripting language used for HTML web pages. It is a lightweight programming language. JavaScript code is used directly in HTML pages.
 
Step 1
  • Open a Sublime Text editor or Notepad++
Step 2
 
If you use the (span-two) keyword then the grid Column will appear inside the box. You can create awesome looking buttons using this CSS. Let's create a button using an (outputprevious-operand) keyword.
  1. *, *::before, *::after {  
  2.   box-sizing: border-box;  
  3.   font-family: Gotham Rounded, sans-serif;  
  4.   font-weightnormal;  
  5. }  
  6.   
  7. body {  
  8.   padding0;  
  9.   margin0;  
  10.   background: linear-gradient(to right#00AAFF#00FF6C);  
  11. }  
  12.   
  13. .calculator-grid {  
  14.   display: grid;  
  15.   justify-contentcenter;  
  16.   align-contentcenter;  
  17.   min-height100vh;  
  18.   grid-template-columns: repeat(4100px);  
  19.   grid-template-rows: minmax(120pxautorepeat(5100px);  
  20. }  
  21.   
  22. .calculator-grid > button {  
  23.   cursorpointer;  
  24.   font-size2rem;  
  25.   border1px solid white;  
  26.   outlinenone;  
  27.   background-color: rgba(255255255, .75);  
  28. }  
  29.   
  30. .calculator-grid > button:hover {  
  31.   background-color: rgba(255255255, .9);  
  32. }  
  33.   
  34. .span-two {  
  35.   grid-column: span 2;  
  36. }  
  37.   
  38. .output {  
  39.   grid-column: 1 / -1;  
  40.   background-color: rgba(000, .75);  
  41.   display: flex;  
  42.   align-items: flex-end;  
  43.   justify-content: space-around;  
  44.   flex-direction: column;  
  45.   padding10px;  
  46.   word-wrap: break-word;  
  47.   word-break: break-all;  
  48. }  
  49.   
  50. .output .previous-operand {  
  51.   color: rgba(255255255, .75);  
  52.   font-size1.5rem;  
  53. }  
  54.   
  55. .output .current-operand {  
  56.   colorwhite;  
  57.   font-size2.5rem;  

JavaScript Code

Now write the below JavaScript code in the head section of the <script>  inside page.
  1. class Calculator {  
  2.   constructor(previousOperandTextElement, currentOperandTextElement) {  
  3.     this.previousOperandTextElement = previousOperandTextElement  
  4.     this.currentOperandTextElement = currentOperandTextElement  
  5.     this.clear()  
  6.   }  
  7.   
  8.   clear() {  
  9.     this.currentOperand = ''  
  10.     this.previousOperand = ''  
  11.     this.operation = #ff0000  
  12.   }  
  13.   
  14.   delete() {  
  15.     this.currentOperand = this.currentOperand.toString().slice(0, -1)  
  16.   }  
  17.   
  18.   appendNumber(number) {  
  19.     if (number === '.' && this.currentOperand.includes('.')) return  
  20.     this.currentOperand = this.currentOperand.toString() + number.toString()  
  21.   }  
  22.   
  23.   chooseOperation(operation) {  
  24.     if (this.currentOperand === ''return  
  25.     if (this.previousOperand !== '') {  
  26.       this.compute()  
  27.     }  
  28.     this.operation = operation  
  29.     this.previousOperand = this.currentOperand  
  30.     this.currentOperand = ''  
  31.   }  
  32.   
  33.   compute() {  
  34.     let computation  
  35.     const prev = parseFloat(this.previousOperand)  
  36.     const current = parseFloat(this.currentOperand)  
  37.     if (isNaN(prev) || isNaN(current)) return  
  38.     switch (this.operation) {  
  39.       case '+':  
  40.         computation = prev + current  
  41.         break  
  42.       case '-':  
  43.         computation = prev - current  
  44.         break  
  45.       case '*':  
  46.         computation = prev * current  
  47.         break  
  48.       case '÷':  
  49.         computation = prev / current  
  50.         break  
  51.       default:  
  52.         return  
  53.     }  
  54.     this.currentOperand = computation  
  55.     this.operation = undefined  
  56.     this.previousOperand = ''  
  57.   }  
  58.   
  59.   getDisplayNumber(number) {  
  60.     const stringNumber = number.toString()  
  61.     const integerDigits = parseFloat(stringNumber.split('.')[0])  
  62.     const decimalDigits = stringNumber.split('.')[1]  
  63.     let integerDisplay  
  64.     if (isNaN(integerDigits)) {  
  65.       integerDisplay = ''  
  66.     } else {  
  67.       integerDisplay = integerDigits.toLocaleString('en', { maximumFractionDigits: 0 })  
  68.     }  
  69.     if (decimalDigits != null) {  
  70.       return `${integerDisplay}.${decimalDigits}`  
  71.     } else {  
  72.       return integerDisplay  
  73.     }  
  74.   }  
  75.   
  76.   updateDisplay() {  
  77.     this.currentOperandTextElement.innerText =  
  78.       this.getDisplayNumber(this.currentOperand)  
  79.     if (this.operation != null) {  
  80.       this.previousOperandTextElement.innerText =  
  81.         `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`  
  82.     } else {  
  83.       this.previousOperandTextElement.innerText = ''  
  84.     }  
  85.   }  
  86. }  
  87.   
  88.   
  89. const numberButtons = document.querySelectorAll('[data-number]')  
  90. const operationButtons = document.querySelectorAll('[data-operation]')  
  91. const equalsButton = document.querySelector('[data-equals]')  
  92. const deleteButton = document.querySelector('[data-delete]')  
  93. const allClearButton = document.querySelector('[data-all-clear]')  
  94. const previousOperandTextElement = document.querySelector('[data-previous-operand]')  
  95. const currentOperandTextElement = document.querySelector('[data-current-operand]')  
  96.   
  97. const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)  
  98.   
  99. numberButtons.forEach(button => {  
  100.   button.addEventListener('click', () => {  
  101.     calculator.appendNumber(button.innerText)  
  102.     calculator.updateDisplay()  
  103.   })  
  104. })  
  105.   
  106. operationButtons.forEach(button => {  
  107.   button.addEventListener('click', () => {  
  108.     calculator.chooseOperation(button.innerText)  
  109.     calculator.updateDisplay()  
  110.   })  
  111. })  
  112.   
  113. equalsButton.addEventListener('click', button => {  
  114.   calculator.compute()  
  115.   calculator.updateDisplay()  
  116. })  
  117.   
  118. allClearButton.addEventListener('click', button => {  
  119.   calculator.clear()  
  120.   calculator.updateDisplay()  
  121. })  
  122.   
  123. deleteButton.addEventListener('click', button => {  
  124.   calculator.delete()  
  125.   calculator.updateDisplay()  
  126. }) 

 Html 5 Code

Here, I have written all the HTML5 file code.
 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="UTF-8">  
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">  
  7.   <title>Calculator</title>  
  8.   <link href="styles.css" rel="stylesheet">  
  9.   <script src="script.js" defer></script>  
  10. </head>  
  11. <body>  
  12.   
  13.   
  14.   <h1 style="text-align:center; color: blue;">PRABAKARAN ACT</h1>  
  15.   
  16.   <h1 style="text-align: center; color:white;" ><b>Calculator</b></h1>  
  17.   
  18.   <div class="calculator-grid">  
  19.   
  20.     <div class="output">  
  21.   
  22.   
  23.       <div data-previous-operand class="previous-operand"></div>  
  24.       <div data-current-operand class="current-operand"></div>  
  25.   
  26.   
  27.     </div>  
  28.     <button data-all-clear class="span-two">AC</button>  
  29.     <button data-delete>DEL</button>  
  30.     <button data-operation>÷</button>  
  31.     <button data-number>1</button>  
  32.     <button data-number>2</button>  
  33.     <button data-number>3</button>  
  34.     <button data-operation>*</button>  
  35.     <button data-number>4</button>  
  36.     <button data-number>5</button>  
  37.     <button data-number>6</button>  
  38.     <button data-operation>+</button>  
  39.     <button data-number>7</button>  
  40.     <button data-number>8</button>  
  41.     <button data-number>9</button>  
  42.     <button data-operation>-</button>  
  43.     <button data-number>.</button>  
  44.     <button data-number>0</button>  
  45.     <button data-equals class="span-two">=</button>  
  46.   </div>  
  47. </body>  
  48. </html> 
Output
 
Now, right-click on the sublime text window stage. A dialog box appears, select -> open a new browser.
 
 
 
 
 
 
 
 
 
 
 
 
Conclusion
 
In this blog you learned how to create a calculator application in JavaScript. In an upcoming article, you will learn some more advanced game and application concepts in JavaScript.