How to make a simple calculator on JavaScript

Learn how to make a simple calculator in JavaScript with an example.

How to Make a Simple Calculator on JavaScript

Making a calculator in JavaScript is a great way to learn how to use the language. In this guide, we will explore how to create a basic calculator using JavaScript. We will walk through the steps of setting up the objects, functions, and HTML elements necessary to create a functioning calculator.

The first step is to set up the HTML structure for the calculator. We will create a <div> element with an id of calculator. Inside this element, we will create the buttons that will be used to enter numbers and perform calculations. We will create a <button> element for each number, plus, minus, multiply, divide, clear, and equal. We will also create a <input> element with an id of calculator-screen to display the result of the calculations.

<div id="calculator">
  <input type="text" id="calculator-screen">
  <button type="button">7</button>
  <button type="button">8</button>
  <button type="button">9</button>
  <button type="button">/</button>
  <button type="button">4</button>
  <button type="button">5</button>
  <button type="button">6</button>
  <button type="button">*</button>
  <button type="button">1</button>
  <button type="button">2</button>
  <button type="button">3</button>
  <button type="button">-</button>
  <button type="button">0</button>
  <button type="button">.</button>
  <button type="button">=</button>
  <button type="button">+</button>
  <button type="button">C</button>
</div>

Next, we need to create the JavaScript code to make the calculator work. We will create a variable called calculator and set it equal to the <div> element with the id of calculator. We will also create a variable called screen and set it equal to the <input> element with the id of calculator-screen. This will allow us to access the calculator and input elements from our JavaScript code.

var calculator = document.getElementById('calculator');
var screen = document.getElementById('calculator-screen');

Now that we have access to the calculator and input elements, we need to create a function that will be called when a button is clicked. We will create a function called calculate() that will take in the value of the button that was clicked and perform the appropriate calculation. This function will be called when any of the calculator buttons are clicked.

function calculate(value) {
  // Code to perform the calculation
}

Inside the calculate() function, we will write the code to perform the appropriate calculation. We will use a switch statement to check the value of the button that was clicked. Depending on the value, we will perform the appropriate calculation. For example, if the value is +, we will add the two numbers.

switch (value) {
  case '+':
    // Add the two numbers
    break;
  case '-':
    // Subtract the two numbers
    break;
  case '*':
    // Multiply the two numbers
    break;
  case '/':
    // Divide the two numbers
    break;
  case 'C':
    // Clear the screen
    break;
  case '=':
    // Calculate the result
    break;
  default:
    // Add the number to the screen
    break;
}

Finally, we need to call the calculate() function when a button is clicked. To do this, we will add an event listener to the calculator <div>. This event listener will listen for the click event and call the calculate() function when it is triggered.

calculator.addEventListener('click', function(event) {
  calculate(event.target.innerText);
});

By following these steps, you can create a basic calculator using JavaScript. You can use this calculator to perform basic arithmetic operations such as addition, subtraction, multiplication, and division. You can also use it to clear the screen and calculate the result of a calculation.