Introduction of the Project
Through this JavaScript project, we will be covering the steps on how to create a calculator using JavaScript. Whether you’re new to coding or just looking to build a fun project, this guide will take you through the process of building a simple and functional calculator. By the end of this tutorial, you will have a basic understanding of JavaScript, including variables, functions, and event handling, and the ability to build your own calculator from scratch.
To make the project, we will be using an inbuilt function ‘eval’ that takes a set of characters or equations as an argument and returns the final output of that equation.
Objectives
The objectives for creating a calculator using JavaScript are as follows:
- To understand the basic concepts of JavaScript, including variables, functions, and event handling.
- To learn how to create an interactive user interface using HTML and CSS.
- To use JavaScript to perform mathematical operations and display results on the screen.
- To handle user input and perform operations in response to button clicks.
- To apply error handling techniques to prevent unexpected behavior.
- To build a functioning calculator from scratch and extract data from buttons pressed by the user and then calculate the result and display it on the screen.
Requirements
- A text editor to write and edit HTML, CSS, and JavaScript code.
- A web browser to test and run the calculator.
- Basic knowledge of HTML and CSS.
- A basic understanding of JavaScript concepts such as variables, functions, and event handling.
- Familiarity with arithmetic operations such as addition, subtraction, multiplication, and division.
- A basic understanding of error handling techniques in JavaScript.
The three main languages we use to build this JavaScript calculator are HTML, CSS, and JavaScript. JavaScript is the programming language to apply the logic, and we have used HTML to structure the site and CSS to design and layout of our webpage.
Source Code
HTML Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calculator</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="bootstrap.css"> </head> <body> <h1 class="text-center">Calculator</h1> <div class="calculator"> <input type="text" name="screen" id="screen"> <table> <tr> <td id="left-bracket"><button>(</button></td> <td id="right-bracket"><button>)</button></td> <td id="C"><button>C</button></td> <td id="mod"><button>%</button></td> </tr> <tr> <td id="seven"><button>7</button></td> <td id="eight"><button>8</button></td> <td id="nine"><button>9</button></td> <td id="X"><button>X</button></td> </tr> <tr> <td id="four"><button>4</button></td> <td id="five"><button>5</button></td> <td id="six"><button>6</button></td> <td id="subtract"><button>-</button></td> </tr> <tr> <td id="one"><button>1</button></td> <td id="two"><button>2</button></td> <td id="three"><button>3</button></td> <td id="add"><button>+</button></td> </tr> <tr> <td id="zero"><button>0</button></td> <td id="dot"><button>.</button></td> <td id="divide"><button>/</button></td> <td id="equal"><button>=</button></td> </tr> </table> </div> <script src="main.js"></script> </body> </html>
CSS Code
.calculator {
background-color: #ff99f7;
margin: auto;
height: 390px;
width: 260px;
border: 4px solid #13695d;;
border-radius: 25px;;
}
.calculator > input {
background-color: rgba(53, 41, 43, 0.877);
color: #fff;
font-size: 30px;
border: 2px solid black;
border-radius: 10px;
height: 45px;;
width: 220px;
outline: none;
margin:15px 16px 0;
}
table {
margin: auto;
margin-top: 17px !important;
}
tr > td > button {
border-radius: 10px;
font-size: 25px;
margin: 3px;
}
button {
background-color: #978fa0;
height: 50px;
width: 50px;
border-radius: 20px;
}JAVASCRIPT Code
var buttons = document.querySelectorAll("button");
var screen = document.querySelector("#screen");
var screenValue = "";
for (item of buttons) {
item.addEventListener("click", (e) => {
console.log(e)
buttonText = e.target.innerText;
if (buttonText == "X") {
buttonText = "*";
screenValue += buttonText;
screen.value = screenValue;
}
else if(buttonText == "C"){
screenValue = "";
screen.value = screenValue;
}
else if(buttonText == "="){
try{
if(screenValue == ""){
screen.value = ""
}
else{
screen.value = eval(screenValue);
}
}
catch{
screen.value = "ERROR";
}
}
else {
screenValue += buttonText;
screen.value = screenValue;
}
});
}Explanation of the Code
The code can be broken down into three sections. The HTML & CSS involves creating the GUI and styling it. The other is building a function that joins the value of buttons in an equation and passes it to an inbuilt function ‘eval’ that calculates the result and then finally extracts it and attaches it to the is equal to (=) button.
1. It consists of multiple <tr> tags to make a table consisting of buttons for the calculator.
2. The CSS file is meant for styling the HTML where the container is provided with appropriate margin, padding, font color, and font size.
Moving to the calculation process, we have applied the following:
1. It uses a method to retrieve the value of the button pressed and store it in a variable.
2. Then the variable is sent to an inbuilt function known as ‘eval’ that calculates the value of the equation and returns the result of it.
3. Finally, attach the functionality to print the result to the ‘=’ button and clear the string to the ‘C’ button.
4. It uses exception handling to handle an invalid string and print ‘ERROR’ on the screen.
Output
Main Interface
Key Points To Remember
We have successfully created a calculator using JavaScript. It extracts data from buttons pressed by the user and then calculate the result and display it on the screen using a function that is attached to the ‘=’ button. It is a very easy and faster way to access a calculator.
- Plan out the design and layout of the calculator before writing any code.
- Keep the code organized and readable by using meaningful variable names and comments.
- Test the calculator thoroughly to ensure all buttons and functions work as expected.
- Use error handling techniques to prevent unexpected behavior and crashes.
- Pay attention to the order of operations when performing calculations.
- Remember to include the necessary HTML, CSS, and JavaScript files in your project.
- Regularly save your work and take breaks to avoid burnout.
- Seek help from online resources and other programmers if you get stuck or need clarification.
- Have fun and be creative! The calculator is a simple project that can be customized and expanded in many different ways.
Cisco Ramon is an American software engineer who has experience in several popular and commercially successful programming languages and development tools. He has been writing content since last 5 years. He is a Senior Manager at Rude Labs Pvt. Ltd.
0 Comments