Last updated on March 12th, 2023 at 08:04 am
Here we are going to create a stylish Calculator using simple JavaScript functions which performs basic arithmetic operations like Addition, Subtraction, Division, Multiplication and Percentage(bonus). We are using CSS to give it a beautiful look and feel.
Table of Contents
Structure Calculator
In this step we will write some basic HTML code to structure the Calculator and add some CSS to make our calculator beautiful.
<table>
<tr>
<th><input class="dis-71" type="" readonly id="disp" name=""></th><th>
<input class="res-71" readonly type="text" id="total" name="total">
</th></tr></table>
<table>
<tr>
<th><button class="button-71" role="button" onclick="change(this.value)" value="1">1</button> </th>
<th><button class="button-71" role="button" onclick="change(this.value)" value="2">2</button></th>
<th><button class="button-71" role="button" onclick="change(this.value)" value="3">3</button></th>
<th><button class="button-71" role="button" onclick="change(this.value)" value="4">4</button></th>
<th><button class="button-71" role="button" onclick="change(this.value)" value="5">5</button></th>
</tr>
<tr>
<th><button class="button-71" role="button" onclick="change(this.value)" value="6">6</button> </th>
<th><button class="button-71" role="button" onclick="change(this.value)" value="7">7</button></th>
<th><button class="button-71" role="button" onclick="change(this.value)" value="8">8</button></th>
<th><button class="button-71" role="button" onclick="change(this.value)" value="9">9</button></th>
<th><button class="button-71" role="button" onclick="change(this.value)" value="0">0</button></th>
</tr>
<tr>
<th><button class="button-71" role="button" onclick="change(this.value)" value="+">+</button> </th>
<th><button class="button-71" role="button" onclick="change(this.value)" value="-">-</button></th>
<th><button class="button-71" role="button" onclick="change(this.value)" value="*">X</button></th>
<th><button class="button-71" role="button" onclick="change(this.value)" value="/">/</button></th>
<th><button class="button-71" role="button" onclick="change(this.value)" value="%">%</button></th>
</tr>
</table>
<button class="button-81" role="button" onclick="total()" value="">Result</button><p>
<button class="button-81" role="button" onclick="clean()" value="">Clear</button>
If you save the above script as an HTML all you will see is similar to the screenshot below
Add Style
Next step is to add some style to make the calculator beautiful
/* CSS */
.button-71 {
background-color: #0078d0;
border: 0;
border-radius: 56px;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
font-size: 18px;
font-weight: 600;
outline: 0;
padding: 16px 21px;
position: relative;
text-align: center;
text-decoration: none;
transition: all .3s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.button-81 {
background-color: #0078d0;
border: 0;
width:50%;
border-radius: 56px;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
font-size: 18px;
font-weight: 600;
outline: 0;
padding: 16px 21px;
position: relative;
text-align: center;
text-decoration: none;
transition: all .3s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.res-71 {
background-color: #798c99;
border: 0;
border-radius: 56px;
color: #fff;
display: inline-block;
font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
font-size: 18px;
font-weight: 600;
outline: 0;
padding: 16px 21px;
position: relative;
text-align: center;
text-decoration: none;
transition: all .3s;
user-select: none;
-webkit-user-select: none;
}
.button-81:hover {
background: #383;
}
.dis-71 {
background-color: #000;
border: 0;
border-radius: 56px;
color: #fff;
display: inline-block;
font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
font-size: 22px;
font-weight: 600;
outline: 0;
padding: 16px 21px;
position: relative;
text-align: center;
text-decoration: none;
transition: all .3s;
user-select: none;
-webkit-user-select: none;
}
@media (min-width: 768px) {
.button-71 {
padding: 16px 48px;
}
}
This will make it look much better
Configure Javascript
Once we have the calculator structure and design ready we have to add Javascript to make it work.
function change(a)
{
document.getElementById("disp").value += a
}
function clean()
{
document.getElementById("disp").value =""
}
function total(a)
{
new_a=document.getElementById("disp").value
symbols = /[\%\/*+-]+/
document.getElementById("disp").value=new_a
result= new_a.match(symbols);
if(!result)
{
result=""
}
else
{
switch (result[0]) {
case '+':
add=new_a.split("+");
c=eval(add[0])+eval(add[1])
document.getElementById("total").value=c;
document.getElementById("disp").value="";
break;
case '-':
add=new_a.split("-");
c=eval(add[0])-eval(add[1])
document.getElementById("total").value=c;
document.getElementById("disp").value="";
break;
case '/':
add=new_a.split("/");
c=eval(add[0])/eval(add[1])
document.getElementById("total").value=c;
document.getElementById("disp").value="";
break;
case '*':
add=new_a.split("*");
c=eval(add[0])*eval(add[1])
document.getElementById("total").value=c;
document.getElementById("disp").value="";
break;
case '%':
add=new_a.split("%");
console.log("Inside Modulus")
c=eval(add[0])*eval(add[1])/100
document.getElementById("total").value=c;
document.getElementById("disp").value="";
break;
}
}
}
The change function just update the display input field with whatever number / arithmetic symbol you press.
Clear function is just to delete all the number from the input display field.
In a nutshell total function look for these symbols = /[\%\/*+-]+/ and then split the numbers we got in the display field , do the processing accordingly like addition/subtraction/multiplication/ division/percentage using the switch case statement.
Demo (Copy the complete code from the demo)
admin