Rajneesh Tutorials
Amazing Calculator Design
By Rajneesh
May 30, 2020
Calculator by HTML CSS
HELLO friends did you want a amazing calculator made with html css only fully working and responsive design
by Rajneesh Thakur
Is it awesome ?
You can run in on mobile
Calculator Code
You can join us on Facebook page. Here we provide all the basic tutorial of html css and java script. Here we also upload the amazing design tutorial with html and css
And python project also. Like our page in Facebook, click Rajneesh Tutorials
Here is code of Calculator
HTML & CSS
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
*{
margin: 0px ;
padding: 0px ;
text-align: center;
font-weight: bold;
font-family:arial ;
}
body{
width: 100% ;
height: 100vh;
color: white;
}
#formm{
background: linear-gradient(45deg,blue,rgb(0,0,0),purple);
width: 60%;
border-radius: 10px;
position: absolute;
top: 25%; left: 20%;right: 20%;
padding: 10px;
border: 2px solid white;
box-shadow: 0px 0px 0px rgba(0,255,255,0.5),
0 0 15px rgba(0,255,255,0.5), 0 0 20px rgba(0,255,255,0.5),0 0 25px rgba(0,255,255,0.5);
}
input[type="text"]{
width: 100%;
padding: 5px;
border: none;
font-size: 20px;
background: none;
color: white;
border-bottom: 2px solid white;
margin: 10px 0px;
}
h1{
width: 60%;
margin-top: 0px;
position: absolute;
top: 5%; left: 20%;right: 30%;
}
h2{
width: 60%;
margin-top: 0px;
position: absolute;
top: 15%; left: 20%;right: 30%;
font-size: 30px;
animation: raj 3s infinite;
}
input[type="button"]{
padding: 5px;
border: none;
font-size: 15px;
background: rgba(255,255,255,0.1);
color: white;
text-align: center;
margin: 10px 5px;
width: 18%;
transition: 1.5s;
}
input[type="button"]:hover{
background: white;
color: rgb(0,200,200);
box-shadow: 0px 0px 0px rgba(0,255,255,0.5),
0 0 15px rgba(0,255,255,0.5), 0 0 20px rgba(0,255,255,0.5),0 0 25px rgba(0,255,255,0.5);
}
#ans{
width: 35%;
background: rgba(200,0,100,0.3);
}
@keyframes raj{
0%{
transform: rotateY(360deg);
color: purple;
}
100%{
transform: rotateY(0deg);
color: rgb(0,255,255);
}
}
.bbody{
width: 100%;
height: 100%;
border-radius: 100px 0px 200px 0px;
background: linear-gradient(45deg,blue,rgb(0,200,255));
box-shadow: 0px 0px 10px black,0 0 15px black,
0 0 10px black,0 0 15px black;
}
</style>
</head>
<body>
<div class="bbody">
<h1>Rajneesh </h1>
<h2>Calculator </h2>
<div id="formm">
<form name="a">
<input type="text" name="b" placeholder="Calculator" disabled>
<br>
<input type="button" value="1" onclick="a.b.value+='1'">
<input type="button" value="2" onclick="a.b.value+='2'">
<input type="button" value="3" onclick="a.b.value+='3'">
<input type="button" value="+" onclick="a.b.value+='+'">
<br>
<input type="button" value="4" onclick="a.b.value+='4'">
<input type="button" value="5" onclick="a.b.value+='5'">
<input type="button" value="6" onclick="a.b.value+='6'">
<input type="button" value="-" onclick="a.b.value+='-'">
<br>
<input type="button" value="7" onclick="a.b.value+='7'">
<input type="button" value="8" onclick="a.b.value+='8'">
<input type="button" value="9" onclick="a.b.value+='9'">
<input type="button" value="*" onclick="a.b.value+='*'">
<br>
<input type="button" value="00" onclick="a.b.value+='00'">
<input type="button" value="0" onclick="a.b.value+='0'">
<input type="button" value="." onclick="a.b.value+='.'">
<input type="button" value="/" onclick="a.b.value+='/'">
<br>
<input type="button" value="ClearAll" id="ans" onclick="a.b.value=''">
<input type="button" value="ANSWER" id="ans" onclick="a.b.value=eval(a.b.value)">
</form>
</div>
</div>
</body>
</html>
We don't need java Script bacause java script is already in html tags
How to run this code
To run this code there are some simple steps
Copy code
Make a file index.html
Paste code and save file
Open file in browser
Next topic on Facebook loading animation with html css only:
Example
Thanks to see our blog
Follow me to get more like this
© Rajneesh Tutorials
Facebook id Rajneesh
Website Rajneesh home
Facebook page Rajneesh Tutorials
Blog Top 10s
Blog Rajneesh Tutorials
Comments
Post a Comment