Scientific calculator JavaScript
In this post, you will learn how to develop a Scientific Calculator using the JavaScript.
A scientific calculator is an electronic calculator, designed to perform mathematical operations. Scientific calculators are widely used in situations that require speedy access to certain mathematical functions, particularly those that were once looked up in mathematical tables, such as trigonometric functions, matrix calculations, and logarithms. By definition, a scientific calculator is a calculator designed to help you compute advanced functions in science, engineering, and mathematics problems.
Here, we developed a simple GUI scientific calculator using JavaScript that allows you to perform simple and complex calculations.
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>Scientific 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="<--" 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="advBtn" name="advBtn" value="π" onclick="addChar(this.form.display,'3.14159265359')"></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="advBtn" name="advBtn" value="x^" onclick="if(checkInput(this.form.display.value)) { exp(this.form) }"></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="advBtn" name="advBtn" value="ln" onclick="if(checkInput(this.form.display.value)) { ln(this.form) }"></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="advBtn" name="advBtn" value="√" onclick="if(checkInput(this.form.display.value)) { sqrt(this.form) }"></td>
<td><input type="button" class="operatorBtn" name="operatorBtn" value="-" onclick="addChar(this.form.display, '-')"></td>
</tr>
<tr>
<td><input type="button" class="operatorBtn" name="operatorBtn" value="±" onclick="changeSign(this.form.display)"></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="advBtn" name="advBtn" value="x2" onclick="if(checkInput(this.form.display.value)) { square(this.form) }"></td>
<td><input type="button" class="operatorBtn" name="operatorBtn" value="+" onclick="addChar(this.form.display, '+')"></td>
</tr>
<tr>
<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>
<td><input type="button" class="operatorBtn" name="operatorBtn" value="cos" onclick="if(checkInput(this.form.display.value)) { cos(this.form) }"></td>
<td><input type="button" class="operatorBtn" name="operatorBtn" value="sin" onclick="if(checkInput(this.form.display.value)) { sin(this.form) }"></td>
<td><input type="button" class="operatorBtn" name="operatorBtn" value="tan" onclick="if(checkInput(this.form.display.value)) { tan(this.form) }"></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;
}
.advBtn {
color: black;
background-color: #ffff70;
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 sin(form) {
form.display.value = Math.sin(form.display.value);
}
function cos(form) {
form.display.value = Math.cos(form.display.value);
}
function tan(form) {
form.display.value = Math.tan(form.display.value);
}
function sqrt(form) {
form.display.value = Math.sqrt(form.display.value);
}
function ln(form) {
form.display.value = Math.log(form.display.value);
}
function exp(form) {
form.display.value = Math.exp(form.display.value);
}
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 changeSign(input) {
if(input.value.substring(0, 1) == "-")
input.value = input.value.substring(1, input.value.length)
else
input.value = "-" + input.value
}
function compute(form) {
form.display.value = eval(form.display.value);
}
function square(form) {
form.display.value = eval(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
}
Output of the above code:
Related Articles
Find index of element in array JavaScriptFibonacci series in JavaScript
Star pattern program in JavaScript
Remove duplicates from array JavaScript
How to reverse string in JavaScript
JavaScript 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