Dear friends in this article we will tell you How to design neumorphism calculator using jquery ?. So i hope you like our article because here you can get the source code free and this code you can use in your projects. Guys if you learn more interesting articles then go to the search bar and type article name then you can find easily more interested articles.
Table of Contents
Requirement for Calculator
Friends, now we will know what will have to be done to make the calculator. First of all we have to select a code editor using which we can make such neumorphism calculator using jquery. So let’s download vs code first, after that we will install vs code then we will open vs code and create a new file which will remain in html after that we will write html basic syntax then we will paste jquery cdn link inside head section after that save it.
HTML
Now we will come to body tag and take a div and take a class of it then by name of calculator We will take the form then heading for a title. Now we will take input tag for make this neumorphism calculator using jquery in which we will print the value after that take a row and give 4 buttons inside it then put the value in all those buttons after that copy this row and paste 4 times and set their encoding value in all the buttons Will give something like this.
<div class="calculator">
<form name="forms">
<h4>Nuemorphism Calculator</h4>
<input type="text" class="display" id="display" disabled>
<div class="row">
<input type="button" id="seven" value="7">
<input type="button" id="eight" value="8">
<input type="button" id="nine" value="9">
<input type="button" class="btn" id="add" value="+">
</div>
<div class="row">
<input type="button" id="four" value="4">
<input type="button" id="five" value="5">
<input type="button" id="six" value="6">
<input type="button" class="btn" id="subs" value="-">
</div>
<div class="row">
<input type="button" id="one" value="1">
<input type="button" id="two" value="2">
<input type="button" id="three" value="3">
<input type="button" class="btn" id="mult" value="*">
</div>
<div class="row">
<input type="button" class="btn" id="clear" value="C">
<input type="button" id="zero" value="0">
<input type="button" class="btn" id="equal" value="=">
<input type="button" class="btn" id="divide" value="/">
</div>
</form>
</div>How to make authentication system using php?
How to create CRUD operation using php?
How to make typing tool using php?
CSS
Friends, we have designed this neumorphism calculator using jquery with the help of css, if you also want to make neumorphism in this way of your calculator then copy the below given css code and paste it in your style file so that save design will be set.
.calculator{
padding: 20px 15px;
background-color: rgb(204,204,204);
box-shadow: 2px 3px 10px rgb(0 0 0 / 30%), -2px -3px 5px rgb(255,255,255);
}
.calculator h4{
font-family: 'Pacifico',sans-serif;
margin-bottom: 20px;
text-align: center;
color: #000;
font-size: 19px;
font-weight: bold;
letter-spacing: 1px;
}
.calculator .display{
width: 233px;
height: 50px;
margin-bottom: 20px;
outline: none;
border: none;
color: #000;
font-weight: bold;
background-color: rgb(204,204,204);
box-shadow: inset 2px 3px 10px rgb(0 0 0 / 31%), inset -2px -3px 10px rgb(255,255,255);
text-align: right;
padding-right: 10px;
font-size: 25px;
}
.row{
margin-top: 5px;
}
.row input{
width: 45px;
height: 45px;
margin: 5px;
outline: none;
border: none;
background-color: rgb(204,204,204);
box-shadow: 2px 3px 10px rgb(0 0 0 / 30%), -2px -3px 5px rgb(255,255,255);
border-radius: 10%;
font-size: 18px;
cursor: pointer;
}
input.btn{
background-color: #000;
color: #fff;
}Jquery
$(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 += '-';
});
$('#mult').click(function(){
document.forms.display.value += '*';
});
$('#divide').click(function(){
document.forms.display.value += '/';
});
$('#equal').click(function(){
if(display.value === ""){
alert("Please enter any numbers to calculat!");
}else{
document.forms.display.value = eval(document.forms.display.value);
}
});
$('#clear').click(function(){
document.forms.display.value = "";
})
})
