Calculator in HTML and CSS
What is a Calculator?
Calculator in HTML and CSS. A Calculator is an electronic device capable of performing various mathematical calculations, such as addition, multiplication, subtraction, division, etc. Casio Company developed the first electronic calculator in 1957. It can be run on various operating systems on computers, smartphones, and tablets. We can create a calculator with the help of various developing tools, languages.
In this article, I am going to tell you how you can create a very beautiful Calculator in HTML and CSS with simple steps. you just need to write a simple code of text to create this HTML calculator. We will use in this code HTML and simple internal CSS.
first of all, you have to create a folder, where you want to create a save you file of code and then drag it or open it on your text editor, after that you have to save this file by giving any name with the extension name HTML.
Here a Calculator is going to be formed with HTML code.
- Calculator Title: This is the title at the top of our application Calculator.
- Output Screen: This will be our output screen, where all text will be shown. Like the input that the user will type and the answer calculated from the user input. So, we can again break down this into two smaller pieces as shown below:
Explanation: In the above video, we have created a basic calculator with the help of HTML. with the help of this calculator, we can do an essential calculation function such as addition, subtraction, multiplication, division, etc.
<!DOCTYPE html>
<html>
<head>
<title>calculator</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
}
body
{
width: 100%;
height: 100vh;
background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://images.pexels.com/photos/3454270/pexels-photo-3454270.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
form
{
width: 400px;
height: auto;
background: rgba(255,255,255,0.1);
box-shadow: 20px 20px 50px rgba(0,0,0,.5);
padding: 30px 35px;
position: relative;
z-index: 1;
border-radius: 10px;
border-top:1px solid rgba(255,255,255,.5);
border-left:1px solid rgba(255,255,255,.5);
backdrop-filter:blur(5px);
}
form .display
{
width: 100%;
height: 100px;
text-align: right;
border:none;
outline: none;
padding: 10px;
font-size: 25px;
margin-bottom: 10px;
}
table span
{
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/*background-color: #0c2835;*/
background: rgba(255,255,255,0.1);
border:1px solid rgba(255,255,255,.5);
/*border: 1px solid rgba(0,0,0,.1);*/
cursor: pointer;
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
-6px -6px 10px -1px rgba(255,255,255,0.2);
}
table span:active
{
background: #05a081;
color: #fff;
box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
inset -4px -4px 6px -1px rgba(255,255,255,0.7),
-0.5px -0.5px 0px rgba(255,255,255,1),
0.5px 0.5px 0px rgba(0,0,0,0.15),
0px 12px 10px -10px rgba(0,0,0,0.05);
}
</style>
</head>
<body>
<form class="cal" name="form">
<input type="text" name="txt" readonly="" class="display">
<table>
<tr>
<td><span onclick="document.form.txt.value =''" class="num clear">C</span></td>
<td><span onclick="document.form.txt.value +='0'" class="num">0</span></td>
<td><span onclick="document.form.txt.value +='/'" class="num">/</span></td>
<td><span onclick="document.form.txt.value +='*'" class="num">*</span></td>
</tr>
<tr>
<td><span onclick="document.form.txt.value +='7'" class="num">7</span></td>
<td><span onclick="document.form.txt.value +='8'" class="num">8</span></td>
<td><span onclick="document.form.txt.value +='9'" class="num">9</span></td>
<td><span onclick="document.form.txt.value +='-'" class="num">-</span></td>
</tr>
<tr>
<td><span onclick="document.form.txt.value +='4'" class="num">4</span></td>
<td><span onclick="document.form.txt.value +='5'" class="num">5</span></td>
<td><span onclick="document.form.txt.value +='6'" class="num">6</span></td>
<td><span onclick="document.form.txt.value +='+'" class="num plus">+</span></td>
</tr>
<tr>
<td><span onclick="document.form.txt.value +='1'" class="num">1</span></td>
<td><span onclick="document.form.txt.value +='2'" class="num">2</span></td>
<td><span onclick="document.form.txt.value +='3'" class="num">3</span></td>
<td><span onclick="document.form.txt.value =eval(form.txt.value)" class="num equal">=</span></td>
</tr>
</table>
</form>
</body>
</html>
Here we completed our tutorial.
If you face any problem
please feel free to contact us.
Thanks for reading our post.
