A calculator is an Electronic Hardware Device that is capable of doing very Mathmetical Calculations such as addition, multiplication, division and subtraction. But we are going to talk about How we Create a Scientific Calculator through Javascript. Let’s try to know step to step.
Keywords :- Scientific Calculator, Simple Scientific Calculator Create using HTML, JavaScript and css, Create Scientific Calculator Using js
To create the SCIENTIFIC calculator we will use javascript code, css code and html code.
Step 1:- Create HTML Code.
Step 2:- Create JavaScript SCIENTIFIc Calculation Code.
Step 3:- Create CSS Code for Design.
Step 1:- Create HTML Code.
These are the first steps to create SCIENTIFIC calculator. With the help of html code we will add all the fields of SCIENTIFIC calculator. Its code is given below.
<html>
<head>
<title>How to Create Scientific Calculator Using HTML, JavaScript and CSS?</title>
</head>
<body>
<form name="sci-calc">
<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="btnTop" name="btnTop" value="C" onclick="this.form.display.value= 0 "></td>
<td><input type="button" class="btnTop" name="btnTop" value="<--" onclick="deleteChar(this.form.display)"></td>
<td><input type="button" class="btnTop" name="btnTop" value="=" onclick="if(checkNum(this.form.display.value)) { compute(this.form) }"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="π" onclick="addChar(this.form.display,'3.14159265359')"></td>
<td><input type="button" class="btnMath" name="btnMath" value="%" onclick=" percent(this.form.display)"></td>
</tr>
<tr>
<td><input type="button" class="btnNum" name="btnNum" value="7" onclick="addChar(this.form.display, '7')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="8" onclick="addChar(this.form.display, '8')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="9" onclick="addChar(this.form.display, '9')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="x^" onclick="if(checkNum(this.form.display.value)) { exp(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="/" onclick="addChar(this.form.display, '/')"></td>
<tr>
<td><input type="button" class="btnNum" name="btnNum" value="4" onclick="addChar(this.form.display, '4')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="5" onclick="addChar(this.form.display, '5')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="6" onclick="addChar(this.form.display, '6')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="ln" onclick="if(checkNum(this.form.display.value)) { ln(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="*" onclick="addChar(this.form.display, '*')"></td>
</tr>
<tr>
<td><input type="button" class="btnNum" name="btnNum" value="1" onclick="addChar(this.form.display, '1')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="2" onclick="addChar(this.form.display, '2')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="3" onclick="addChar(this.form.display, '3')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="√" onclick="if(checkNum(this.form.display.value)) { sqrt(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="-" onclick="addChar(this.form.display, '-')"></td>
</tr>
<tr>
<td><input type="button" class="btnMath" name="btnMath" value="±" onclick="changeSign(this.form.display)"></td>
<td><input type="button" class="btnNum" name="btnNum" value="0" onclick="addChar(this.form.display, '0')"></td>
<td><input type="button" class="btnMath" name="btnMath" value="." onclick="addChar(this.form.display, '.')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="x2" onclick="if(checkNum(this.form.display.value)) { square(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="+" onclick="addChar(this.form.display, '+')"></td>
</tr>
<tr>
<td><input type="button" class="btnMath" name="btnMath" value="(" onclick="addChar(this.form.display, '(')"></td>
<td><input type="button" class="btnMath" name="btnMath" value=")" onclick="addChar(this.form.display,')')"></td>
<td><input type="button" class="btnMath" name="btnMath" value="cos" onclick="if(checkNum(this.form.display.value)) { cos(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="sin" onclick="if(checkNum(this.form.display.value)) { sin(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="tan" onclick="if(checkNum(this.form.display.value)) { tan(this.form) }"></td>
</tr>
</tabel>
</form>
</body>
</html>
Step 2:- Create JavaScript SCIENTIFIc Calculation Code.
These are the second step to create a SCIENTIFIC calculator. With the help of javascript code we will write the calculation code of all the fields of the SCIENTIFIC calculator through JavaScript and create its function. Its code is given below.
<script>
function addChar(input, character) {
if(input.value == null || input.value == "0")
input.value = character
else
input.value += character
}
function cos(form) {
form.display.value = Math.cos(form.display.value);
}
function sin(form) {
form.display.value = Math.sin(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 checkNum(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
}
</script>
Step 3:- Create CSS Code for Design.
These are the third step to create SCIENTIFIC calculator. With the help of Css code we use css to create the design of all the fields of SCIENTIFIC calculator. Its code is given below.
<style type="text/css">
* {
padding: 0;
margin: 5px;
text-align: center;
}
body {
background-color:#ff9933;
}
.calculator {
width: 350px;
height: 320px;
background-color: #c0c0c0;
box-shadow: 0px 0px 0px 10px #666;
border: 5px solid black;
border-radius: 10px;
}
#display {
width: 320px;
height: 40px;
text-align: right;
background-color: black;
border: 3px solid white;
font-size: 18px;
left: 2px;
top: 2px;
color: #7fff00;
}
.btnTop{
color: white;
background-color: #6f6f6f;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
.btnNum {
color: white;
background-color: black;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
.btnMath {
color: white;
background-color: #ff4561;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
.btnOpps {
color: white;
background-color: #ff9933;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
</style>
Friends, till now I have told you the code of step to step js, css and html separately. Now if you want, you can create this code by adding it to the same page and its code is given below.
scientific-calculator.html
<html>
<head>
<title></title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 5px;
text-align: center;
}
body {
background-color:#ff9933;
}
.calculator {
width: 350px;
height: 320px;
background-color: #c0c0c0;
box-shadow: 0px 0px 0px 10px #666;
border: 5px solid black;
border-radius: 10px;
}
#display {
width: 320px;
height: 40px;
text-align: right;
background-color: black;
border: 3px solid white;
font-size: 18px;
left: 2px;
top: 2px;
color: #7fff00;
}
.btnTop{
color: white;
background-color: #6f6f6f;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
.btnNum {
color: white;
background-color: black;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
.btnMath {
color: white;
background-color: #ff4561;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
.btnOpps {
color: white;
background-color: #ff9933;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
</style>
<body>
<form name="sci-calc">
<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="btnTop" name="btnTop" value="C" onclick="this.form.display.value= 0 "></td>
<td><input type="button" class="btnTop" name="btnTop" value="<--" onclick="deleteChar(this.form.display)"></td>
<td><input type="button" class="btnTop" name="btnTop" value="=" onclick="if(checkNum(this.form.display.value)) { compute(this.form) }"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="π" onclick="addChar(this.form.display,'3.14159265359')"></td>
<td><input type="button" class="btnMath" name="btnMath" value="%" onclick=" percent(this.form.display)"></td>
</tr>
<tr>
<td><input type="button" class="btnNum" name="btnNum" value="7" onclick="addChar(this.form.display, '7')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="8" onclick="addChar(this.form.display, '8')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="9" onclick="addChar(this.form.display, '9')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="x^" onclick="if(checkNum(this.form.display.value)) { exp(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="/" onclick="addChar(this.form.display, '/')"></td>
<tr>
<td><input type="button" class="btnNum" name="btnNum" value="4" onclick="addChar(this.form.display, '4')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="5" onclick="addChar(this.form.display, '5')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="6" onclick="addChar(this.form.display, '6')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="ln" onclick="if(checkNum(this.form.display.value)) { ln(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="*" onclick="addChar(this.form.display, '*')"></td>
</tr>
<tr>
<td><input type="button" class="btnNum" name="btnNum" value="1" onclick="addChar(this.form.display, '1')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="2" onclick="addChar(this.form.display, '2')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="3" onclick="addChar(this.form.display, '3')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="√" onclick="if(checkNum(this.form.display.value)) { sqrt(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="-" onclick="addChar(this.form.display, '-')"></td>
</tr>
<tr>
<td><input type="button" class="btnMath" name="btnMath" value="±" onclick="changeSign(this.form.display)"></td>
<td><input type="button" class="btnNum" name="btnNum" value="0" onclick="addChar(this.form.display, '0')"></td>
<td><input type="button" class="btnMath" name="btnMath" value="." onclick="addChar(this.form.display, '.')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="x2" onclick="if(checkNum(this.form.display.value)) { square(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="+" onclick="addChar(this.form.display, '+')"></td>
</tr>
<tr>
<td><input type="button" class="btnMath" name="btnMath" value="(" onclick="addChar(this.form.display, '(')"></td>
<td><input type="button" class="btnMath" name="btnMath" value=")" onclick="addChar(this.form.display,')')"></td>
<td><input type="button" class="btnMath" name="btnMath" value="cos" onclick="if(checkNum(this.form.display.value)) { cos(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="sin" onclick="if(checkNum(this.form.display.value)) { sin(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="tan" onclick="if(checkNum(this.form.display.value)) { tan(this.form) }"></td>
</tr>
</tabel>
</form>
</body>
<script>
function addChar(input, character) {
if(input.value == null || input.value == "0")
input.value = character
else
input.value += character
}
function cos(form) {
form.display.value = Math.cos(form.display.value);
}
function sin(form) {
form.display.value = Math.sin(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 checkNum(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
}
</script>
</html>