html JavaScript Calculator V1 - jQuery | FreeCodeCamp

Posted 2021-05-10

$grey: #CCCCCC;
$pink: #FAC8BF;
$calculatorBase: #6A8D9D;
$btnBase: #466675;
$lightBlue: #94FFFC;
$red: #c13636;

html {
  background: linear-gradient(
    170deg,
    $pink,
    darken($pink, 10),
    darken($pink, 20)
  );
  font-family: 'Poppins', sans-serif;
  height: 100%;
}

.container {
  width: 50%;
  margin: 30px auto;
}
.calculator {
  width: 400px;
  height: 700px;
  background-color: $calculatorBase;
  border-radius: 10px;

  -webkit-box-shadow: 23px 23px 35px -3px rgba(51, 51, 51, 1);
  -moz-box-shadow: 23px 23px 35px -3px rgba(51, 51, 51, 1);
  box-shadow: 23px 23px 35px -3px rgba(51, 51, 51, 1);
}

#title {
  text-align: center;
  font-family: 'Grand Hotel', cursive;
  position: relative;
  font-size: 30px;
  top: 15px;
  color: #38525e;
  letter-spacing: 2px;
}

#title span {
  font-family: 'Gruppo', cursive;
  font-size: 20px;
  color: darken($btnBase, 10);
  padding-bottom: 5px;
  border-bottom: 1px dashed $btnBase;
}

#screen {
  max-width: 350px;
  height: 140px;
  background-color: $grey;
  margin: 25px;
  position: relative;
  top: 5px;
  border-radius: 5px;
  box-shadow: inset 0px 0px 25px 0px rgba(115, 115, 115, 1);
  overflow: hidden;
}

#output {
  max-width: 320px;
  max-height: 50px;
  color: #333;
  font-size: 58px;
  position: relative;
  top: 55px;
  margin: 0 5px;
}
#output span{
  padding: 0 15px;
  font-size: 25px;
  text-transform:uppercase;
}

.button-container {
  position: relative;
  top: -30px;
  margin: 50px 10px;
  width: 400px;
  height: 400px;
  cursor: pointer;
}

.btn {
  width: 70px;
  height: 70px;
  background-color: $btnBase;
  display: inline-block;
  margin: 5px 10px;
  border-radius: 5px;
  text-align: center;
  line-height: 70px;
  font-size: 30px;
  color: $grey;

  box-shadow: inset 0px -12px 7px -10px rgba(43, 62, 71, 1),
    1px 6px 7px -1px rgba(43, 62, 71, 1);
}
.btn:hover {
  background-color: darken($btnBase, 10);
  color: white;
}
.red-btn {
  background-color: $red;
  box-shadow: inset 0px -12px 7px -10px rgba(128, 35, 35, 1),
    1px 6px 7px -1px rgba(128, 35, 35, 1);
}
.red-btn:hover {
  background-color: darken($red, 10);
  color: white;
}
.equal {
  width: 165px;
  background-color: $lightBlue;
  color: #333;
  box-shadow: inset 0px -12px 7px -10px rgba(76, 138, 135, 1),
    1px 6px 7px -1px rgba(52, 71, 69, 1);
}

.equal:hover {
  background-color: darken($lightBlue, 10);
  color: white;
}
.btn:active, .red-btn:active, .equal:active {
  position: relative;
  top: 1px;
}

#endTag {
  position: relative;
  top: 10px;
  left: 100px;
}

#endTag a {
  color: $red;
}
#endTag a:hover {
  color: darken($red, 20);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

$(document).ready(function() {
  var output = "",
    operators = [".", "+", "-", "*", "/", "%"];

  function checkInput(input) {
    //console.log(output);
    //console.log(output.slice(-1), output.slice(-2), output.slice(-2, -1));

    for (var i = 0; i < operators.length; i++) {
      if (
        output.slice(-1) === operators[i] &&
        output.slice(-2, -1) === operators[i]
      ) {
        output = output.slice(0, -1);
        setTimeout(function() {
          //console.log(output);
          $("#output").html(output);
        }, 1000);
      } else {
        $("#output").html(output);
      } //ELSE
    } //for
  } //CHECK INPUT FUNCTION

  $(".btn").click(function() {
    //console.log($(this).attr('id'));
    var userInput = $(this).attr("value");
    if ($(this).attr("value") === "AC") {
        output = "";
        $("#output").html(output);
      } else if (output.length >= 9) {
      $("#output").html("<span>Too Many Characters</span>");
      if (userInput === "CE") {
        output = output.slice(0, -1);
        $("#output").html(output);
      }
    } else {
      if ($(this).attr("value") === "AC") {
        output = "";
        $("#output").html(output);
      } else if (userInput === "CE") {
        output = output.slice(0, -1);
        $("#output").html(output);
      } else if (userInput === "=") {
        $("#output").html(eval(output));
        
      } else {
        output += userInput;
        checkInput(userInput);
      } //ELSE
    } //ELSE
  }); // BTN CLICK FUNCTION
}); //DOCUMENT READY

JavaScript Calculator V1 - jQuery | FreeCodeCamp
------------------------------------------------
Built a JavaScript Calculator for freeCodeCamp advanced Front-End development projects using jQuery.

A [Pen](https://codepen.io/harunpehlivan/pen/MVweGe) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).

[License](https://codepen.io/harunpehlivan/pen/MVweGe/license).

<div class="container">
  <div class="calculator">
    <div id="title">FreeCodeCamp <br>
      <span>JavaScript  Calculator</span></div>
    <div id="screen">
      <span id="output"></span>
    </div>
    <div class="button-container">
      <div value="AC" class="btn red-btn">AC</div>
      <div value="CE" class="btn red-btn">CE</div>
      <div value="%" class="btn">%</div>
      <div value="/" class="btn">/</div>
      <div value="7" class="btn">7</div>
      <div value="8" class="btn">8</div>
      <div value="9" class="btn">9</div>
      <div value="*" class="btn">*</div>
      <div value="4" class="btn">4</div>
      <div value="5" class="btn">5</div>
      <div value="6" class="btn">6</div>
      <div value="-" class="btn">-</div>
      <div value="1" class="btn">1</div>
      <div value="2" class="btn">2</div>
      <div value="3" class="btn">3</div>
      <div value="0" class="btn">0</div>
      <div value="." class="btn">.</div>
      <div value="+" class="btn">+</div>
      <div value="=" class="btn equal">=</div>
    </div>
    <!-- /.button-container -->
  </div>
  <!-- /.calculator -->


  <p id="endTag"><a target="_blank" href="https://tr.gravatar.com/tebm">Coded by HARUN PEHLİVAN 2017</a></p>
</div>
<!-- /.container -->