JavaScript Calculator:- Hello readers, Today In this article we’ll show you how to create a Neumorphism Calculator Using HTML, CSS & JS. This type of JavaScript Calculator is used on the websites for the Calculator. One of the most beautiful and good-looking designs of a JavaScript Calculator.
You easily create this Neumorphism Calculator Using HTML, CSS & JS. then this article will definitely help you. For this, you need to have an idea about basic HTML, CSS and JavaScript then you can understand the following codes. It is designed in a completely modern way.
Some Information About This JavaScript Calculator
Here you can easily do small mathematical calculations like addition, subtraction, multiplication and division. Here I have used a total of eighteen buttons. There are eleven number buttons and 6 operator buttons. There are numbers from zero to 9 and there are operator buttons like plus, minus, equal, cancel etc.
You can watch the live demo to know how the calculator works. As you can see in the picture above there is a small display with some buttons here. In this case, I made all these buttons using HTML code. I have designed this calculator using CSS code and added the colors in it. JavaScript has implemented the buttons of this calculator.
Watch the video tutorial to create JavaScript Calculator
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these Neumorphism JavaScript Calculator step by step completely beautifully. So you can learn how to make these Neumorphism JavaScript Calculator Design. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Neumorphism JavaScript Calculator Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Loader Animation Using HTML and CSS
- Sidebar Menu Using HTML, CSS & JS
- Portfolio Website using HTML CSS & JS
JavaScript Calculator | Source Codes
You have to create an HTML, CSS & JS File For this JavaScript Calculator. After creating these files just paste the following codes into your file.
The First Step, 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. You’ve to download files from the given download button to use.
HTML CODE:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Javascript Calculator</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="calculator">
<input type="text" placeholder="0" name="displayResult" class="area"/>
<input type="button" name="" class="btn btn-ac" value="AC" onclick="displayResult.value=' '">
<input type="button" name="" value="+/-" onclick="makeNegative(displayResult.value)" class="btn btn-plusorminus">
<input type="button" name="" value="%" onclick="calcNumbers(this.value)" class="btn btn-percent">
<input type="button" name="" value="/" onclick="calcNumbers(this.value)" class="btn btn-divide">
<input type="button" name="" value="7" onclick="calcNumbers(this.value)" class="btn btn-7">
<input type="button" name="" value="8" onclick="calcNumbers(this.value)" class="btn btn-8" >
<input type="button" name="" value="9" onclick="calcNumbers(this.value)" class="btn btn-9" >
<input type="button" name="" value="*" onclick="calcNumbers(this.value)" class="btn btn-multiply">
<input type="button" name="" value="4" onclick="calcNumbers(this.value)" class="btn btn-4" >
<input type="button" name="" value="5" onclick="calcNumbers(this.value)" class="btn btn-5" >
<input type="button" name="" value="6" onclick="calcNumbers(this.value)" class="btn btn-6" >
<input type="button" name="" value="-" onclick="calcNumbers(this.value)" class="btn btn-minus">
<input type="button" name="" value="1" onclick="calcNumbers(this.value)" class="btn btn-1" >
<input type="button" name="" value="2" onclick="calcNumbers(this.value)" class="btn btn-2" >
<input type="button" name="" value="3" onclick="calcNumbers(this.value)" class="btn btn-3" >
<input type="button" name="" value="+" onclick="calcNumbers(this.value)" class="btn btn-plus">
<input type="button" name="" value="0" onclick="calcNumbers(this.value)" class="btn btn-zero" >
<input type="button" name="" value="." onclick="calcNumbers(this.value)" class="btn btn-dot" >
<input type="button" name="" value="=" onclick="(displayResult.value.includes('%'))?percentage(displayResult.value):displayResult.value=eval(displayResult.value);" class="btn btn-equal">
</form>
<!----JS CDN Link--->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!---Custom JS File Link----->
<script src="js.js"></script>
</body>
</html>
Second Step, you have to 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.
CSS CODE:
*,*::after,*::before{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color:#E0E5EC;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
.calculator{
width: 63vmin;
padding: 7vmin;
display: grid;
grid-template-columns: repeat(4, 10vmin);
grid-template-rows: repeat(6, 10vmin);
grid-gap: 3vmin;
font-size: 3vmin;
background-color:#E0E5EC;
box-shadow: 1.5vmin 1.5vmin 2.5vmin rgba(163,177,198,0.6), -1.5vmin -1.5vmin 2.5vmin rgba(255,255,255, 0.5);
border-radius: 5px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.area{
border: none;
background-color:#E0E5EC;
box-shadow: inset 0.5vmin 0.5vmin 16px rgba(163,177,198,0.6), inset -0.5vmin -0.5vmin 2.5vmin rgba(255,255,255, 0.5);
border-radius: 5px;
grid-column: 1 / 5;
font-size: 3vmin;
text-align: end;
padding: 3.5vmin;
color: #5a616d;
}
.btn{
font-size: 3vmin;
color: #5a616d;
border: none;
background-color:#E0E5EC;
box-shadow: 1.5vmin 1.5vmin 2.5vmin rgba(163,177,198,0.6), -1.5vmin -1.5vmin 2.5vmin rgba(255,255,255, 0.5);
border-radius: 5px;
transition: all .5s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.btn:hover{
box-shadow: inset 0.5vmin 0.5vmin 16px rgba(163,177,198,0.6), inset -0.5vmin -0.5vmin 2.5vmin rgba(255,255,255, 0.5);
}
.btn:focus{
box-shadow: inset 0.5vmin 0.5vmin 16px rgba(163,177,198,0.6), inset -0.5vmin -0.5vmin 2.5vmin rgba(255,255,255, 0.5);
outline: none;
}
.btn-ac{
background-color: #f50057;
color: #fff;
box-shadow: 0.5vmin 0.5vmin 16px rgba(245, 0, 86, 0.5), -0.5vmin -0.5vmin 16px rgba(255,255,255, 0.5);
}
.btn-zero{
grid-column: 1 / 3;
}the third step, you have to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.
JS Code:
function calcNumbers(result){
document.querySelector('.area').value += result;
}
function percentage(result){
var result1 = String(result);
if (result1.includes("%")){
var a, b , percent;
var splitWord = [];
splitWord = result1.split('%');
a = Number(splitWord[0]);
b = Number(splitWord[1]);
percent = (a/100) * b;
document.querySelector('.area').value = percent;
}
}
function makeNegative(result){
if(result.charAt(0)==='-') {
document.querySelector('.area').value = result.replace('-','');
}
else{
document.querySelector('.area').value = '-' + result;
}
}now you’ve successfully created these Neumorphism JavaScript Calculator HTML, CSS & JavaScript. If your code does not work or facing any error/problem to comment down or contact us through the contact page. otherwise, you can download all source code.
