HTML scientific calculator front end tool and back end tools
In this post we learn how to make calculator form HTML and CSS ,generally
calculator are two types one is the simple calculator and other is scientific calculator.
simple calculator
a simple calculator only doing some arithmetic function like addition,subtraction,
multiplication ,percentage ,and dividation etc.
scientific calculator
scientific calculator doing arithmetic function also scientific calculator doing
some other function like logarithm, exponential value ,cas ,tan ,and radius and
many more function depending on scientific calculator devices.
front end tool of scientific calculator means what is the structure of calculator and
what type of it front screen where you works and back end tools how to completed
it operation like Square root,Percentage,Factorial,Constants (pie, Euler constant, log, base e, log 10 base e),
Exponent log base 2, 10, e,Power Sin, Tan, Cos (enter angle in radians ) etc.
simple calculator html and js source code.
<html>
<head>
<title>simple calculater html and js code</title>
<script>
//function for displaying values
function dis(val)
{
document.getElementById("edu").value+=val
}
//function for evaluation
function solve()
{
let x = document.getElementById("edu").value
let y = eval(x)
document.getElementById("edu").value = y
}
//function for clearing the display
function clr()
{
document.getElementById("edu").value = ""
}
</script>
</head>
<body bgcolor="silver">
<center>
<table border="2" bordercolor="blue">
<tr>
<td><input type="button" value="c" onclick="clr()"/ style="width:50px;background:brown; height:50px;"> </td>
<td colspan="3"><input type="text" id="edu"/ style="width:100%;background:yellow; height:50px;"></td>
<!-- clr() function will call clr to clear all value -->
</tr>
<tr>
<!-- creating buttons and assigning values-->
<td><input type="button" value="+" onclick="dis('+')" style="width:100%;background:brown; height:50px;"/> </td>
<td><input type="button" value="1" onclick="dis('1')" style="width:100%;background:brown; height:50px;"/> </td>
<td><input type="button" value="2" onclick="dis('2')" style="width:100%;background:brown; height:50px;"/> </td>
<td><input type="button" value="3" onclick="dis('3')" style="width:100%;background:brown; height:50px;"/> </td>
</tr>
<tr>
<td><input type="button" value="-" onclick="dis('-')" style="width:100%;background:brown; height:50px;"/> </td>
<td><input type="button" value="4" onclick="dis('4')" style="width:100%;background:brown; height:50px;"/> </td>
<td><input type="button" value="5" onclick="dis('5')" style="width:100%;background:brown; height:50px;"/> </td>
<td><input type="button" value="6" onclick="dis('6')" style="width:100%;background:brown; height:50px;"/> </td>
</tr>
<tr>
<td><input type="button" value="*" onclick="dis('*')" style="width:100%;background:brown; height:50px;"/> </td>
<td><input type="button" value="7" onclick="dis('7')" style="width:100%;background:brown; height:50px;"/> </td>
<td><input type="button" value="8" onclick="dis('8')" style="width:100%;background:brown; height:50px;"/> </td>
<td><input type="button" value="9" onclick="dis('9')" style="width:100%;background:brown; height:50px;"/> </td>
</tr>
<tr>
<td><input type="button" value="/" onclick="dis('/')" style="width:100%;background:brown; height:50px;"/> </td>
<td><input type="button" value="." onclick="dis('.')" style="width:100%;background:brown; height:50px;"/> </td>
<td><input type="button" value="0" onclick="dis('0')" style="width:100%;background:brown; height:50px;"/> </td>
<!-- Evaluating function call eval()-->
<td><input type="button" value="=" onclick="solve()" style="width:100%;background:brown; height:50px;"/> </td>
</tr>
</table>
</center>
</body>
</html>
output as like image.
scientific calculator html css and js source code
<!DOCTYPE html>
<html>
<head>
<title> Scientific Calculator using HTML, CSS and Js </title>
<!-- CSS property to create interactive
calculator interface -->
<style>
#btn {
width: 100%;
height: 40px;
font-size: 30px;
}
input[type="button"] {
background-color:brown;
color: black;
border: solid black 2px;
width:100%
}
/* Set input textarea */
input[type="text"] {
background-color:yellow;
border: solid black 2px;
width:100%
}
</style>
<script>
/* Creating function in HTML for backspace operation */
function backspace(calc) {
size = calc.display.value.length;
calc.display.value = calc.display.value.substring(0, size-1);
}
/* Creating function to calculate factorial of element */
function calculate(calc) {
/* Check if function include ! character then
calculate factorial of number */
if(calc.display.value.includes("!")) {
size = calc.display.value.length;
n = Number(calc.display.value.substring(0, size-1));
f = 1;
for(i = 2; i <= n; i++)
f = f*i;
calc.display.value = f;
}
/* If function include % character then calculate
the % of number */
else if(calc.display.value.includes("%")) {
size = calc.display.value.length;
n = Number(calc.display.value.substring(0, size-1));
calc.display.value = n/100;
}
else
/* Otherwise evalute and execute output */
calc.display.value = eval(calc.display.value);
}
</script>
</head>
<body>
<form name = "calc">
<table id = "calc" >
<tr>
<td colspan="6"><input id="btn" name="display"
onkeypress="return event.charCode >= 48
&& event.charCode <= 57" type="text">
</td>
</tr>
<tr>
<td><input id="btn" type="button" value="1"
OnClick="calc.display.value+='1'">
</td>
<td><input id="btn" type="button" value="2"
OnClick="calc.display.value+='2'">
</td>
<td><input id="btn" type="button" value="3"
OnClick="calc.display.value+='3'">
</td>
<td><input id="btn" type="button" value="C"
OnClick="calc.display.value=''">
</td>
<td><input id="btn" type="button" value="<-"
OnClick="backspace(this.form)">
</td>
<td><input id="btn" type="button" value="="
OnClick="calculate(this.form)">
</td>
</tr>
<tr>
<td><input id="btn" type="button" value="4"
OnClick="calc.display.value+='4'">
</td>
<td><input id="btn" type="button" value="5"
OnClick="calc.display.value+='5'">
</td>
<td><input id="btn" type="button" value="6"
OnClick="calc.display.value+='6'">
</td>
<td><input id="btn" type="button" value="-"
OnClick="calc.display.value='-'">
</td>
<td><input id="btn" type="button" value="%"
OnClick="calc.display.value+='%'">
</td>
<td><input id="btn" type="button" value="cos"
OnClick="calc.display.value='Math.cos('">
</td>
</tr>
<tr>
<td><input id="btn" type="button" value="7"
OnClick="calc.display.value+='7'">
</td>
<td><input id="btn" type="button" value="8"
OnClick="calc.display.value+='8'">
</td>
<td><input id="btn" type="button" value="9"
OnClick="calc.display.value+='9'">
</td>
<td><input id="btn" type="button" value="*"
OnClick="calc.display.value+='*'">
</td>
<td><input id="btn" type="button" value="n!"
OnClick="calc.display.value+='!'">
</td>
<td><input id="btn" type="button" value="sin"
OnClick="calc.display.value='Math.sin('">
</td>
</tr>
<tr>
<td><input id="btn" type="button" value="."
OnClick="calc.display.value+='.'">
</td>
<td><input id="btn" type="button" value="0"
OnClick="calc.display.value+='0'">
</td>
<td><input id="btn" type="button" value=","
OnClick="calc.display.value+=','">
</td>
<td><input id="btn" type="button" value="+"
OnClick="calc.display.value+='+'">
</td>
<td><input id="btn" type="button" value="/"
OnClick="calc.display.value+='/'">
</td>
<td><input id="btn" type="button" value="tan"
OnClick="calc.display.value='Math.tan('">
</td>
</tr>
<tr>
<td><input id="btn" type="button" value="E"
OnClick="calc.display.value+='Math.E'">
</td>
<td><input id="btn" type="button" value="pi"
OnClick="calc.display.value+='Math.PI'">
</td>
<td><input id="btn" type="button" value="^"
OnClick="calc.display.value+='Math.pow('">
</td>
<td><input id="btn" type="button" value="("
OnClick="calc.display.value+='('">
</td>
<td><input id="btn" type="button" value=")"
OnClick="calc.display.value+=')'">
</td>
<td><input id="btn" type="button" value="log"
OnClick="calc.display.value='Math.log('">
</td>
</tr>
<tr>
<td><input id="btn" type="button" value="sqrt"
OnClick="calc.display.value+='Math.sqrt('">
</td>
<td><input id="btn" type="button" value="ln2"
OnClick="calc.display.value+='Math.LN2'">
</td>
<td><input id="btn" type="button" value="ln10"
OnClick="calc.display.value+='Math.Log10'">
</td>
<td><input id="btn" type="button" value="l2e"
OnClick="calc.display.value+='Math.LOG2E'">
</td>
<td><input id="btn" type="button" value="l10e"
OnClick="calc.display.value+='Math.log10'">
</td>
<td><input id="btn" type="button" value="exp"
OnClick="calc.display.value='Math.exp('">
</td>
</tr>
</table>
</form>
</body>
</html>
output show in image
0 comments:
Post a Comment