Calculator in HTML and CSS :
Video Tutorial of Calculator (HTML & CSS)
Hello Viewers
Today we will learn how to create or design Calculator by using HTML and CSS.
If you want to learn step by step in Hindi, So you can move to my YouTube's Channel (IT in Hindi).
In this post we are providing the full source code of Calculator.
You can copy and use the code because it is non copyright.
SOURCE CODE:
HTML CODE:
Step1- Copy and paste the HTML code mentioned below and save the file as "calculator.html".
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="itinhindi.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div class="middle">
<form name="calc">
<input type="text" id="display" name="display" disabled>
<div class="buttons">
<input type="button" id="seven" value="7">
<input type="button" id="eight" value="8">
<input type="button" id="nine" value="9">
<input type="button" id="divide" value="/"><br>
<input type="button" id="four" value="4">
<input type="button" id="five" value="5">
<input type="button" id="six" value="6">
<input type="button" id="multi" value="*"><br>
<input type="button" id="one" value="1">
<input type="button" id="two" value="2">
<input type="button" id="three" value="3">
<input type="button" id="subs" value="-"><br>
<input type="button" id="dot" value=".">
<input type="button" id="zero" value="0">
<input type="button" id="add" value="+">
<input type="button" id="clear" value="C"><br>
<input type="button" id="equal" value="=">
</div>
</form>
</div>
<footer>
<p>Created by
<a target="_blank" https://www.youtube.com/channel/UCTt7PLZfw50ffbZBsrQCuA/">
© IT in Hindi</a>
</p>
</footer>
</body>
</html>
CSS CODE:
Step2- Copy and paste the CSS code below and save the file as "itinhindi.css".
*{
margin: 0.0;
padding: 0.0;
outline: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
min-height: 100.0vh;
background: #ecf0f3;
}
.middle{
width: 350px;
background: #ecf0f3;
border-radius: 20px;
box-shadow: 14px 14px 22px #cbced1,
-14px -14px 22px #cbced1;
}
input[type="text"]{
height: 60px;
width: 300px;
margin-top: 40px;
border-radius: 1px;
border: 1px solid #e1e7ea;
color: black;
font-size: 22px;
font-weight: bold;
text-align: right;
padding-right: 20px;
background: #ecf0f3;
box-shadow: inset 8px 8px 8px #cbced1,
inset -8px -8px 8px #ffffff;
}
form .buttons{
width: 300px;
margin: 10px 25px 0 25px;
padding: 10px 0;
}
input[type="button"]{
width: 58px;
height: 55px;
margin: 5px;
font-size: 22px;
line-height: 55px;
border-radius: 3px;
border: 2px solid #d9d9d9;
background: #ecf0f3;
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
-6px -6px 10px -1px rgba(255,255,255,0.7);
border: 1px solid rgba(0,0,0,0);
transition: transform 0.5s;
}
input[type="button"]:hover{
transition: .5s;
background: #cbced1;
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);
border: 1px solid rgba(0,0,0,0.01);
transform: translateY(2px);
}
input#clear{
background: #ff1a1a;
border: 1px solid #cc0000;
color: white;
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
-6px -6px 10px -1px rgba(255,255,255,0.7);
border: 1px solid rgba(0,0,0,0);
transition: transform 0.5s;
}
input#clear:hover{
background-color: orange;
}
input#equal{
width: 275px;
margin: 10px 0 10px 0;
font-size: 30px;
color: white;
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
-6px -6px 10px -1px rgba(255,255,255,0.7);
border: 1px solid rgba(0,0,0,0);
transition: transform 0.5s;
background: #00acee;
border: 1px solid #00acee;
}
input#equal:hover{
background-color: #24cfaa;
}
footer {
background-color: #555;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
footer p {
margin: 10.1px 0;
font-family: sans-serif;
}
footer a {
color: #ff6f61;
text-decoration: none;
margin-right:5px;
}
How to run the source code :-
Step1- Now copy and paste the HTML code mentioned above and save the file as "calculator.html".
Step2- Copy and paste the CSS code above and save the file as "itinhindi.css".
Step3- Run "calculator.html" file.
Covered Topics:
calculator using html css and javascript,
HTML & CSS Design,
html code for scientific calculator,
simple calculator program using javascript in html,
html code for calculator,
calculator html code free.
0 Comments