In this article, we will create one simple calculator in JavaScript. Also, we create a basic calculator UI using HTML and CSS.
Simple Calculator in JavaScript
This basic calculator program in JavaScript that can perform addition, subtraction, multiplication, and division. Also, we add validation if anyone enters a non-numeric value in the calculator so that it will work as expected.
First, let’s create a Calculator UI paste the below HTML and CSS in notepad and save the file as HTML, and give it a name like calc.html.
Calculator UI
<html>
<head>
<title>Simple Calculator in Javascript</title>
<style>
.calculator-container {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
}
.operand {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
.operator {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
.calculate-button {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
border-radius: 4px;
}
.calculate-button:hover {
background-color: #45a049;
}
.result {
margin: 8px 0;
padding: 12px 20px;
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div class="calculator-container">
<form>
<input type="text" id="txt1" class="operand" placeholder="Operand 1">
<select id="operator" class="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="txt2" class="operand" placeholder="Operand 2">
<button type="button" id="calculate-button" class="calculate-button">Calculate</button>
</form>
<div id="result" class="result"></div>
</div>
</body>
</html>
Now double-click the HTML file the calculator UI will appear like the below –
This is the HTML and CSS design which you can change by editing the HTML file.
Calculator Logic in JavaScript
Here is the Logic that works on button click
<script type="text/javascript">
window.onload=function(){
// Get the input elements for the operands and the operator
var txt1 = document.getElementById("txt1");
var txt2 = document.getElementById("txt2");
var operator = document.getElementById("operator");
// Get the button element for the calculate button
var calculateButton = document.getElementById("calculate-button");
// Get the element to display the result
var result = document.getElementById("result");
// Add an event listener to the calculate button
calculateButton.addEventListener("click", function() {
// Get the values of the operands and operator
if(!isNaN(txt1.value) && !isNaN(txt2.value)){
var op1 = parseFloat(txt1.value);
var op2 = parseFloat(txt2.value);
var op = operator.value;
// Perform the calculation based on the operator
if (op === "+") {
result.innerHTML = op1 + op2;
} else if (op === "-") {
result.innerHTML = op1 - op2; }
else if (op === "*") {
result.innerHTML = op1 * op2; }
else if (op === "/") {
result.innerHTML = op1 / op2; } }
else{
alert("Please enter only numeric value in Calculator");
}
});
}
</script>
This has 2 textboxes for entering the input and one for the operators +,-,*, and / operations. And when you click on calculate button the result will appear below calculate button.
Below I have added 100 + 150 and you can see the result.
Complete Code –
<html>
<head>
<title>Basic Javascript Calculator</title>
<style>
.calculator-container {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
}
.operand {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
.operator {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
.calculate-button {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
border-radius: 4px;
}
.calculate-button:hover {
background-color: #45a049;
}
.result {
margin: 8px 0;
padding: 12px 20px;
background-color: #f2f2f2;
}
</style>
<script type="text/javascript">
window.onload=function(){
// Get the input elements for the operands and the operator
var txt1 = document.getElementById("txt1");
var txt2 = document.getElementById("txt2");
var operator = document.getElementById("operator");
// Get the button element for the calculate button
var calculateButton = document.getElementById("calculate-button");
// Get the element to display the result
var result = document.getElementById("result");
// Add an event listener to the calculate button
calculateButton.addEventListener("click", function() {
// Get the values of the operands and operator
if(!isNaN(txt1.value) && !isNaN(txt2.value)){
var op1 = parseFloat(txt1.value);
var op2 = parseFloat(txt2.value);
var op = operator.value;
// Perform the calculation based on the operator
if (op === "+") {
result.innerHTML = op1 + op2;
} else if (op === "-") {
result.innerHTML = op1 - op2;
} else if (op === "*") {
result.innerHTML = op1 * op2;
} else if (op === "/") {
result.innerHTML = op1 / op2;
}
}
else{
alert("Please enter only numeric value in Calculator");
}
});
}
</script>
</head>
<body>
<div class="calculator-container">
<form>
<input type="text" id="txt1" class="operand" placeholder="Operand 1">
<select id="operator" class="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="txt2" class="operand" placeholder="Operand 2">
<button type="button" id="calculate-button" class="calculate-button">Calculate</button>
</form>
<div id="result" class="result"></div>
</div>
</body>
</html>
Conclusion
This is how you can create a simple calculator in JavaScript that will perform basic math calculations.