Simple Scientific Calculator
In this project, we are going to learn on how to create a
simple scientific calculator using JavaScript. This program has Clear, Cancel, Ok button and etc. Here's the script for a scientific calculator.
HTML Source Code
This is our source code for calculator.
<form name="scientific_calculator">
<h2>Scientific Calculator
</h2>
<table cellspacing="0" cellpadding="1"> <td colspan="5" align="center"><input name="display" class="sc" value="0" size="44" maxlength="25"></td> <td align="center"><input type="button" value="Clear" onclick="this.form.display.value = 0 "></td> <td align="center" colspan="2"><input type="button" value=" Cancel " onclick="deleteChar(this.form.display)"></td> <td align="center" colspan="2"><input type="button" value=" Ok " NAME="Enter" onclick="if (checkNum(this.form.display.value)) { compute(this.form) }"></td> <td align="center"><input type="button" value=" exp " onclick="if (checkNum(this.form.display.value)) { exp(this.form) }"></td> <td align="center"><input type="button" value=" 7 " onclick="add_value(this.form.display, '7')"></td> <td align="center"><input type="button" value=" 8 " onclick="add_value(this.form.display, '8')"></td> <td align="center"><input type="button" value=" 9 " onclick="add_value(this.form.display, '9')"></td> <td align="center"><input type="button" value=" / " onclick="add_value(this.form.display, '/')"></td> <td align="center"><input type="button" value=" ln " onclick="if (checkNum(this.form.display.value)) { ln(this.form) }"></td> <td align="center"><input type="button" value=" 4 " onclick="add_value(this.form.display, '4')"></td> <td align="center"><input type="button" value=" 5 " onclick="add_value(this.form.display, '5')"></td> <td align="center"><input type="button" value=" 6 " onclick="add_value(this.form.display, '6')"></td> <td align="center"><input type="button" value=" * " onclick="add_value(this.form.display, '*')"></td> <td align="center"><input type="button" value=" sqrt " onclick="if (checkNum(this.form.display.value)) { sqrt(this.form) }"></td> <td align="center"><input type="button" value=" 1 " onclick="add_value(this.form.display, '1')"></td> <td align="center"><input type="button" value=" 2 " onclick="add_value(this.form.display, '2')"></td> <td align="center"><input type="button" value=" 3 " onclick="add_value(this.form.display, '3')"></td> <td align="center"><input type="button" value=" - " onclick="add_value(this.form.display, '-')"></td> <td align="center"><input type="button" value=" sq " onclick="if (checkNum(this.form.display.value)) { square(this.form) }"></td> <td align="center"><input type="button" value=" 0 " onclick="add_value(this.form.display, '0')"></td> <td align="center"><input type="button" value=" . " onclick="add_value(this.form.display, '.')"></td> <td align="center"><input type="button" value=" +/- " onclick="changeSign(this.form.display)"></td> <td align="center"><input type="button" value=" + " onclick="add_value(this.form.display, '+')"></td> <td align="center"><input type="button" value=" ( " onclick="add_value(this.form.display, '(')"></td> <td align="center"><input type="button" value="cos" onclick="if (checkNum(this.form.display.value)) { cos(this.form) }"></td> <td align="center"><input type="button" value=" sin " onclick="if (checkNum(this.form.display.value)) { sin(this.form) }"></td> <td align="center"><input type="button" value=" tan" onclick="if (checkNum(this.form.display.value)) { tan(this.form) }"></td> <td align="center"><input type="button" value=" ) " onclick="add_value(this.form.display, ')')"></td>
JavaScript
This script use to have a function in our calculator.
<script>
function add_value(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)
}
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.substring(i, i+1)
if (ch < "0" || ch > "9") {
if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "."
&& ch != "(" && ch!= ")") {
alert("invalid entry!")
return false
}
}
}
return true
}
</script>
<style type="text/css">
form {
width:440px;
padding:25px;
margin:auto;
border:5px solid blue;
border-radius:15px 15px;
}
input {
background:azure;
color:blue;
font-size:15px;
padding-top:15px;
padding-bottom:15px;
padding-left:19px;
padding-right:19px;
margin:6px;
border:1px solid blue;
}
h2 {
text-align:center;
}
h2 {
color:blue;
}
.sc {
background:#fff;
color:#000;
}
</style>
Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at
[email protected]. Practice Coding. Thank you very much.
