The best way to learn JavaScript is to create projects. If you want to become a good web developer, you need to start creating projects as soon as possible. You can start by creating beginner-friendly projects like a simple calculator, digital clock, or stopwatch.
You can make a simple calculator using just core web technologies: HTML, CSS, and JavaScript. This calculator can perform basic mathematical operations like addition, subtraction, multiplication, and division.
- A grid of numbers (0-9 and 00).
- Some basic arithmetical operators (+, -, /, x, %).
- And some symbols for special operations such as (clear, backspace, equal)
Features of the Calculator
In this project, you are going to develop a calculator that will have the following features:
- It will perform basic arithmetic operations like addition, subtraction, division, and multiplication.
- It will perform decimal operations.
- The calculator will 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.
Folder Structure of the Calculator Project
Create a root folder that contains the HTML, CSS, and JavaScript files. You can name the files anything you want. Here, the name of the root folder is Calculator. According to the standard naming convention, the HTML, CSS, and JavaScript files are named index.html, styles.css, and script respectively.
// CalculatorProject/
|__ index.html
|__ style.css
Adding Structure to the Calculator Using HTML
This is the HTML file for our calculator below. Here, we are using the HTML script to create the content of the calculator UI. We are including the buttons of a calculator, input fields, etc.
In the HTML code, we are also using an onclick event it means that whenever the user clicks on any of the buttons then the corresponding operation is performed at the backend of the calculator.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How To Make A Calculator Using HTML CSS And JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="calculator">
<form>
<div class="display">
<input type="text" name="display" >
</div>
<div>
<input type="button" value="AC" onclick="display.value = '' " class="operator">
<input type="button" value="%" onclick="display.value += '%' " class="operator">
<input type="button" value="DEL" onclick="display.value = display.value.toString().slice(0,-1) " class="operator">
<input type="button" value="/" onclick="display.value += '/' " class="operator">
</div>
<div>
<input type="button" value="7" onclick="display.value += '7' ">
<input type="button" value="8" onclick="display.value += '8' ">
<input type="button" value="9" onclick="display.value += '9' ">
<input type="button" value="*" onclick="display.value += '*' " class="operator">
</div>
<div>
<input type="button" value="4" onclick="display.value += '4' ">
<input type="button" value="5" onclick="display.value += '5' ">
<input type="button" value="6" onclick="display.value += '6' ">
<input type="button" value="-" onclick="display.value += '-' " class="operator">
</div>
<div>
<input type="button" value="1" onclick="display.value += '1' ">
<input type="button" value="2" onclick="display.value += '2' ">
<input type="button" value="3" onclick="display.value += '3' ">
<input type="button" value="+" onclick="display.value += '+' " class="operator">
</div>
<div>
<input type="button" value="00" onclick="display.value +='00'">
<input type="button" value="0" onclick="display.value +='0'">
<input type="button" value="." onclick="display.value += '.' " class="operator">
<input type="button" value="=" onclick="display.value = eval(display.value)" class="equal-btn">
</div>
</div>
</form>
</div>
</body>
</html>Create CSS file for Styling
We are using CSS for managing the content of HTML like the content color, width, height, font size, padding, margin, etc.
style.css
*{
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
box-sizing: border-box;
}
body{
background-color: aliceblue;
}
.container{
width: 100%;
height: 100vh;
background-color: aliceblue;
display: flex;
align-items: center;
justify-content: center;
}
.calculator{
background-color: #3a4452;
padding: 20px;
border-radius: 10px;
}
.calculator form input{
border: 0;
outline: 0;
width: 60px;
height: 60px;
border-radius: 10px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
background-color: rgba(225, 225, 225, 0.1);
font-size: 22px;
cursor: pointer;
margin: 10px 12px;
color: #fff;
}
form .display{
display: flex;
justify-content: flex-end;
margin: 20px 0;
}
form .display input{
text-align: right;
flex: 1;
font-size: 45px;
box-shadow: none;
background-color: #3a4452;
}
form input.equal-btn{
background-color: #697b96;
}
form input.operator{
background-color: #737373;
}You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions or problems about this tutorial, please comment on the form below.😊
