Simple calculator using JavaScript
In this post, you will learn how to write a simple calculator program in JavaScript. By using this, you can develop a simple calculator that displays the different arithmetical operations, i.e., addition, subtraction, multiplication, and division.
index.html
First, we have created a main HTML file 'index.html' that we will call in the browser. This file contains basic HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<script src="/script.js"></script>
<title>Simple Calculator</title>
</head>
<body>
<form>
<table class="calculator" cellspacing="0" cellpadding="1">
<tr>
<td colspan="5"><input id="display" name="display" value="0" size="28" maxlength="25"></td>
</tr>
<tr>
<td><input type="button" class="topBtn" name="topBtn" value="C" onclick="this.form.display.value= 0 "></td>
<td><input type="button" class="topBtn" name="topBtn" value="CLR" onclick="deleteChar(this.form.display)"></td>
<td><input type="button" class="topBtn" name="topBtn" value="=" onclick="if(checkInput(this.form.display.value)) { compute(this.form) }"></td>
<td><input type="button" class="operatorBtn" name="operatorBtn" value="%" onclick=" percent(this.form.display)"></td>
</tr>
<tr>
<td><input type="button" class="numBtn" name="numBtn" value="7" onclick="addChar(this.form.display, '7')"></td>
<td><input type="button" class="numBtn" name="numBtn" value="8" onclick="addChar(this.form.display, '8')"></td>
<td><input type="button" class="numBtn" name="numBtn" value="9" onclick="addChar(this.form.display, '9')"></td>
<td><input type="button" class="operatorBtn" name="operatorBtn" value="/" onclick="addChar(this.form.display, '/')"></td>
<tr>
<td><input type="button" class="numBtn" name="numBtn" value="4" onclick="addChar(this.form.display, '4')"></td>
<td><input type="button" class="numBtn" name="numBtn" value="5" onclick="addChar(this.form.display, '5')"></td>
<td><input type="button" class="numBtn" name="numBtn" value="6" onclick="addChar(this.form.display, '6')"></td>
<td><input type="button" class="operatorBtn" name="operatorBtn" value="*" onclick="addChar(this.form.display, '*')"></td>
</tr>
<tr>
<td><input type="button" class="numBtn" name="numBtn" value="1" onclick="addChar(this.form.display, '1')"></td>
<td><input type="button" class="numBtn" name="numBtn" value="2" onclick="addChar(this.form.display, '2')"></td>
<td><input type="button" class="numBtn" name="numBtn" value="3" onclick="addChar(this.form.display, '3')"></td>
<td><input type="button" class="operatorBtn" name="operatorBtn" value="-" onclick="addChar(this.form.display, '-')"></td>
</tr>
<tr>
<td></td>
<td><input type="button" class="numBtn" name="numBtn" value="0" onclick="addChar(this.form.display, '0')"></td>
<td><input type="button" class="operatorBtn" name="operatorBtn" value="." onclick="addChar(this.form.display, '.')"></td>
<td><input type="button" class="operatorBtn" name="operatorBtn" value="+" onclick="addChar(this.form.display, '+')"></td>
</tr>
</table>
</form>
</body>
</html>style.css
Here is the stylesheet 'style.css' to enhance the user interface that we have included in the above 'index.html' file.
* {
padding: 0;
margin: 5px;
text-align: center;
}
body {
background-color:white;
}
.calculator {
width: 350px;
height: 350px;
background-color: #999999;
box-shadow: 0px 0px 0px 10px #757575;
border: 5px solid black;
border-radius: 10px;
}
#display {
width: 320px;
height: 50px;
text-align: right;
background-color: black;
border: 3px solid white;
font-size: 20px;
left: 2px;
top: 2px;
color: #72e500;
}
.topBtn{
color: white;
background-color: #d3d3d3;
font-size: 15px;
margin: auto;
width: 50px;
height: 25px;
}
.numBtn {
color: white;
background-color: black;
font-size: 15px;
margin: auto;
width: 50px;
height: 25px;
}
.operatorBtn {
color: white;
background-color: #7fc9df;
font-size: 15px;
margin: auto;
width: 50px;
height: 25px;
}script.js
The JavaScript math object provides several constants and methods to perform mathematical operations. In the given JS file, we have defined some functions and called the methods to perform mathematical operations.
function addChar(input, character) {
if(input.value == null || input.value == "0")
input.value = character
else
input.value += character
}
function deleteChar(input) {
input.value = input.value.substring(0, input.value.length - 1)
}
var val = 0.0;
function percent(input) {
val = input.value;
input.value = input.value + "%";
}
function compute(form) {
form.display.value = eval(form.display.value);
}
function checkInput(str) {
for (var i = 0; i < str.length; i++) {
var ch = str.charAt(i);
if (ch < "0" || ch > "9") {
if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "."
&& ch != "(" && ch!= ")" && ch != "%") {
alert("invalid entry!")
return false
}
}
}
return true
}
Related Articles
How to reverse string in JavascriptJavaScript display PDF in the browser using Ajax call
Parsing JSON in Javascript
Javascript speech recognition example
Select/deselect all checkboxes using Javascript
Print specific part of a web page in javascript
Dynamically Add/Delete HTML Table Rows Using Javascript
jQuery Ajax serialize form data example
Image popup on page load using HTML and jQuery
Ajax live data search using jQuery PHP MySQL
jQuery loop over JSON result after AJAX Success
Simple star rating system using PHP, jQuery and Ajax
jquery image zoom on mouseover example
Bootstrap star rating input example
Bootstrap datepicker example
Submit a form data without page refresh