<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>freeCodeCamp Calculator</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Place favicon.ico in the root directory -->
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>  
</head>

<body>
  <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

  <!-- Add your site or application content here -->
  <div id="calcBody">
    <p>freeCodeCamp <br> Calculator</p>
    <div class="screen">
      <div class="innerDiv"></div>
    </div>
    <div class="buttons">
      <button class="button down" value="AC">AC</button>
      <button class="button down" value="CE">CE</button>
      <button class="button down" value="%">%</button>
      <button class="button down" value="/">÷</button>
      <button class="button down" value="7">7</button>
      <button class="button down" value="8">8</button>
      <button class="button down" value="9">9</button>
      <button class="button down" value="*">×</button>
      <button class="button down" value="4">4</button>
      <button class="button down" value="5">5</button>
      <button class="button down" value="6">6</button>
      <button class="button down" value="-">-</button>
      <button class="button down" value="1">1</button>
      <button class="button down" value="2">2</button>
      <button class="button down" value="3">3</button>
      <button class="button down" value="+">+</button>
      <button class="button down" value=".">.</button>
      <button class="button down" value="0">0</button>
      <button class="button down" value="Ans">Ans</button>
      <button class="button down" value="=">=</button>
    </div>
  </div>

</body>

</html>
* {
  box-sizing: border-box;
}

body {
  display: flex;
  font-family: 'Source Code Pro', Arial, serif;
  font-weight: 600;
  background-color: #00BCD4;
  justify-content: center;
  overflow-x: hidden;
}

#calcBody {
  color: white;
  display: flex;
  flex-direction: column;

  width: 350px;
  background: #4DD0E1;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 5px 2px rgba(0, 96, 100, 0.2);
  -moz-box-shadow: 0px 0px 5px 2px rgba(0, 96, 100, 0.2);
  box-shadow: 0px 0px 5px 2px rgba(0, 96, 100, 0.2);
  text-align: center;

}

#calcBody p {
  display: block;
  width:130px;
  text-align: left;
  margin: 20px 30px 0px;
}

.screen {
  border-radius: 3px;
  display: block;
  height: 50px;
  width: 293px;
  margin: 10px;
  align-self: center;
  background-color: #B2EBF2;
  text-align: right;
  overflow:hidden;
  white-space: nowrap;
  padding: 5px 10px;
  font-size: 2em;
  color: rgba(0, 0, 0, 0.66);
  -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 96, 100, 0.2);
  -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 96, 100, 0.2);
  box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, 0.23);
  overflow: hidden;
}

.innerDiv {
  float:right;
}

/*Buttons */

.buttons {
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  margin: 0px 0px 40px;
  justify-content: center;
  font-size: 1.4em;
}

.button {
  width: 70px;
  height: 50px;
  background: #E0F7FA;
  border-radius: 3px;
  outline:none;
  border: 1px solid #ccc;
  margin: 2px 2px;
  color: rgba(0, 0, 0, 0.79);
  -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 96, 100, 0.2);
  -moz-box-shadow: 0px 0px 1px 1px rgba(0, 96, 100, 0.2);
  box-shadow: 0px 0px 1px 1px rgba(0, 96, 100, 0.2);
  transition: box-shadow 0.3s;
}

.button[value="="] {
  background-color: #FFEA00;
}

.button:hover {
  cursor: pointer;
  border: 1px solid #aaa;
}

.button:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}



@media screen and (max-width: 362px) {
  #calcBody,
  .buttons {
    width: calc(100vw - 20px);
  }

  .screen {
    width: calc(100vw - 30px);
  }

  .button {
    width: calc(100vw / 5);
  }

}

