This tutorial will demonstrate the process of building a calculator using HTML through a series of diverse illustrations. Initially, we will delve into the foundational concepts of HTML. Subsequently, we will explore the steps involved in constructing a simple calculator using HTML.
What is HTML?
Hypertext Markup Language (HTML) serves as the universal mark-up language for creating documents intended for viewing on web browsers. It is compatible with different tools like CSS and programming languages like JavaScript and PHP.
HTML is a markup language that uses text; an HTML file can be modified by opening it in software like Notepad++, Notepad, Sublime Text, etc. A text editor is employed for composing or modifying an HTML file, which typically carries a .html file extension.
What is a Calculator?
A calculator is an electronic tool that can carry out a range of mathematical computations like addition, multiplication, subtraction, and division. The initial electronic calculator was crafted by Casio Company back in 1957. It is compatible with different operating systems found on computers, smartphones, and tablets. Various development tools and programming languages can be utilized to build a calculator.
Let's explore a few instances of a Calculator using HTML.
Example 1:
Example
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Calculator using HTML Example
</title>
<link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet">
<!-- CSS property to create interactive
calculator interface -->
<style>
html {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #2d3436;
background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
font-family: 'Cookie', cursive;
}
.title {
margin-bottom: 10px;
padding: 5px 0;
font-size: 40px;
font-weight: bold;
text-align: center;
color: red;
font-family: 'Cookie', cursive;
}
input[type=button] {
width: 60px;
height: 60px;
float: left;
padding: 0;
margin: 5px;
box-sizing: border-box;
background: #ecedef;
border: none;
font-size: 30px;
line-height: 30px;
border-radius: 50%;
font-weight: 700;
color: #5E5858;
cursor: pointer;
}
input[type=text] {
width: 270px;
height: 60px;
float: left;
padding: 0;
box-sizing: border-box;
border: none;
background: none;
color: red;
text-align: right;
font-weight: 700;
font-size: 60px;
line-height: 60px;
margin: 0 25px;
}
.calculator {
background-color: #c0c0c0;
box-shadow: 0px 0px 0px 10px #666;
border: 5px solid black;
border-radius: 10px;
}
#display {
height: 40px;
text-align: right;
background-color: black;
border: 3px solid white;
font-size: 18px;
left: 2px;
top: 2px;
color: red;
}
.btnTop {
color: white;
background-color: #6f6f6f;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
</style>
</head>
<body>
<div class = "title" align="center">
Example of Calculator using HTML
</div>
<form name="Calculator" class = "calculator" >
<table border="2" align="center" cellpadding="15" cellspacing="12" bgcolor="#c0c0c0">
<tr>
<td>
<input type="text" name="Input" Size="35" id="display">
<br>
</td>
</tr>
<tr>
<td>
<input type="button" name = "one" style="font-size:30px" value=" 1 " OnClick="Calculator.Input.value += '1'">
<input type="button" name = "two" style = "font-size:30px" value=" 2 " OnCLick="Calculator.Input.value += '2'">
<input type="button" name = "three" style="font-size:30px" value=" 3 " OnClick="Calculator.Input.value += '3'">
<input type="button" name="add" class ="btnTop" style="font-size:30px" value=" + " OnClick="Calculator.Input.value += ' + '">
<br>
<input type="button" name = "four" style="font-size:30px" value=" 4 " OnClick="Calculator.Input.value += '4'">
<input type="button" name = "five" style="font-size:30px" value=" 5 " OnCLick="Calculator.Input.value += '5'">
<input type="button" name = "six" style="font-size:30px" value=" 6 " OnClick="Calculator.Input.value += '6'">
<input type="button" name = "minus" style="font-size:30px" value=" - " OnClick="Calculator.Input.value += ' - '">
<br>
<input type="button" name = "seven" style="font-size:30px" value=" 7 " OnClick="Calculator.Input.value += '7'">
<input type="button" name = "eight" style="font-size:30px" value=" 8 " OnCLick="Calculator.Input.value += '8'">
<input type="button" name = "nine" style="font-size:30px" value=" 9 " OnClick="Calculator.Input.value += '9'">
<input type="button" name = "mul" style="font-size:30px" value=" * "
OnClick="Calculator.Input.value += ' * '">
<br>
<input type="button" name = "clear" style="font-size:30px" value=" c " OnClick="Calculator.Input.value = ''">
<input type="button" name="zero" style="font-size:30px" value=" 0 " OnClick="Calculator.Input.value += '0'">
<input type="button" name="DoIt" style="font-size:30px" value=" = " OnClick="Calculator.Input.value = eval(Calculator.Input.value)">
<input type="button" name="div" style="font-size:30px" value=" / " OnClick="Calculator.Input.value += ' / '">
<br>
</td>
</tr>
</table>
</form>
</body>
</html>
In the provided instance, we've developed a fundamental calculator using HTML. This calculator enables us to perform key arithmetic operations like addition, subtraction, multiplication, division, and more.
Following is the output of this example:
Example 2:
Example
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Calculator using HTML Example
</title>
<link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet">
<!-- CSS property to create interactive
calculator interface -->
<style>
* {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
body {
background: black;
}
.container {
width: auto;
margin: 20px;
color:black;
}
.calc-body {
width: 275px;
margin: auto;
min-height: 400px;
border: solid 1px #3A4655;
box-shadow: 0 8px 50px -7px black;
}
.calc-screen {
background: #3A4655;
width: 100%;
height: 150px;
padding: 20px;
}
.calc-operation {
text-align: right;
color: #727B86;
font-size: 21px;
padding-bottom: 10px;
border-bottom: dotted 1px;
}
.calc-typed {
margin-top: 20px;
font-size: 45px;
text-align: right;
color: #fff;
}
.calc-button-row {
width: 100%;
background: #3C4857;
}
.button {
width: 25%;
background: #425062;
color: #fff;
padding: 20px;
display: inline-block;
font-size: 25px;
text-align: center;
vertical-align: middle;
margin-right: -4px;
border-right: solid 2px #3C4857;
border-bottom: solid 2px #3C4857;
transition: all 0.2s ease-in-out;
}
.button.l {
color: #AEB3BA;
background: #404D5E;
}
.button.c {
color: #D95D4E;
background: #404D5E;
}
.button:hover {
background: #E0B612;
transform: rotate(5deg);
}
.button.c:hover {
background: #E0B612;
color: #fff;
}
.button.l:hover {
background: #E0B612;
color: #fff;
}
.blink-me {
color: #E0B612;
}
html {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #2d3436;
background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
font-family: 'Cookie', cursive;
}
.title:hover {
background: #E0B612;
color: #fff;
}
.title {
margin-bottom: 10px;
padding: 5px 0;
font-size: 40px;
font-weight: bold;
text-align: center;
color: #AEB3BA;
font-family: 'Cookie', cursive;
}
input[type=button] {
width: 60px;
height: 60px;
float: left;
padding: 0;
margin: 5px;
box-sizing: border-box;
background: #ecedef;
border: none;
font-size: 30px;
line-height: 30px;
border-radius: 50%;
font-weight: 700;
color: #5E5858;
cursor: pointer;
}
input[type=text] {
width: 270px;
height: 60px;
float: left;
padding: 0;
box-sizing: border-box;
border: none;
background: none;
color: red;
text-align: right;
font-weight: 700;
font-size: 60px;
line-height: 60px;
margin: 0 25px;
}
.calculator {
background-color: #c0c0c0;
box-shadow: 0px 0px 0px 10px #666;
border: 5px solid black;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="calc-body">
<div class="calc-screen">
<div class="calc-operation"> 25 + 10 = </div>
<div class="calc-typed"> 35 <span class="blink-me"> _ </span> </div>
</div>
<div class="calc-button-row">
<div class="button c"> C </div>
<div class="button l"> ? </div>
<div class="button l"> % </div>
<div class="button l"> / </div>
</div>
<div class="calc-button-row">
<div class="button"> 7 </div>
<div class="button"> 8 </div>
<div class="button"> 9 </div>
<div class="button l"> x </div>
</div>
<div class="calc-button-row">
<div class="button"> 4 </div>
<div class="button"> 5 </div>
<div class="button"> 6 </div>
<div class="button l"> ? </div>
</div>
<div class="calc-button-row">
<div class="button"> 1 </div>
<div class="button"> 2 </div>
<div class="button"> 3 </div>
<div class="button l"> + </div>
</div>
<div class="calc-button-row">
<div class="button"> . </div>
<div class="button"> 0 </div>
<div class="button">
< </div>
<div class="button l"> = </div>
</div>
</div>
</div>
</body>
</html>
In the provided illustration, a fundamental calculator has been developed using HTML. This calculator enables performing key mathematical operations like addition, subtraction, multiplication, division, and more.
Following is the output of this example:
Example 3:
Example
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Calculator using HTML Example
</title>
<link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet">
<!-- CSS property to create interactive
calculator interface -->
<style>
body
{
background-color: tan;
}
.box
{
background-color: #3d4543;
height: 300px;
width: 270px;
border-radius: 10px;
position: relative;
top: 80px;
left: 40%;
}
.display
{
background-color: #222;
width: 220px;
position: relative;
left: 15px;
top: 20px;
height: 40px;
}
.display input
{
position: relative;
left: 2px;
top: 2px;
height: 35px;
color: black;
background-color: #bccd95;
font-size: 21px;
text-align: right;
}
.keys
{
position: relative;
top: 15px;
}
.button
{
width: 40px;
height: 30px;
border: none;
border-radius: 8px;
margin-left: 17px;
cursor: pointer;
border-top: 2px solid transparent;
}
.button.gray
{
color: black;
font-color: black;
background-color: #6f6f6f;
border-bottom: black 2px solid;
border-top: 2px #6f6f6f solid;
}
.title:hover {
color: #fff;
}
.title {
margin-bottom: 10px;
margin-top: 30px;
padding: 5px 0;
font-size: 40px;
font-weight: bold;
text-align: center;
color: black;
font-family: 'Cookie', cursive;
}
.button.pink
{
color: black;
background-color: #ff4561;
border-bottom: black 2px solid;
}
.button.black
{
color: black;
background-color: 303030;
border-bottom: black 2px solid;
border-top: 2px 303030 solid;
font-weight: bold;
}
.button.orange
{
color: black;
background-color: FF9933;
border-bottom: black 2px solid;
border-top: 2px FF9933 solid;
}
.gray:active
{
border-top: black 2px solid;
border-bottom: 2px #6f6f6f solid;
}
.pink:active
{
border-top:black 2px solid;
border-bottom:#ff4561 2px solid;
}
.black:active
{
border-top: black 2px solid;
border-bottom: #303030 2px solid;
}
.orange:active
{
border-top: black 2px solid;
border-bottom: FF9933 2px solid;
}
p
{
line-height: 10px;
}
</style>
</head>
<body>
<div class = "title? align="centre">
Example of Calculator using HTML
</div>
<div class="box">
<div class="display">
<input type="text" readonly size="18" id="d">
</div>
<div class="keys">
<p> <input type="button" class="button gray" value="mrc" onclick='c("Created....................")'>
<input type="button" class="button gray" value="m-" onclick='c("...............by............")'>
<input type="button" class="button gray"
value="m+" onclick='c(".....................Anoop")'>
<input type="button" class="button pink" value="/" onclick='v("/")'> </p>
<p> <input type="button" class="button black" value="7" onclick='v("7")'>
<input type="button" class="button black" value="8" onclick='v("8")'>
<input type="button" class="button black" value="9" onclick='v("9")'>
<input type="button" class="button pink" value="*" onclick='v("*")'> </p>
<p> <input type="button" class="button black" value="4" onclick='v("4")'>
<input type="button" class="button black" value="5" onclick='v("5")'>
<input type="button" class="button black" value="6" onclick='v("6")'>
<input type="button" class="button pink" value="-" onclick='v("-")'> </p>
<p> <input type="button" class="button black" value="1" onclick='v("1")'>
<input type="button" class="button black" value="2" onclick='v("2")'>
<input type="button" class="button black" value="3" onclick='v("3")'>
<input type="button" class="button pink" value="+" onclick='v("+")'> </p>
<p> <input type="button" class="button black" value="0" onclick='v("0")'>
<input type="button" class="button black" value="." onclick='v(".")'>
<input type="button" class="button black" value="C" onclick='c("")'>
<input type="button" class="button orange" value="=" onclick='e()'> </p>
</div>
</div>
</body>
<script>
function c(val)
{
document.getElementById("d").value=val;
}
function v(val)
{document.getElementById("d").value+=val;
}
function e()
{
try
{
c(eval(document.getElementById("d").value))
}
catch(e)
{
c('Error') }
}
</script>
</html>
In the provided instance, a fundamental calculator has been developed using HTML. This calculator enables the performance of key arithmetic operations like addition, subtraction, multiplication, and division.
Following is the output of this example: