Free Code Camp Zipline Project: JavaScript Calculator

Posted by

The JavaScript Calculator is the 1st advanced front end project on the Free Code Camp Front End certification track.  The objective of this project is to make a calculator with the ability to add,subtract,multiply,and divide two numbers. Also, the user should have the ability to chain mathematical operations until they are ready to hit the equal key to obtain the results.

The calculator was built to do the required basic mathematical operations. However, during testing , other issues became apparent. For example, the user could not be allowed to enter multiple decimals in one number such as 3.1.4.   Also, I couldn’t just blindly append numbers to the number shown on the calculator display.  I would have to handle two different scenarios when the user pressed a button.   Typically, I would just need to append a number to the display in response to a number button press.  However, if the display showed the answer to an equation, I would need to clear that answer and then display just the number that was pressed.   This problem was solved by using two flags to keep track of the program state.

Let me define the term “flag” for those of you who haven’t heard this term before. A flag is a variable you define to have one value until some condition happens, at which point the value of the flag is changed.  The flag can later be checked in order to decide what code to execute.  For example, one of my flags the “var decimalAdded=false; remains false until either the user presses the “CE” or the “.” button at which the program checks to see if a decimal is found in the inputValue.  If a decimal is found,  var decimalAdded equals true  no additional decimals can be added.   However, if a decimal is not found; var decimal Added stays false.

 

Below, you’ll find the JavaScript code of the project. I’ve also included comments in the code to explain the flow of the different components.

<strong>>//define the global variables that will be used throughout the code</strong>
var buttons = document.getElementsByTagName("a");
var operators = ["+", "-", "x", "÷", "%"];
<strong>//flag set to false until the decimal button is pressed</strong>
var decimalAdded = false;
//<strong>flag set to false until the equal button has been pressed
and the equation has been evaluated</strong>
var resultDisplayed = false;
<strong>// Add onclick event to all the buttons and allows them to perform operations</strong>
for (var i = 0; i < buttons.length; i++) {
 buttons[i].onclick = function (calculate) {
<strong> // Get the input and button values</strong>
 var input = document.getElementById("total");
 var inputValue = input.innerHTML;
 var buttonVal = this.innerHTML;
<strong>// if the clear button is pressed, everything is erased</strong>
 if (buttonVal == 'C') {
 inputValue = " ";
 input.innerHTML = inputValue;
 decimalAdded = false;
 }
 <strong>// if the clear last entry button is pressed, the last character is erased</strong>
 else if (buttonVal == 'CE') {
 inputValue = inputValue.substring(0, inputValue.length - 1);
 input.innerHTML = inputValue;
<strong>/*check to see if any decimals in the inputValue, </strong>
<strong>so that no new decimals can be added after the inital decimal is added</strong>
<strong> when the CE button is pressed*/</strong>
	if (inputValue.indexOf(".") !== -1) {
	   decimalAdded = true;
	}
	else {
	   decimalAdded = false;
	}
    }

<strong>// if the equal button is pressed, calculate the equation and display the result</strong>
	else if (buttonVal == '=') {
	   var equation = inputValue;
	   var lastChar = equation[equation.length - 1];
<strong>// checks the last character of the equation.</strong>
           if (operators.indexOf(lastChar) > -1 || lastChar == '.')
<strong>//if it's an operator or a decimal, remove it</strong>
           equation = equation.replace(/.$/, '');
<strong>// the equation is executed and the resultDisplayed is set to true </strong>
	   if (equation) {
	       input.innerHTML = eval(equation);
	       resultDisplayed = true;
	   }
	   decimalAdded = false;

       }
       else if (operators.indexOf(buttonVal) > -1) {
<strong>// gets the last character from the equation</strong>
       var lastChar = inputValue[inputValue.length - 1];
<strong>/*adds the operator only if input is not empty and
there is no operator</strong>
<strong> at the last characer*/</strong>
       if (inputValue != '' && operators.indexOf(lastChar) == -1)
	   input.innerHTML += buttonVal;

<strong>// allows minus sign if the string is empty</strong>
       else if (inputValue == '' && buttonVal == '-')
		input.innerHTML += buttonVal;

<strong>// replaces the last operator (if it exists) with a new operator</strong>
   if (operators.indexOf(lastChar) > -1 && inputValue.length > 1) {
<strong>/*'.' matches any character, while $ equals the end of string, </strong>
<strong>any operator at the end of string will get replaced
by a new operator*/</strong>
      input.innerHTML = inputValue.replace(/.$/, buttonVal);
   }

decimalAdded = false;
}
<strong>/*prevents more decimals to be added to the inputValue.  </strong>
<strong>  decimalAdd is set from false to true when the user presses
the . button </strong>
<strong>for the first time*/</strong>
		else if (buttonVal === '.') {
		   if (!decimalAdded) {
		       input.innerHTML += buttonVal;
		       decimalAdded = true;
		   }
		}

<strong>/*prevents the addition of numbers to the answer after the equal sign </strong>
<strong> has been set.
resultDisplayed is reset back to false as well as decimalAdded*/</strong>
		else {
		    if (resultDisplayed === true) {
			input.innerHTML = " ";
			decimalAdded = false;
			resultDisplayed = false;

		    }
<strong>/*if any button other than a number button is pressed,
it is appended to the </strong>
<strong>  input.innerHTML*/</strong>
		   input.innerHTML += buttonVal;
		}

<strong>// prevents page jumps</strong>
		calculate.preventDefault();
	}
}

I liked working on this challenge because it allowed me to sharpen my creative and coding skills a step more. You can see the finished product here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s