JavaScript Calculator Part 2 - Learn Web Development with Android

Welcome to the part2 of our calculator walkthrough, you probably must have gone through the markup and stylesheet as we had it in the part1, where we built a complete and all good looking Graphical User Interface (GUI) of an 8 digit calculator with no working functionalities, before proceeding down here. If you haven't, you may need to. Link.....

Without any further do, let's get started already.

<script type="text/javascript">
</script>

First we need our keys button displayed onto the screen.

There are many ways we can do this and of course I'm going to be showing you another, in the part3 of this walkthrough where we will be creating the second variation of the calculator as we discussed earlier.

What we will be doing here is to create a function that inserts the button clicked (only number and operator buttons) onto the screen. The insert function is going to have a parameter which we will specify in our markup.

function insert(num){
document.screenform.screen.value+=num;
}

So here, we use the document.forms property (i.e document.form-name.screen-name.value) to target the screen value and we set this value to the parameter "num" which we will specify in a moment in our markup. The addition assignment operator (+=) we're using here adds a value to a variable. So every time a number or operator button is clicked, it is being added to the screen's value.

<button id="btn8" onclick="insert('/')">÷</button>
<button id="btn9" onclick="insert(7)">7</button>
<button id="btn10" onclick="insert(8)">8</button>
<button id="btn11" onclick="insert(9)">9</button>
<button id="btn12" onclick="insert('*')" >×</button>
<button id="btn13" onclick="insert(6)" >6</button>
<button id="btn14" onclick="insert(5)" >5</button>
<button id="btn15" onclick="insert(4)" >4</button>
<button id="btn16" onclick="insert('-')" >-</button>
<button id="btn17" onclick="insert(3)" >3</button>
<button id="btn18" onclick="insert(2)" >2</button>
<button id="btn19" onclick="insert(1)" >1</button>
<button id="btn20" onclick="insert('+')">+</button>
<button id="btn21" onclick="insert(0)">0</button>
<button id="btn22" onclick="insert('.')">.</button>
<button id="btn23" onclick="calc()">=</button>  

Notice how we are only interested in the number and operator buttons, we use the onclick attribute to call the function insert(num) and add the relevant number or operator it should insert as a parameter, with the exception of the divide button and the multiply button.

JavaScript does not understand the operator (÷) to mean division or (x) to mean multiplication and so also does many other programming language. It rather uses the forward slash (/) to perform its division and asterisk (*) to perform its multiplication. So we replace them instead, since our evaluation is going to be based on what is found on the screen.

Also notice that we place insert operators inside a quote could be single or a double quote, the reason being that JavaScript regards these operators as strings and of course strings are to be enclosed in quotes.

You can use the console.log to check for data-types.

console.log(typeof'+') //Returns string.

At this point you should have all your number and operator keys printed on to the screen. So what next?

We need to have our results printed onto the screen once we hit the equal button. So let's setout how to do that. JavaScript has an eval() function that evaluates whatever is inside of it, of course apart from jargons. So we will create a function that gets the screen's value (i.e document.screenform.screen.value), evaluate it and returns it back to the screen. Easy now, let's take it one at a time.

So we create a function, call it just anything, maybe calculate().

function calculate(){
}

We then assign the variable displayedNum to document.screenform.screen.value. This variable will hold the document.screenform.screen.value's values (i.e everything displayed on the screen). We can also use the if conditionals to check if displayedNum exist, if it does we go ahead to evaluate the displayedNum and return it back to the screen. If it doesn't, we urge the user to perform a calculation using the alert function.

if (displayedNum){
document.screenform.screen.value
=eval(document.screenform.screen.value);
}else{
alert
("please perform a valid calculation")
}
}

That was simple enough right ? We can now go back to the equal button in the markup and call out the calculate() function using the onclick attribute.

<btn23 id="btn3"onclick="calculate()">
=</button>

This takes care of our calculation and returns our result when requested upon by clicking the equal button. So at this point, your calculator is working just fine before we compile all the codes do me a favour.

• write a function for the clear button
• write functions for the M+, M- and MRC
• write function for the percentage (%) and square(²)

Try something out, where you have difficulties, we will to help you, do your best to leave a comment and you won't regret you tried it out. Lemme help you with no1, so you can have an idea.

function clear(){
document.screenform.screen.value = " ";
}

<button id="btn1" onclick="clear">C</button>

The rest is left for you, don't fail me, I want you to comment with how you went about it, this way you'll understand more than you have. Hope to meet you in the part3, where we build the second variation.