Hello readers, Today in this blog you’ll learn how to build a Calculator using HTML CSS & jQuery. Previously I have shared a Working Analog Clock using HTML CSS & Javascript, now it’s time to create a Working Calculator using jQuery.As you can see in the image, this is a Calculator. You will find a calculator program the same as this on a very familiar website like CodePen, but that program will be very difficult. If you are a beginner or watching for simple code then definitely difficult for you to understand.
In the image, there are some buttons and numbers. When you click on that specific button, the number of that button will be shown on the display. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Working Calculator).
Video Tutorial of Working Calculator using Javascript
I hope you have understood the designs, concepts, and codes. I think this video can help beginners to know CSS in depth. If you want to get the source code of this program (Working Calculator). You can easily get it from the link which is given below.
You can also build this calculator according to requirements after a few changes. Also, you can redesign this program to take this Calculator to the next level.
Working Calculator using HTML CSS & jQuery [Source Codes]
To create this program (Working Calculator). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Somehow I got an error, so I comment the title, just uncomment to show -->
<!-- <title>Calculator</title> -->
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div class="center">
<form name="forms">
<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>
<script>
$(document).ready(function(){
$('#one').click(function(){
document.forms.display.value += 1;
});
$('#two').click(function(){
document.forms.display.value += 2;
});
$('#three').click(function(){
document.forms.display.value += 3;
});
$('#four').click(function(){
document.forms.display.value += 4;
});
$('#five').click(function(){
document.forms.display.value += 5;
});
$('#six').click(function(){
document.forms.display.value += 6;
});
$('#seven').click(function(){
document.forms.display.value += 7;
});
$('#eight').click(function(){
document.forms.display.value += 8;
});
$('#nine').click(function(){
document.forms.display.value += 9;
});
$('#zero').click(function(){
document.forms.display.value += 0;
});
$('#add').click(function(){
document.forms.display.value += '+';
});
$('#subs').click(function(){
document.forms.display.value += '-';
});
$('#multi').click(function(){
document.forms.display.value += '*';
});
$('#divide').click(function(){
document.forms.display.value += '/';
});
$('#dot').click(function(){
document.forms.display.value += '.';
});
$('#equal').click(function(){
if (display.value == "") {
alert("Please enter any numbers to calculate!");
}else{
document.forms.display.value =
eval(document.forms.display.value);
}
});
$('#clear').click(function(){
document.forms.display.value = "";
});
})
</script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(#9cebfc,#6ae1fb);
}
.center{
/* display: none; */
width: 350px;
background: black;
border-radius: 20px;
}
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: linear-gradient(#d1dce0,#dfe6e9);
}
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: 1px solid #d9d9d9;
background: linear-gradient(#d9d9d9, #bfbfbf);
}
input[type="button"]:hover{
transition: .5s;
background: linear-gradient(#bfbfbf, #d9d9d9);
}
input#clear{
background: #ff1a1a;
border: 1px solid #cc0000;
color: white;
}
input#equal{
width: 275px;
margin: 10px 0 10px 0;
font-size: 30px;
color: white;
background: #ff3d00;
border: 1px solid #b32a00;
}
That’s all, now you’ve successfully created a Working Calculator using HTML CSS & jQuery. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.
Cool
Hi, thank you for this I was just wondering. Can i display the “history” of the calculator in the console? Like if i press 3+4= 7 it is shown in the console?
Thank you
I love you coding Nepal
Keep loving <3
Thank you 🙂
THE BEST❤
You're welcome 🙂
Thank you 🙂
Thank you
Nice