Photo (c) Andrew Branch

Free Code Camp: Build a JavaScript Calculator Part One

This is the first advanced front end development project in free code camp.

So I’m going to focus more on the functions that happened to make every calculation in this app right.

Let’s start!

Markup

This is my markup.

<div>
<div class="container">
<div class="screen">
<div>

0</div>
<div>

0</div>
</div>
<div class="buttons">
<div>

      <button value="0" class="ac">AC</button>
      <button value ="0" class="ce">CE</button>
      <button value = "/" class="operator">&divide</button>
      <button value = "*" class="operator">x</button>

      <button value = "7">7</button>
      <button value = "8">8</button>
      <button value = "9">9</button>
      <button value = "-" class="operator">-</button>

      <button value = "4">4</button>
      <button value = "5">5</button>
      <button value = "6">6</button>
      <button value = "+" class="operator">+</button>

      <button value = "1">1</button>
      <button value = "2">2</button>
      <button value = "3">3</button>
      <button class = "invi">N</button>  

      <button value = "0" class="zero">0</button>
      <button value = "." class="dot">.</button>
      <button value = "=" class="equals operator">=</button></div>
</div>
by <a href="http://eiringonzales.com/" target="_blank">eiringonzales</a></div>
</div>

Each button has an attribute of value because that’s what I’m going to use if we’re going to perform the equation.

If you can notice, I have a button which will be invisible. It’s going to be invisible because I’m going to cover it with another larger button. I just need it there so my markup won’t collapse.

The p element with a class of history will show the equation that you encoded. And the p element with a class of result will show the result. These elements are very important because we’re going to use it in our functions.

Styles

These are the styles that I came up with. It was inspired by the colors of Casio.


.developer {
  display: block;
  text-align: center;
  padding-top: 25px;
  color: #fff;
}

.developer a,
.developer a:visited {
  color: #fff;
  text-decoration: none;
}

.developer a:hover {
  color: #ddd;
}

body, button {
  font-family: 'Unica One',sans-serif;
}

body {
  background-color: grey;
}

p {
  margin: 0;
}

.container {
  width: 245px;
  height: 330px;
  background-color: #bcc2d3;
  padding: 25px;
  border-radius: 5px;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  box-shadow: 0px 3px 5px 1px #67696d;
}

.screen {
  width: 100%;
  height: 69px;
  background-color: #e2e1c9;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
}

.result {
  text-align: right;
  font-size: 25px;
}

.buttons {
  position: relative;
}

.buttons div {
  margin-top: 20px;
  padding-top: 20px 20px 20px 10px;
}

button {
  background-color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 5px 5px 20px 20px;
  height: 40px;
  width: 50px;
  font-size: 23px;
  margin-bottom: 10px;
  margin-right: 10px;
  box-shadow: 0px 3px 1px 0px #67696d;
}

button:active {
  box-shadow: none;
}

button:nth-child(4n) {
  margin-right: 0;
}

button:last-of-type {
  margin-right: 0;
}

.ac, .ce {
  background-color: orange;
}

.zero {
  width: 115px;
}

.equals {
  position: absolute;
  height: 90px;
  bottom: 0;
  right: 0;
  width: 53px;
  background-color: #2a4082;
  color: #fff;
}

.operator {
    font-size: 25px;
}

.invi {
  display: none;
}

And I suggest really giving your buttons a specific width and height. It’ll be the same for all your buttons even if the one’s text is longer than the other.

Script

First, I initialized variables.


var result = "";

var solution = "";

var isHistoryEmpty = true;

We are going to concatenate all the numbers and operators we press in the variable solution until we hit the button, equals. Solution will be written in the upper left part.

And each button press we make, it’ll be displayed in the variable result in the lower right part.

So the next code will be a big lump of code. So you better divide them into modules so it’ll be organized.

I’m going to show the code piece by piece. But they’re all going to be continuous.


$("button").click(function() {
   var value = $(this).val();

When you click a button, a new variable named value will get the value of this button. In our markup, each button has its own value. That’s what we’re going to get and store.

The following codes will be full of if statements.


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

Assuming that the user has performed a calculation.

Example:

Solution: 1 + 2 = 3

Result: 3

  1. If the value entered is not a number which means it is an operator, we’re going to reset the variable solution.
  2. Then, we’re going to keep chaining the mathematical operations.
  } else if (solution.indexOf("=") > 0 && Number(value)) {
    solution = "";
    result = "";
  }
  1. If the solution has an equals operator (=) meaning the user has a previous calculation and the value entered is a number, then we’re going to reset everything.
  2. Then, start the new equation with that number.
  if ($(this).text() === "AC") {
    result = 0 + "";
    solution = 0 + "";
    isHistoryEmpty = true;

In this part, I used the method text() to get the string in that element. I think you can still use the value attribute.

  1. If the string is AC, we’re going to reset the result, solution and set the variable isHistoryEmpty to true.

  } else if ($(this).text() === "CE") {
    if (solution === result || solution.indexOf("=") > 0 || solution.length === 1) {
      solution = 0 + "";
      isHistoryEmpty = true;
    } else {
      var solutions = solution.substring(0, solution.length - result.length);
      solution = solutions;
    }
    result = 0 + "";

  1. If the value of the button press is CE, then we’re going to do the statements following it.
    1. If the solution is the same as the result or the length of the solution is equal to one or if the solution has an equals operator meaning that there is a calculation performed, we’re going to reset everything.
    2. Else, meaning that the user has mistakenly pressed a button, we’re going to use the substring method. (Read more on substring method.) Whatever the value of the result or the value of the last button press, we’re going to remove it from the solution.
    3. Lastly, we’re going to make the result, 0.

There are a lot of more if statements coming up!

So stay tuned to the part two of this post.

Love,
Eirin

Advertisements

4 thoughts on “Free Code Camp: Build a JavaScript Calculator Part One

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