Wednesday, April 08, 2020
Hello, Friends how are you? It is
corona time so stay at home and be safe from the corona. I know you are getting
bore due to lockdown so I have written this article to make your time pass. In
this tutorial, I will help you to construct the calculator using HTML. There are
several programming that helps you to construct different but I prefer you to
use HTML because it is simpler than another programming language. If you know how
to construct the calculator by another programming then please comment on the
comment section. If you are too bore while staying on the home during lockdown
there is a guest post section on my blog where you can publish the article that
you want to publish in this blog. Now friend let’s start the tutorial
Calculators are an electronic
devices that can perform simple to advance calculations. Many people use a calculator in daily life. Now a day’s people use a mobile calculator than a pocket
calculator. The calculator was first created in the 1960’s. The calculator is used to doing
addition, subtraction, multiplication, division, and other algebraic as well as a mathematical problem. Nowadays various types of calculator are available in the market. But in this tutorial, I will help you to construct the calculator using
HTML and CSS. There are several Apps/software where you can convert HTML code
but I prefer you to use anWriter free for mobile phone and sublime text for pc.
So I prefer you to use the same app for you also.
Now the code that is required to
construct the calculator is given below. If you are a good programmer then only
edit the code otherwise it will not work.
<!DOCTYPE html>
<html>
<head>
<title>
Scientific Calculator using HTML, CSS
and Js
</title>
<!-- CSS property to create interactive
calculator interface -->
<style>
/* Style to set the title of the calculator
*/
.title {
margin-bottom: 10px;
padding: 5px 0;
font-size: 20px;
font-weight:bold;
text-align:center;
width: 447px;
color:green;
border: solid black 2px;
}
/* Set the button style */
#btn {
width: 100%;
height: 40px;
font-size: 30px;
}
input[type="button"] {
background-color:green;
color: black;
border: solid black 2px;
width:100%
}
/* Set input textarea */
input[type="text"] {
background-color:white;
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 evaluate and
execute output */
calc.display.value =
eval(calc.display.value);
}
</script>
</head>
<body>
<div class = title >
Scientific calculator created by Arun
panthi
</div>
<form name = "calc">
<table id = "calc" border = 2>
<tr>
<td colspan=5><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="π"
OnClick="calc.display.value+='Math.π'">
</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>
Thank you for reading my article please
don’t forget to give me feedback about it in the comment section. Stay at home to be
safe and healthy.
Post a Comment