Simple Calculator Using JavaScript
Hello ! Everyone…
Welcome to my blog. In this blog I would like to explain how to create a simple and smart calculator.
Calculation functionalities are achieved using JavaScript.
Hey! If you do not have a calculator, No need to worry about that. Come and join with me. Let’s create a calculator.
Special thing is the logic which we use here is very simple. This calculator will perform basic math operation. Such as addition, subtraction, multiplication and division.
Basically it consist of two parts.
—keyboard : for inputting values.
— display : for displaying user input values and solution.
Now, you can see a image(figure1) of the calculator below.
Well, I think, now you get an idea of that calculator.
If you can not get an idea of above image, Do not worry about that. Now You can see named images (figure2) of this calculator.
HTML , CSS and JavaScript technologies were used to create this.
Now look at image(figure3) given below and think about differences among those images logically.
So, I hope that you can get an basic idea about definition of HTML, CSS and JavaScript.
In here, you can refer the format of HTML document which I used.
In this document, <button> tag is used to define clickable buttons and class attribute is used to specify number, operator and empty classes.
Specially, class attribute is used by JavaScript to access and manipulate elements with the specific class name and it can be also used to point a class name in style sheet/ CSS document.
Now, CSS technology can be used to style a structure of a calculator create from HTML. As well as, CSS can be converted into an attractive calculator.
In here, you can refer the format of style sheet which I used.
All calculations are performed by the calculator are done using JavaScript technology.
In short hand, this calculator does not become a real calculator without using JavaScript.
Now, let us move your attention to the JavaScript document part by part that is so much valuable.
First of all, we need to manipulate the history and output sections.
getHistory () function is used to return the history value and it value can be get using ID and using inner text. And printHistory() is used to print history values. Same logic has used to print to output values.
Inside the printOutput() function, there is a if else conditional statement. If the value is empty, output is also set to empty by using if statement. Other wise, it is converted to the comma separated values by calling getFormattedNumber() function. That’s why it gives better readability to user.
Now, let us go to next part of the JavaScript document.
Inside the getFormattedNumber() function, there is a if statement as if(num==”-”). If number has a minus sign , then return to the empty value because minus sign is identified as an operator by the calculator. To avoid this error we use to this if statement.
Then, we have used Number method. Number method can be converted string type number into the integer type number. In next step, that number converted to an string value using toLocaleString() function. Then, this string type number is return to as a output value.
Using reverseNumberFormat() function remove the all dummy text from the calculation.
Now, let us go to next part of the JavaScript document.
Operator class can be used to get the operation. In here, for loop is used to access operators one by one in the list of the operators.
What would be happened when user clicks the clear button?
In this calculator clear button(AC) would remove both history and output. Therefore, both history and output values print as empty values.
Otherwise when user clicks backspace(DEL), only last character would be removed.
Output value is converted to the number format(without commas) using this line. As backspace should not deal with the commas. And also this number that returns by reverseNumberFormat() function again converts into a string using toString() function.
Then using substr() method, last character can be removed.
The operators in the calculator does not work if output is empty. So, output should be checked whether it is empty or not empty.
When the user clicks the equal sign(=), history is evaluated. Then Result is printed in the output section and the history section should be set as empty.
For other operators such as addition, subtraction, multiplication and division signs, the operator is get add to the history and the output is set as empty.
Now, let us go to last part of the JavaScript document.
This part is used to concatenate the numbers that user clicks. If output is an only number, concatenating will be happened and otherwise it won’t be happened.
This if statement is used to check whether output is a number or not. When output is a number concatenate the user clicked value to the output value.
Hey! Readers that’s all…
We had created our calculator. Now you can use it..
I hope you enjoyed this blog. If you have any doubts. Then please comment them below.
Thankyou for visiting my blog…
