Hello viewsers, now in this blog you’ll learn how to build a Calculator HTML this is certainly utilizing CSS jQuery. Previously I have shared a Working Analog Clock using HTML CSS & Javascript, today it is time to develop a Working Calculator jQuery that is using.
 |
| Working Awesome Calculator using HTML CSS & jQuery |
This can be a Calculator as you care able to see when you look at the picture. You will discover a calculator system the same as this for a very website that is familiar CodePen, but that program will be very difficult. Then surely problematic for you to comprehend if you're a novice or viewing for quick rule.
When you look at the image, there are many buttons and figures. Whenever you visit that key this is certainly specific the amount of that button may be shown from the screen. If you’re feeling difficult to know very well what i will be saying. You can watch a video that is strong the program (performing Calculator).
Video Tutorial of Working Awesome Calculator using Javascript
Coming Soon...
You will be hoped by me have actually recognized the styles, principles, and codes. This video clip is believed by me personally will help beginners to understand CSS in depth. If you want to get the source signal of this system (performing Calculator). It is possible to obtain it from the link which can be given just below.
You are able to build this calculator according to demands following a modifications being few. Also, it is possible to renovate this system to just take this Calculator into the degree that is next.
Working Awesome Calculator HTML this is certainly making use of CSS jQuery [Source Codes]
To create this program (performing Calculator). First, you need to develop two Files one HTML File and a different one is CSS File. After generating these data just paste the rules which can be following your file.
First, create an HTML file with all the true name of index.html and paste the given rules in your HTML file. Remember, you’ve to make a file with .html expansion.
<!DOCTYPE html>
<!-- Created By CodingWang -->
<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 aided by the true title of style.css and paste the given codes in your CSS file. Remember, you’ve to produce 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(#d90000,#d90000);
}
.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: #d90000;
border: 1px solid #d90000;
color: white;
}
input#equal{
width: 275px;
margin: 10px 0 10px 0;
font-size: 30px;
color: white;
background: #d90000;
border: 1px solid #d90000;
}That’s all, so now you’ve effectively created a Working Calculator HTML that is using CSS jQuery. Then kindly comment down or e mail us through the contact web page should your code doesn't work or you’ve faced any error/problem.
Post a Comment