Can one create a calculator using HTML, CSS and Javascript only? Yes, you can and here we have a sample code you can use. You are free to modify the styles to your taste.
It is said “practice makes perfect’! If you are learning HTML, CSS and Javascript, then only by practising via the creation of simple projects will you get a good mastery of these different coding languages.
Our project sample here is creating a basic calculator using just HTML, CSS and Javascript. This calculator will be able to;
- perform basic arithmetic operations like addition, subtraction, division, and multiplication.
- perform decimal operations.
- display Infinity if you try to divide any number by zero.
- It will not display any result in case of an invalid expression. For example, 5++9 will not display anything.
- Clear screen feature to clear the display screen anytime you want.
Components of the Calculator
The calculator consists of the following components:
- Mathematical Operators: Addition (+), Subtraction (-), Multiplication (*), and Division (/).
- Digits and Decimal Button: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,…
- Display Screen: It displays the mathematical expression and the result.
- Clear Screen Button: It clears all mathematical values.
- Calculate button (=): It evaluates the mathematical expression and returns the result.
Our project structure
As we are to use HTML, JS and CSS for this project, one can decide to create only a single HTML file with the CSS code placed in the head section of the document and the javascript placed just before the closing body tag.
Another approach will be creating three separate files in our project root directory;
- The calculator HTML files
- A CSS file
- and a Javascript file
In this example, we will go with the second approach.
Steps to follow
To create a calculator using HTML, CSS, and JavaScript, you can follow these steps:
- Create a new HTML file and add a basic layout for the calculator using HTML and CSS. You can use buttons to represent the numbers and operations.
- Add JavaScript code to handle user input and perform the necessary calculations. You can use event listeners to detect when the user clicks on a button and update the display accordingly.
- Implement the logic for the calculator operations such as addition, subtraction, multiplication, and division. You can use JavaScript functions to perform the calculations.
Here’s the project sample code to get you started. You can use a simple editor like Notepad++ for this.
The CSS code to place in your style.css file:
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
.calculator {
padding: 10px;
border-radius: 1em;
height: 380px;
width: 400px;
margin: auto;
background-color: #191b28;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.display-box {
font-family: 'Orbitron', sans-serif;
background-color: #dcdbe1;
border: solid black 0.5px;
color: black;
border-radius: 5px;
width: 100%;
height: 65%;
}
#btn {
background-color: #fb0066;
}
input[type=button] {
font-family: 'Orbitron', sans-serif;
background-color: #64278f;
color: white;
border: solid black 0.5px;
width: 100%;
border-radius: 5px;
height: 70%;
outline: none;
}
input:active[type=button] {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}
The Javascript Code: Now create another file say “script.js” and paste the following code in it then save;
// This function clear all the values
function clearScreen() {
document.getElementById("result").value = "";
}
// This function display values
function display(value) {
document.getElementById("result").value += value;
}
// This function evaluates the expression and returns result
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
HTML: Create a file named say “calculator.html” paste the following code inside and save.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Simple Calculator using HTML, CSS and JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table class="calculator" >
<tr>
<td colspan="3"> <input class="display-box" type="text" id="result" disabled /> </td>
<!-- clearScreen() function clears all the values -->
<td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
</tr>
<tr>
<!-- display() function displays the value of clicked button -->
<td> <input type="button" value="1" onclick="display('1')" /> </td>
<td> <input type="button" value="2" onclick="display('2')" /> </td>
<td> <input type="button" value="3" onclick="display('3')" /> </td>
<td> <input type="button" value="/" onclick="display('/')" /> </td>
</tr>
<tr>
<td> <input type="button" value="4" onclick="display('4')" /> </td>
<td> <input type="button" value="5" onclick="display('5')" /> </td>
<td> <input type="button" value="6" onclick="display('6')" /> </td>
<td> <input type="button" value="-" onclick="display('-')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7" onclick="display('7')" /> </td>
<td> <input type="button" value="8" onclick="display('8')" /> </td>
<td> <input type="button" value="9" onclick="display('9')" /> </td>
<td> <input type="button" value="+" onclick="display('+')" /> </td>
</tr>
<tr>
<td> <input type="button" value="." onclick="display('.')" /> </td>
<td> <input type="button" value="0" onclick="display('0')" /> </td>
<!-- calculate() function evaluates the mathematical expression -->
<td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
<td> <input type="button" value="*" onclick="display('*')" /> </td>
</tr>
</table>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Once you’ve done as described above, you should have something like this;
![$.post(url [, data ] [, success ] [, dataType ])](https://myviptuto.com/wp-content/uploads/2023/03/myviptuto_thumb_4581-390x220.jpg)
Recommended for you:
