WHAT IS A CALCULATOR?
In this article, we will learn how to create a Calculator using HTML, CSS, and JavaScript. I’m sure you’ve heard of a calculator in your math class but if not, no worries, A calculator is used to make simple math equations easy and fast, its an application that can make calculations within a blink of an eye. It has buttons from 0-9 and additional buttons like the “+”, “-“, “/”, “*”, “=”, and the “.” symbols. These buttons are used to create the equation, then you can press the button: “=”, and boom that answer is on the screen.
If you still have trouble understanding, no problem this link should help.
CONTENTS
SOURCE CODE: Here you will see all the code to build the JavaScript Calculator, with no explanation.
HOW IT LOOKS: Here you will see how the JavaScript Calculator looks and functions.
EXPLANATION: Here you will get the explanation on how the JavaScript Calculator works.
TO WRAP IT UP: Here you will get the conclusion of the article.
SOURCE CODE
1. OPEN YOUR CODE EDITOR
If you want to try the code right away, we’ll help you out with that, but if you don’t understand or want to see the explanation below on how to build the Calculator in JavaScript/HTML/CSS, click on the blue link to skip through the source code, it will explain how the JavaScript Calculator works and functions.
You can use any code editor, but I will be using Visual Studio Code here, and I’d recommend you to use that too. But if you don’t use Visual Studio Code, then no worries, you don’t have to.
2. CREATE / OPEN A FOLDER
Our files will be in this folder, files: calculator.html, styles.css, scripts.js
3. ADD FILES
Ok sweet, now that we created the files: calculator.html for for the application page, styles.css for the styling sheet, and scripts.js for the functionality, we can move on to the source code
4. THE CODE
If you want the following code, you can copy (ctrl-c), go to the editor and paste (ctrl-v) the code into the calculator.html file and save the file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Buttons -->
<input type="text" id="equation" class="textBox" oninput="numbersOnly(this)"><br>
<button onclick="addToEquation(this)" class="number" value="1">1</button>
<button onclick="addToEquation(this)" class="number" value="2">2</button>
<button onclick="addToEquation(this)" class="number" value="3">3</button>
<button onclick="addToEquation(this)" class="symbol" value="/">/</button><br>
<button onclick="addToEquation(this)" class="number" value="4">4</button>
<button onclick="addToEquation(this)" class="number" value="5">5</button>
<button onclick="addToEquation(this)" class="number" value="6">6</button>
<button onclick="addToEquation(this)" class="symbol" value="*">*</button><br>
<button onclick="addToEquation(this)" class="number" value="7">7</button>
<button onclick="addToEquation(this)" class="number" value="8">8</button>
<button onclick="addToEquation(this)" class="number" value="9">9</button>
<button onclick="addToEquation(this)" class="symbol" value="-">-</button><br>
<button onclick="addToEquation(this)" class="symbol" value=".">.</button>
<button onclick="addToEquation(this)" class="number" value="0">0</button>
<button onclick="addToEquation(this)" class="symbol" value="+">+</button>
<button onclick="enterEquation()" class="symbol">=</button><br>
<button onclick="clearEquation()" class="clear">CLEAR ALL</button>
<!-- Script(s) -->
<script src="scripts.js"></script>
</body>
</html>Now open styles.css and can do the same thing you did with calculator.html, if you want the following code.
* {
align-items: center;
text-align: center;
font-weight: bold;
}
body {
background-color: lightblue;
}
.number,.symbol {
width: 41px;
height: 2em;
}
.clear {
width: 175px;
height: 2em;
}
.textBox {
height: 2em;
font-size: 14px;
}Okay, once you’re done with that, lets move on to the scripts.js.
function numbersOnly(input){
let regex = /[^0-9.*//+-]/gi;
input.value = input.value.replace(regex, "");
}
function addToEquation(input){
let value = input.value;
let equation = document.getElementById("equation").value;
document.getElementById("equation").value = equation + value;
}
function enterEquation(){
let value = document.getElementById("equation").value;
document.getElementById("equation").value = eval(value);
}
function clearEquation(){
document.getElementById("equation").value = "";
}5. RUN THE APPLICATION
Now that we have finished the code, lets check if the code works by running the application. The next part is not necessary if, even you don’t have Visual Studio Code, but this makes web developing so much easier, so if you are using Visual Studio Code, you can click on the extensions button on the middle right side, and search, live server, then click on the first result and click on the install button.
Ok, then you can open calculator.html and right click anywhere on the code, then find the open with live server, and click on it. But if you don’t have Visual Studio Code or you do and just don’t want to install live server, you can just copy the file path, for example: C:\Javascript_Projects\Calaculator\calculator.html, and paste it into your browser, in this case I am going to use Chrome.
Now lets see how the finished JavaScript Calculator looks.
You can go and test out the application now.
HOW IT LOOKS
You can add numbers with the “+” symbol:
Or you could subtract numbers with the “-” symbol:
Dividing numbers is also an possible with the “/” symbol:
Or you could multiply numbers with the “*” symbol:
You could also combine all the operators shown above:
And you can also use decimal numbers with the “.” symbol:
If the text box is full you can always CLEAR ALL:
EXPLANATION
CALCULATOR.HTML
Steps To Create The HTML Part Of The JavaScript Calculator:
- First, we will create a basic HTML page, using the HTML boilerplate
- Then we will make the textbox so that the user can see the equation
- After that we will add the 0-9 buttons as well as the “+”, “-“, “/”, “*”, “=”, and the “.” symbols
- Then we will add the CLEAR ALL button so that the user can clear the textbox when needed
- Lastly, we will link the CSS and the JavaScript to the HTML
HEAD
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="scripts.js"></script>
</body>
</html>Line 4: The title of the application, in this case is Calculator.
5: The link tag is used to link the stylesheet (CSS) to the webpage (HTML). In this case I am linking my CSS file: styles.css, to my HTML file: calculator.html, the rel attribute is used to tell what type of file will be linked, in this case it is a stylesheet and the href attribute is used to actually link the file to the HTML page.
11: The script tag is used for JavaScript, you could write your JavaScript directly in the script tag, or you could link it using the src attribute to an outside JavaScript file, in this case, we are going to link our HTML file: calculator.html, to an outside JavaScript file: scripts.js.
BUTTONS
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body> -->
<input type="text" id="equation" class="textBox"><br>
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="/">/</button><br>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="*">*</button><br>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="-">-</button><br>
<button value=".">.</button>
<button value="0">0</button>
<button value="+">+</button>
<button>=</button><br>
<button >CLEAR ALL</button>
<!--
<script src="calculator.js"></script>
</body>
</html> -->Line 9: Is the textbox that will display the equation
10-12: Are the buttons, “1”, “2”, “3”, and “/”. The “/” means division. Then there is a break line: <br>, which goes to the next line.
14-16: Are the buttons, “4”, “5”, “6” and “*”. The “*” means multiplication. Then there is a break line: <br>, which goes to the next line.
18-21: Are the buttons, “7”, “8”, “9” and “-“. The “-” means subtraction. Then there is a break line: <br> , which goes to the next line.
22-25: Are the buttons, “.”, “0”, “+” and “=”. The “.” means decimal, the “+” means addition, and the “=” mean equal to. Then there is a break line: <br> , which goes to the next line.
26: Is the “CLEAR ALL” button, which is used to clear the text/input box.
If you notice closely I used the <button> tag instead of <input type="button">, it really does not matter what you choose.
STYLES.CSS
* {
align-items: center;
text-align: center;
font-weight: bold;
}
body {
background-color: lightblue;
}
.number,.symbol {
width: 41px;
height: 2em;
}
.clear {
width: 175px;
height: 2em;
}
.textBox {
height: 2em;
font-size: 14px;
}
Lines 1-5: Here we are aligning item to center, aligning the text to center and making the text bold for everything (*).
7-9: Over here we set the body’s background color to light blue.
11-14: We set the number button’s and the symbol button’s width to 41px and the height to 2em.
16-19: Here we will set the width of the CLEAR ALL button to 175px and the height will be set to 2em;
21-24: The text/input box’s height will be set to 2em and the font-size to 14px.
ADDING CLASSES TO CALCULATOR.HTML
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body> -->
<input type="text" id="equation" class="textBox"><br>
<button class="number" value="1">1</button>
<button class="number" value="2">2</button>
<button class="number" value="3">3</button>
<button class="symbol" value="/">/</button><br>
<button class="number" value="4">4</button>
<button class="number" value="5">5</button>
<button class="number" value="6">6</button>
<button class="symbol" value="*">*</button><br>
<button class="number" value="7">7</button>
<button class="number" value="8">8</button>
<button class="number" value="9">9</button>
<button class="symbol" value="-">-</button><br>
<button class="symbol" value=".">.</button>
<button class="number" value="0">0</button>
<button class="symbol" value="+">+</button>
<button class="symbol" value="=">=</button><br>
<button class="clear">CLEAR ALL</button>
<!-- <script src="calculator.js"></script>
</body>
</html> -->We added class attributes so that the CSS works in the styles.css
Line 10: Here we added the textbox class for the text/input box so that the styling earlier we did will be applied to the text/input box.
11, 12, 13, 15, 16, 17, 19, 20, 21, 24: The number class for the numbers: “0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, this will add the styling we did in the styles.css will be applied to the numbers.
14, 18, 22, 23, 25, 26: Lets connect the symbol class for symbols: “/”, “*”, “-“, “.”, “+”, “=”, this can connect the styling we did in the styles.css will be applied to the symbols.
27: Now here we added the clear class for the “CLEAR ALL” button, and styles.css will be applied to the symbols.
SCRIPTS.JS
function numbersOnly(input){
let regex = /[^0-9.*//+-]/gi;
input.value = input.value.replace(regex, "");
}
function addToEquation(input){
let value = input.value;
let equation = document.getElementById("equation").value;
document.getElementById("equation").value = equation + value;
}
function enterEquation(){
let value = document.getElementById("equation").value;
document.getElementById("equation").value = eval(value);
}
function clearEquation(){
document.getElementById("equation").value = "";
}Lines 1-4: This function: numbersOnly, filters any input from the text/input box and deletes anything that isn’t “0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “/”, “*”, “-“, “+”, “.”, and “=”, this way the user can not accidently type a character that will not mess up the calculation like alphabets. We do this by using something called regex or regular expressions, then we just replace anything that does not match the regex with nothing.
6-10: This function: addToEquation, gets the value of the button that is pressed and adds said value to the text/input box, so that the user can see they are typing. This is done by getting the object of the element and getting the value of the object and storing it into a variable value, then we get the current equation by getting the value from the text/input box, we can do this by using the getElementById function and using the id of the text/input box: equation. Finally we can add the value to the equation and then update the text/input box to the new equation.
12-15: This function: enterEquation, is activated when the “=” button is pressed, it will then get the value of the text/input box using the getElementById, and then use the eval function, which is a pre-defined function that executes the equation which is stored in a variable: value, and updates the equation with the answer.
17-19: This function: clearEquation, clears the equation by getting the equation using the getElementById, and then set it to nothing.
ADDING FUNCTIONALITY TO CALCULATOR.HTML
Ok, so now we just have to connect the JavaScript functions to the calculator.html.
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body> -->
<input type="text" id="equation" class="textBox" oninput="numbersOnly(this)"><br>
<button onclick="addToEquation(this)" class="number" value="1">1</button>
<button onclick="addToEquation(this)" class="number" value="2">2</button>
<button onclick="addToEquation(this)" class="number" value="3">3</button>
<button onclick="addToEquation(this)" class="symbol" value="/">/</button><br>
<button onclick="addToEquation(this)" class="number" value="4">4</button>
<button onclick="addToEquation(this)" class="number" value="5">5</button>
<button onclick="addToEquation(this)" class="number" value="6">6</button>
<button onclick="addToEquation(this)" class="symbol" value="*">*</button><br>
<button onclick="addToEquation(this)" class="number" value="7">7</button>
<button onclick="addToEquation(this)" class="number" value="8">8</button>
<button onclick="addToEquation(this)" class="number" value="9">9</button>
<button onclick="addToEquation(this)" class="symbol" value="-">-</button><br>
<button onclick="addToEquation(this)" class="symbol" value=".">.</button>
<button onclick="addToEquation(this)" class="number" value="0">0</button>
<button onclick="addToEquation(this)" class="symbol" value="+">+</button>
<button onclick="enterEquation()" class="symbol" value="=">=</button><br>
<button onclick="clearEquation()" class="clear">CLEAR ALL</button>
<!-- <script src="calculator.js"></script>
</body>
</html> -->Line 10: Here we add the numbersOnly() function to the text/input box on input because it should only allow numbers and certain symbols, we can also send the this object as a argument so that the function can get the input of the character pressed.
11-25: The addToEquation() function to the numbers and symbols so that when the button is clicked the function will add to the text/input box, we also send the this object as a argument so that the function can get the input of the button pressed.
26: Here we add the enterEquation() function to the “=” button so that when the button is pressed it will execute the equation and replace the text/input box with its answer.
27: Here we add the clearEquation() function to the “CLEAR ALL” button so that when the button is pressed it will clear the equation and replace the text/input box with nothing.
TO WRAP IT UP
If you followed the blog, we have seen how to build a calculator using HTML, CSS, and most importantly JavaScript. We really hope you enjoyed building the JavaScript Calculator. And thank you so much for reading the through the article, please feel free to check out the rest of the website as you will definitely find some interesting stuff, if you want to go check out our JavaScript Archives, feel free as it will help us out a ton, also check out how to build Hangman using JavaScript as that might interest you. Please leave any questions or doubts in the comment section, as any feedback out be lovely.