Hello friends, today in this blog you’ll learn How To Make a Calculator Using Html and Css Only . We’ll use Html & Css to create this Calculator . Earlier I’ve shared a blog on Animated Login Form Using HTML & CSS .
If You have any Problem so, I Also Created a full video tutorial on this Calculator Using Html and Css you can see this tutorial .
Video Tutorial of ”Calculator Using Html and Css “
You might like this:
- How To Create ToDo List Using JavaScript | Javascript ToDo List
- How To Create Testimonial Slider Using HTML CSS JavaScript
- Download Button With Countdown Timer | Using Html Css Js
Calculator Using Html and Css Only [Source Codes]
To create this Calculator . First, you need to create Two files, HTML File , And CSS File . After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement.
# HTML CODE
First, create a Html file (index.html) and paste the given codes in your CSS file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Calculator</title>
</head>
<body>
<form class="calculator" name="calc">
<input class="value" type="text" name="txt" readonly="">
<span class="num clear" onclick="document.calc.txt.value = ''">C</span>
<span class="num" onclick="document.calc.txt.value += '/'">/</span>
<span class="num" onclick="document.calc.txt.value += '*'">*</span>
<span class="num" onclick="document.calc.txt.value += '7'">7</span>
<span class="num" onclick="document.calc.txt.value += '8'">8</span>
<span class="num" onclick="document.calc.txt.value += '9'">9</span>
<span class="num" onclick="document.calc.txt.value += '-'">-</span>
<span class="num" onclick="document.calc.txt.value += '4'">4</span>
<span class="num" onclick="document.calc.txt.value += '5'">5</span>
<span class="num" onclick="document.calc.txt.value += '6'">6</span>
<span class="num plus" onclick="document.calc.txt.value += '+'">+</span>
<span class="num" onclick="document.calc.txt.value += '3'">3</span>
<span class="num" onclick="document.calc.txt.value += '2'">2</span>
<span class="num" onclick="document.calc.txt.value += '1'">1</span>
<span class="num" onclick="document.calc.txt.value += '0'">0</span>
<span class="num" onclick="document.calc.txt.value += '00'">00</span>
<span class="num equal" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span>
</form>
</body>
</html>
<!-- /* COPYRIGHT- CODING WITH NICK*/ --># CSS CODE
Second, create a CSS file (style.css) and paste the given codes in your CSS file.
/*CODING WITH NICK*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins',sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #091921;
}
.calculator{
position: relative;
display: grid;
}
.calculator .value{
grid-column: span 4;
height: 100px;
text-align: right;
border: none;
outline: none;
padding: 10px;
font-size: 18px;
}
.calculator span{
display: grid;
width: 60px;
height: 60px;
color: #fff;
background: #0c2835;
place-items: center;
border: 1px solid rgba(0,0,0,.1);
}
.calculator span:active{
background: rgb(26, 133, 175);
color: #111;
}
.calculator span.clear{
grid-column: span 2;
width: 120px;
background: rgb(252, 45, 45);
}
.calculator span.plus{
grid-row: span 2;
height: 120px;
}
.calculator span.equal{
background: orange;
}That’s all, now you’ve successfully Create a Calculator Using Html and Css Only . If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button.
I Hope this blog will be helpful.
Read More-
