In this article, we will explain how to create a simple calculator using JavaScript. Calculators are an essential tool in everyday life. From basic arithmetic to complex mathematical computations, calculators have made our lives easier. With the rise of web development, it is now possible to create online calculators that can be used from anywhere in the world, with just an internet connection.

Introduction to JavaScript Calculators

JavaScript is a high-level programming language widely used to add interactivity to websites. It is a client-side scripting language that runs on the user’s web browser, not the server. With JavaScript, you can create various applications, including calculators.

Calculators are used in various fields, from finance and science to engineering and mathematics. In this article, we will discuss how to create a simple calculator using JavaScript. This calculator will perform basic arithmetic operations like addition, subtraction, multiplication, and division.

Setting up the HTML Structure

JavaScript code can be written either within the HTML file or in a separate .js file. We will write the code within the HTML file for this tutorial.

The first step is creating an HTML file and adding the calculator’s elements. This includes buttons for numbers, operations, and a display screen. The following is the code for the HTML file:

				
					<div id="calculator">
  <div class="screen">
    <p id="expression">0</p>
    <p id="result">0</p>
  </div>
  <div class="keypad">
    <button class="operator" id="clear">C</button>
    <button class="operator" id="backspace">&larr;</button>
    <button class="number" id="seven">7</button>
    <button class="number" id="eight">8</button>
    <button class="number" id="nine">9</button>
    <button class="operator" id="divide">/</button>
    <button class="number" id="four">4</button>
    <button class="number" id="five">5</button>
    <button class="number" id="six">6</button>
    <button class="operator" id="multiply">x</button>
    <button class="number" id="one">1</button>
    <button class="number" id="two">2</button>
    <button class="number" id="three">3</button>
    <button class="operator" id="subtract">-</button>
    <button class="number" id="zero">0</button>
    <button class="operator" id="decimal">.</button>
    <button class="operator" id="equals">=</button>
    <button class="operator" id="add">+</button>
  </div>
</div>

Setting up the CSS Styles

Next, we’ll set up the CSS styles for our calculator. CSS, or Cascading Style Sheets, is a style sheet language used for describing the look and formatting of a document written in HTML.

				
					#calculator {
  width: 400px;
  height: 500px;
  margin: 50px auto;
  background-color: #333;
  border-radius: 10px;
}

.screen {
  height: 200px;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px 10px 0 0;
  text-align: right;
  box-sizing: border-box;
}

#expression {
  font-size: 36px;
  margin-bottom: 10px;
}

#result {
font-size: 26px;
color: #888;
}

.keypad {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
padding: 20px;
}

.number {
background-color: #fff;
border-radius: 50%;
height: 60px;
width: 60px;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid #ddd;
}

.operator {
background-color: #f0f0f0;
border-radius: 50%;
height: 60px;
width: 60px;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid #ddd;
}

#clear, #backspace {
background-color: #ef5350;
color: #fff;
}

#equals {
background-color: #26a69a;
color: #fff;
}

Adding JavaScript Functionality

Finally, we‘ll add the JavaScript functionality to our calculator. We’ll use event listeners to detect when a button is clicked, and perform the corresponding calculation.

				
					const buttons = document.querySelectorAll('.number, .operator');
buttons.forEach(button => {
button.addEventListener('click', e => {
const expression = document.querySelector('#expression');
expression.textContent += e.target.textContent;
});
});

const clear = document.querySelector('#clear');
clear.addEventListener('click', e => {
const expression = document.querySelector('#expression');
expression.textContent = '';
});

const backspace = document.querySelector('#backspace');
backspace.addEventListener('click', e => {
const expression = document.querySelector('#expression');
expression.textContent = expression.textContent.slice(0, -1);
});

const equals = document.querySelector('#equals');
equals.addEventListener('click', e => {
const expression = document.querySelector('#expression');
const result = document.querySelector('#result');
result.textContent = eval(expression.textContent);
});

And there you have it! A simple calculator built using JavaScript. Following this guide, you can create a functional calculator that performs basic mathematical operations. Then, with a bit of creativity, you can add more features to your calculator to make it even more advanced. In conclusion, JavaScript is a powerful tool for building interactive web applications. Combining HTML, CSS, and JavaScript allows you to create various applications, including calculators.

Whether you’re just starting with programming or are an experienced developer, creating a simple calculator using JavaScript is a great way to learn and improve your skills.


Thanks for reading. Happy coding!