How to Make a Calculator in JavaScript

Creating a basic calculator in JavaScript is a great way to practice your programming skills. In this tutorial, we'll build a simple calculator that can perform basic arithmetic operations like addition, subtraction, multiplication, and division.

Setting Up the HTML Structure

First, we'll set up the HTML structure for our calculator. This includes creating a user interface with buttons for digits and operations, and a display area to show the result.


  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Calculator</title>
      <style>
          .calculator {
              width: 212px;
              margin: 0 auto;
              border: 1px solid #ccc;
              padding: 10px;
              border-radius: 5px;
          }
          .display {
              width: 100%;
              height: 40px;
              margin-bottom: 10px;
              text-align: right;
              padding: 10px;
              border: 1px solid #ccc;
              border-radius: 5px;
              box-sizing: border-box;
          }
          .button {
              width: 40px;
              height: 40px;
              margin: 5px;
              font-size: 18px;
              border: 1px solid #ccc;
              border-radius: 5px;
              cursor: pointer;
              box-sizing: border-box;
          }
          .button.operator {
              background-color: #f0f0f0;
          }
          .button.double {
              width: 94px;
          }
        .button.triple {
              width: 146px;
          }
      </style>
  </head>
  <body>
      <div class="calculator">
          <div id="display" class="display"></div>    
          <button class="button triple" onclick="clearDisplay()">C</button>
          <button class="button operator" onclick="appendToDisplay('%')">%</button>
          <button class="button" onclick="appendToDisplay('7')">7</button>
          <button class="button" onclick="appendToDisplay('8')">8</button>
          <button class="button" onclick="appendToDisplay('9')">9</button>
          <button class="button operator" onclick="appendToDisplay('/')">/</button>
          <button class="button" onclick="appendToDisplay('4')">4</button>
          <button class="button" onclick="appendToDisplay('5')">5</button>
          <button class="button" onclick="appendToDisplay('6')">6</button>
          <button class="button operator" onclick="appendToDisplay('*')">*</button>
          <button class="button" onclick="appendToDisplay('1')">1</button>
          <button class="button" onclick="appendToDisplay('2')">2</button>
          <button class="button" onclick="appendToDisplay('3')">3</button>
          <button class="button operator" onclick="appendToDisplay('-')">-</button>
          <button class="button" onclick="calculateResult()">=</button>
          <button class="button" onclick="appendToDisplay('0')">0</button>
          <button class="button" onclick="appendToDisplay('.')">.</button>
          <button class="button operator" onclick="appendToDisplay('+')">+</button>
        
      </div>
      <script src="calculator.js"></script>
  </body>
  </html>

Implementing Calculator Logic with JavaScript

Now that we have the HTML structure in place, let's add the JavaScript logic to handle the calculator operations. Create a file named calculator.js and add the following code:


function appendToDisplay(value) {
    const display = document.getElementById('display');
    display.innerText += value;
}

function clearDisplay() {
    const display = document.getElementById('display');
    display.innerText = '';
}

function calculateResult() {
    const display = document.getElementById('display');
    try {
        display.innerText = eval(display.innerText);
    } catch (error) {
        display.innerText = 'Error';
    }
}

In this script:

appendToDisplay(value): Appends the clicked button value to the display.
clearDisplay(): Clears the display when the 'C' button is clicked.
calculateResult(): Evaluates the expression on the display and shows the result. It uses the eval() function, which evaluates the string as JavaScript code. Note: For security reasons, using eval() is generally discouraged, but it's acceptable for simple calculator functionality.

Conclusion

In this tutorial, we created a simple calculator using HTML, CSS, and JavaScript. We set up the user interface with HTML, styled it with CSS, and implemented the functionality with JavaScript. This basic calculator handles arithmetic operations and demonstrates how to interact with the DOM and handle user input.