Calculator in HTML and CSS ( Attractive Calculator Design using HTML and CSS ).
Calculator in HTML and CSS :
Hello Viewers
आज हमलोग HTML & CSS की help से Calculator Design करना सीखेंगे।
अगर आप Step by Step समझ कर सीखना चाहते है तो आप हमारे Channel पर जा कर सीख सकते हैं।
हमलोग ने इस blog post में Calculator के source code को provide किया हैं।
आप लोग बस इस code को copy करके paste करके save कर सकते हैं or Program को Run करवा सकते हैं।
SOURCE CODE:
HTML CODE:
Step1- Now 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/UCTt7PLZfw50f-fbZBsrQCuA/">© 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 below and save the file as "calculator.html".
Step2- Copy and paste the CSS code below and save the file as "itinhindi.css".
Step3- Run "calculator.html" file.
Video Tutorial of Calculator (HTML & CSS)
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.
Comments
Post a Comment