Photo (c) Andrew Branch

Free Code Camp: Build a JavaScript Calculator Part Two

Hi! I’m back. Let’s continue what we’ve started.

  } else if (value === ".") {
    if (result.indexOf(".") > 0) {
      result = result;
      solution = solution;
    } else {
      solution += ".";
      result += ".";
    }
    isHistoryEmpty= false;

If the value pressed is a period or a dot ( . ), then we’re going to make another validation.

  1. If the result is already a period, then nothing changes.
  2. Else, then we’re going to concatenate it with the solution and with the result.
  3. Then, we’re going to set the variable, isHistoryEmpty to false. (In case, the user first pressed a period, it’s going to be concatenated with 0. And it’s needed that we should set this variable to false.)
  } else if (value === "=") {
    var ans = eval(solution.replace("x", "*"));

    // if (ans%1 === 0) {
      result = Math.round(ans * 100) / 100;
    // } else {
      // result = ans.toFixed(6);
    // }

    solution += "=" + result;

If the value pressed is an equals operator, then we’re going to the following statements.

  1. In the solution, the multiplication operator is the “X”. But in programming, we can multiply numbers using the asterisk, “*”. That’s why we have to replace the “X” with asterisk.
  2. We’re going to use the method Math.round() to round it to the nearest two decimals.
  3. If you uncomment the comments there, if the result is not a whole number, you will get the result with up to six decimals.
  4. Then, we’re going to concatenate the result with the solution.

  } else if ($(this).hasClass("operator")) {
    if (isNaN(result) && isHistoryEmpty) {
      result = result;
      solution = solution;
    } else if (!isHistoryEmpty) {
      if (value === "*") {
	value = "x"
      }
      solution += value;
      result = value;
    }  else {
      solution = 0 + "";
      result = 0 + "";
    }

If the value is a mathematical operator, then we’re going to do more validations.

  1. If the first value pressed is a mathematical operator, nothing will change.
  2. If the variable isHistoryEmpty is set to false, then we’re going to flip its value.
    1. If the value is an asterisk, we’re going to change it to ‘x’.
    2. We’re going to concatenate the value pressed to the solution.
  3. Else, solution and result will be both 0.

 } else {

    if (isHistoryEmpty && solution == 0 && value == 0) {
      result = 0 + "";
      solution = 0 + "";
    } else if (Number(value) && solution === "0") {
      solution = value;
      result = value;
      isHistoryEmpty = false;

    } else if (Number(value) && Number(result)) {
      result += value;
      solution += value;
    } else {
      solution += value;
      result = value;
      isHistoryEmpty = false;
    }
  }

Else, this means that it’s a number.

  1. If the first value pressed is a 0, then everything is a zero.
  2. If the first value pressed is a number, then we’re going to set the variables, solution and result, equal to to the value.
  3. So if the last value pressed and the following value pressed are both numbers, then they must be concatenated in the result and solution.
  4. Else, we’re going to concatenate the value pressed to the solution. Set the result equal to the value. Set the variable, isHistoryEmpty, to false.
  $(".result").text(result);
  $(".history").text(solution);
});

Then, using jQuery selectors, we’re going to display them on the screen of the calculator.

 

You can check my whole code here.

And that’s it. That’s how we build a JavaScript calculator.

I’m still looking for bugs. And I guess there are unnecessary statements in my code I noticed while I’m writing this blog post.

I hope that you understand it.

Still, I recommend customizing and experimenting it to achieve your desired result.

Good luck!

 

Love,
Eirin

 

Advertisements

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