Calculator Using Pure JavaScript and CSS
If you want to make your own calculator using pure javascript and css than you are at right place .
In this tutorial you will see how i create full responsive and attractive calculator using javascript and css.
Get Started
first of all you will need some code editor bur i prefer VS CODE https://code.visualstudio.com/download
and then follow some simple steps and you will able to make calculator.
CSS
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
span{
font-size: 20px;
display: flex;
}
.body1{
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: 15px;
}
.calculator span{
display: grid;
width: 60px;
height: 60px;
color: #fff;
background: #0c2835;
place-items: center;
border: 2px solid rgba(0,0,0, .1);
}
.calculator span:active{
background: #74ff3b;
color: #111;
}
.calculator span.clear{
grid-column: span 2;
background: #ff3077;
width: 120px;
}
.calculator span.plus{
grid-row: span 2;
height: 120px;
background: #45d13d;
}
.calculator span.equal{
background: #03b1ff;
}
.hh1{
text-align: center;
justify-content: center;
align-items: center;
display: flex;
font-family:Verdana, Geneva, Tahoma, sans-serif;
letter-spacing: 3px;
animation: h1 1s infinite;
}
@keyframes h1 {
10%{
color: #ff3077;
transform: rotate(1deg);
}
40%{
color: #ff3077;
transform: rotate(-1deg);
}
70%{
color: darkorange;
transform: rotate(1deg);
}
100%{
color: rgb(0, 171, 238);
transform: rotate(-1deg);
}
}
</style>
copy this css code and add to your code editor
then copy simple html code
<body>
<div class="hh1"><p><h1>My Calculator</h1></p></div> <br>
</body>
<body class="body1">
<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 += '*'">X</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" onclick="document.calc.txt.value += '.'">.</span>
<span class="num equal" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span>
</form>
</body>
Download Source-Code From Here