(function() {
  "use strict";
  var buttons = document.getElementsByClassName("button"),
    innerDiv = document.getElementsByClassName("innerDiv")[0],
    equation = "",
    answer = 0,
    toDecimalPoints = 8,
    clickHistory = [],
    key,
    keychar,
    butVal,
    innerHTMLVal,
    i,
    j;

  function clear() {
    innerDiv.innerHTML = "";
    equation = "";
  }

  function newCalc() {
    if (clickHistory[clickHistory.length - 2] === "=" || clickHistory[clickHistory.length - 2] === "13") {
      clear();
    }
    innerDiv.innerHTML += innerHTMLVal;
    equation += butVal;
  }

  function backspace() {
    innerDiv.innerHTML = innerDiv.innerHTML.substr(0, innerDiv.innerHTML.length - 1);
    equation = equation.substr(0, equation.length - 1);
  }

  function equals() {
    //The reason the percentage is converted after "=" is presed is because the "CE" button would not delete the same thing in equation as in innerDiv.innerHTML if I were to convert the number upon pressing the "%" button among other things
    //Regexp to find all percentages. Even those as decimals.
    equation = equation.replace(/[0-9]+([,.][0-9]+)?%/g, percToDec);

    //Pass evaluated equation to variables, answer and equation
    answer = eval(equation);
    equation = eval(equation);
    //Set the decimal point accuracy with toFixed. The plus symbol removes unnecessary 0's.
    equation = +equation.toFixed(toDecimalPoints);
    answer = +answer.toFixed(toDecimalPoints);
    innerDiv.innerHTML = answer;
  }

  function percToDec(match) {
    //Remove % from string
    match = match.substring(0, match.length - 1);
    //Convert to number
    match = Number(match);
    //Divide by 100 to turn percentage in to decimal
    match = match / 100;
    //Convert back to string so that eval() can evaluate it later.
    match = match.toString();
    return match;
  }

  function buttonActions(event) {
    //TO DO - CHECK TO SEE IF keyCode IS VALID AND IF NOT DO return; IN THE FUNCTION. ALSO MAKE SURE NOT BEING PUSHED TO LAST BUTTON ARRAY console.log(event.keyCode);
    key = event.keyCode || event.which;
    keychar = String.fromCharCode(key);

    butVal = (this.value === undefined) ? keychar : this.value;
    console.log("butVal = " + butVal);

    innerHTMLVal = (this.innerHTML === undefined) ? keychar : this.innerHTML;
    console.log("innerHTMLVal = " + innerHTMLVal);



    if ( butVal == keychar && /[^(0-9)\+\-\*\/%\.]/gi.test(keychar) ) {
      //alert(keychar);
      return;
    }

    //Push the buttons' values clicked to an array so that it can be checked if the number on the screen is the answer or not through seeing if the  "=" symbol has been clicked last.
    clickHistory.push(butVal);

    switch (butVal) {

      case "AC":
        clear();
        break;

      case "CE":
        backspace();
        break;

      case "=":
        equals();
        break;

      case "Ans":
        innerDiv.innerHTML += answer;
        equation += answer;
        break;

      case "%":
      case "/":
      case "-":
      case "+":
      case "*":
        innerDiv.innerHTML += innerHTMLVal;
        equation += butVal;
        break;

      default:
        //If the last button pushed was an = symbol
        newCalc();

        //testing purposes
        console.log(clickHistory);

    }

    console.log("Screen = " + innerDiv.innerHTML);
    console.log("equation = " + equation);
    console.log("Answer = " + answer);
  }

  for (i = 0; i < buttons.length; i++) {

    buttons[i].addEventListener("click", buttonActions.bind(buttons[i]));

  }

  document.addEventListener("keydown", function(event) {

    var KeyID = event.keyCode;
    console.log('****KeyID = ' +  KeyID);
    switch (KeyID) {
      case 8:
        event.preventDefault();
        backspace();
        console.log("backspace");
        break;
      case 46:
        clear();
        console.log("delete");
        break;
      case 13:
        clickHistory.push(KeyID.toString());
        equals();
      default:
        break;
    }
  });

  document.addEventListener("keypress", buttonActions);

}());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.