How to make a simple calculator in JavaScript

Creating a calculator using JavaScript can be a fun and educational project for anyone looking to improve their programming skills. In this article, we will go through the process of creating a basic calculator using JavaScript.

HTML Structure

First, let’s start by creating the HTML structure for our calculator. We will use input fields for the numbers and buttons for the operators.

		
			<input type="text" id="number1">
			<input type="text" id="number2">
			<button onclick="add()">+</button>
			<button onclick="subtract()">-</button>
			<button onclick="multiply()">*</button>
			<button onclick="divide()">/</button>
			<button onclick="clear()">Clear</button>
			<p id="result"></p>
		
	

JavaScript Functions

Next, let’s create the JavaScript functions for our calculator. We will have functions for addition, subtraction, multiplication, division, and clearing the input fields.

		
			const number1 = document.getElementById('number1');
			const number2 = document.getElementById('number2');
			const result = document.getElementById('result');

			function add() {
				result.innerHTML = parseInt(number1.value) + parseInt(number2.value);
			}

			function subtract() {
				result.innerHTML = parseInt(number1.value) - parseInt(number2.value);
			}

			function multiply() {
				result.innerHTML = parseInt(number1.value) * parseInt(number2.value);
			}

			function divide() {
				result.innerHTML = parseInt(number1.value) / parseInt(number2.value);
			}

			function clear() {
				number1.value = '';
				number2.value = '';
				result.innerHTML = '';
			}
		
	

Testing the Calculator

Finally, let’s test our calculator by entering some numbers and performing various operations with it. For example, if we enter 10 in the first input field and 5 in the second input field, and then click on the “+” button, the result should show 15.

With these simple steps, you can create your own basic calculator using JavaScript. You can also expand on this project by adding more advanced features, such as handling decimal numbers and keyboard input.

Happy coding!