Welcome to this tutorial on how to create a calculator with JavaScript! This project was a part of our 15 Days – 15 Projects Series. A calculator is a useful tool for performing basic mathematical operations, and building one with JavaScript is a great way to learn and practice your coding skills.
In this tutorial, we will walk through the process of building a calculator from scratch using HTML, CSS, and JavaScript. We will start by setting up the HTML structure and styling the calculator with CSS. Then, we will add the JavaScript functions that make the calculator work. By the end of this tutorial, you will have a fully functional calculator that you can use and customize to fit your needs. So let’s get started!
Preview (Calculator with JavaScript)
See the preview of the calculator with JavaScript app.
HTML Code
<div class="container">
<input type="text" id="useinp" placeholder="0" disabled />
<input type="text" id="compout" placeholder="0" disabled />
<table>
<tr>
<td onclick="calcad('(')">(</td>
<td onclick="calcad(')')">)</td>
<td onclick="removech()"><-</td>
<td onclick="calcad('+')" class="vari">+</td>
</tr>
<tr>
<td onclick="calcad('7')">7</td>
<td onclick="calcad('8')">8</td>
<td onclick="calcad('9')">9</td>
<td onclick="calcad('-')" class="vari">-</td>
</tr>
<tr>
<td onclick="calcad('4')">4</td>
<td onclick="calcad('5')">5</td>
<td onclick="calcad('6')">6</td>
<td onclick="calcad('*')" class="vari">*</td>
</tr>
<tr>
<td onclick="calcad('1')">1</td>
<td onclick="calcad('2')">2</td>
<td onclick="calcad('3')">3</td>
<td onclick="calcad('/')" class="vari">/</td>
</tr>
<tr>
<td onclick="reset()"><b>C</b></td>
<td onclick="calcad('0')">0</td>
<td onclick="calcad('.')">.</td>
<td class="equalbtn" onclick="execm()">=</td>
</tr>
</table>
</div>As you can see in the provided HTML code, we have set up a div element with the class container to hold our calculator. Inside this div, we have an input element with the id attribute set to useinp which will be used to display the numbers and operators that the user inputs. We also have an input element with the id attribute set to compout which will be used to display the result of the calculation.
Inside the div, we have also added a table element which contains the buttons for the calculator. Each button is a td element with an onclick attribute that calls a function when clicked. The functions are defined in the provided JavaScript code.
CSS
*{
padding:0;
margin:0;
box-sizing:border-box;
}
body{
background:rgb(255, 226, 218);
color:rgb(42, 42, 42);
font-family:Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
width: 400px;
background: #fff;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
input{
padding:16px 10px;
width:100%;
border:0;
font-size:2em;
background-color:#333;
color:#eee;
text-align:right;
}
table{
border-collapse:collapse;
width: 100%;
}
td{
font-size:2em;
padding:0.7em;
text-align: center;
cursor:default;
transition:0.2s;
}
td:hover{
background-color:rgb(199, 199, 199);
}
.vari{
background-color:rgb(70, 70, 70);
color: #eee;
}
.vari:hover{
background-color:#222;
}
.equalbtn {
background: rgb(255, 160, 51);
}We will also style the input and button elements by giving them a width and height, as well as a font size and color.
JavaScript
var tbcal = "";
const useinp = document.getElementById('useinp');
const compinp = document.getElementById('compout');
function calcad(value) {
tbcal += value;
useinp.value = tbcal;
}
function removech() {
tbcal = tbcal.substring(0, tbcal.length - 1);
useinp.value = tbcal;
}
function execm() {
if (tbcal.length == 0 || tbcal == "") {
alert("Needs a input");
return;
}
try {
ans = eval(tbcal);
compinp.value = ans;
}
catch (err) {
alert("Invalid Input");
}
}
function reset() {
useinp.value = "";
compinp.value = "";
tbcal = "";
}The calcad function is called when a button is clicked and it adds the value of the button to a global variable called tbcal. The useinp input element is then updated to display the value of tbcal.
The removech function is called when the backspace button is clicked and it removes the last character from tbcal. The useinp input element is then updated to display the updated value of tbcal.
The execm function is called when the equal button is clicked. It checks to make sure that there is a value in tbcal, and if there is, it uses the eval function to evaluate the expression and stores the result in a variable called ans. The compout input element is then updated to display the value of ans.
The reset function is called when the clear button is clicked and it resets the values of the useinp and compout input elements to an empty string, as well as the value of tbcal to an empty string.
And that’s it! You now have a fully functional calculator with JavaScript. With a little bit of customization, you can make it look and function exactly how you want it to.
I hope this tutorial has been helpful in showing you how to create a calculator with JavaScript. Here is the link to live preview of the project.
Read other JavaScript blog articles. Here is the Github link to the calculator with javascript project.
Happy coding!
