Straightforward, determined code is the best approach while programming. Look at how to construct your own number cruncher in HTML, CSS, and JS.
The most ideal way to learn JavaScript is to fabricate projects. If you have any desire to turn into a decent web engineer, you really want to begin making projects straightaway. You can begin by building fledgling undertakings like a basic number cruncher, computerized clock, or stopwatch.
You can make a straightforward mini-computer utilizing simply center web innovations: HTML, CSS, and JavaScript. This number cruncher can perform essential numerical activities like expansion, deduction, augmentation, and division.
Elements of the Calculator
- In this undertaking, you will foster a number cruncher that will have the accompanying highlights:
- It will perform fundamental number-crunching tasks like expansion, deduction, division, and duplication.
- It will perform decimal tasks.
- The mini-computer will show Infinity assuming that you attempt to isolate any number by nothing.
- It won't show any outcome in the event of invalid articulation. For instance, 5++9 won't show anything.
- Clear screen element to clear the showcase screen whenever you need.
The Main Components of Calculator
Numerical Operators: Addition (+), Subtraction (- ), Multiplication (*), and Division (/).
Digits and Decimal Button: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, . .
Show Screen: It shows the numerical articulation and the outcome.
Clear Screen Button: It clears generally numerical qualities.
Work out button (=): It assesses the numerical articulation and returns the outcome.
Build a Simple Calculator Using HTML, CSS, and JavaScript
To make this Project , you need to create 3 files: 1. HTML document, 2. CSS and 3. JavaScript file. Subsequent to making these documents, simply glue the accompanying codes into your record.
1. HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="" content="">
<title>Calculator</title>
<!--CSS-->
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
<div class="container">
<div class="Calculator">
<input type="text" placeholder="0" id="output" />
<button onclick="clr()">AC</button>
<button onclick="dlt()">DEL</button>
<button onclick="display('%')">%</button>
<button onclick="display('/')">/</button>
<button onclick="display('7')">7</button>
<button onclick="display('8')">8</button>
<button onclick="display('9')">9</button>
<button onclick="display('*')">*</button>
<button onclick="display('4')">4</button>
<button onclick="display('5')">5</button>
<button onclick="display('6')">6</button>
<button onclick="display('+')">+</button>
<button onclick="display('1')">1</button>
<button onclick="display('2')">2</button>
<button onclick="display('3')">3</button>
<button onclick="display('-')">-</button>
<button onclick="display('.')">.</button>
<button onclick="display('0')">0</button>
<button onclick="calculate()" class="value">=</button>
</div>
</div>
</body>
<!--javascript-->
<script src="main.js" type="text/javascript" charset="utf-8"></script>
</html>
2. CSS
* {
margin: 0;
padding: 0;
box-sizing: `border-box;
background-color: #fbe9e9;
font-family: Sans-Serif;
outline: none;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.Calculator {
background-color: #eeccff00;
padding: 15px;
border-radius: 30px;
box-shadow: inset 5px 5px 14px #ffffff,
5px 5px 12px rgba(0,0,0,.16);
display: grid;
grid-template-columns: repeat(4,68px);
}
input {
grid-column: span 4;
height: 70px;
width: 250px;
background-color: #eeccff00;
box-shadow: inset -5px -5px 12px #ffffff,
inset 5px 5px 12px rgba(0,0,0,.16);
border: none;
border-radius: 30px;
font-size: 50px;
color: rgb(0,0,0);
text-align: end;
margin: auto;
margin-top: 40px;
margin-bottom: 30px;
padding: 10px;
}
button {
height: 48px;
width: 48px;
background-color: #eeccff00;
box-shadow: -5px -5px 12px #ffffff,
5px 5px 12px rgba(0,0,0,.16);
border: none;
border-radius: 50%;
margin: 8px;
font-size: 16px;
}
.value {
width: 115px;
border-radius: 40px;
}
3. JavaScript
Third, create a JavaScript file named main.js and paste the given symbols into your JavaScript file. Remember that you must create a file with a .js extension.
let output = document.getElementById("output");
function display(num) {
output.value += num;
}
function calculate() {
try {
output.value = eval(output.value);
}
catch(err) {
alert("Invalid")
}
}
function clr() {
output.value = "";
}
function dlt() {
output.value = output.value.slice(0, -1);
}
If your code does not work or you encounter any error/problem, please download the source code files from the given download button. It is free and the .zip file will be downloaded and then you have to extract it. If you face any problem while downloading or after downloading the source code files, feel free to comment or contact us through the contact page.