GJrdoq

GJrdoq.markdown

GJrdoq ('-' * 6)

Forked from Captain Anonymous's Pen zGojjx.

Forked from Captain Anonymous's Pen zGojjx.

A Pen by Tiffany White on CodePen.

License.

index.html

<div class="container">
    <div class="row">
      <div id="screen"><span id="ops-queue"></span></div>
        <div class="key">1</div>
        <div class="key">2</div>
        <div class="key">3</div>
    </div>
    <div class="row">
        <div class="key">4</div>
        <div class="key">5</div>
        <div class="key">6</div>
    </div>
    
    <div class="row">
        <div class="key">7</div>
        <div class="key">8</div>
        <div class="key">9</div>
    </div>
  
    <div class="row">
      <div class="key">+</div>
      <div class="key">-</div>
      <div class="key">x</div>
  </div>
  <div class="row">
      <div class="key">/</div>
      <div class="key" id="solve">=</div>
      <div id="clear"class="key">C</div>
  </div>
  <br>
  
</div>    

script.js

$(document).ready(function() {
  
  var operationQueue = [];

  var add = function(a, b) {
    var c = parseInt(a), d = parseInt(b);
    return c + d;
  };

  var multiply = function(a, b) {
    return a * b;
  };

  var divide = function(a, b) {
    if (b !== 0) {
      return a / b;
    } else {
      return "Err";
    }
  };

  var subtract = function(a, b) {
    return a - b;
  };
  
  var performOperation = function(operation, a, b){
    if(operation==="+"){
      return add(a, b);
    } else if(operation==="-") {
      return subtract(a, b);
    } else if(operation==="x") {
      return multiply(a, b);
    } else {
      return divide(a, b);
    }
  };

  $('.key').click(function() {
    var value = $(this).html();
    if(value === "="){
      a = operationQueue.shift();
      operation = operationQueue.shift();
      b = operationQueue.shift();
      result = performOperation(operation, a, b);
      operationQueue.push(result);
    } else {
      operationQueue.push(value);
    }
    $( '#ops-queue' ).html(operationQueue);
  });
  
});

style.css

.container {
   
  background: #1E1E1E;
  width: 150px;
  border-radius: 15px;
  margin: 50px auto;
  overflow: hidden;
  padding: 8px; 
}

.key {
  background: -webkit-linear-gradient(#4B4B4B, #111);
    background: -moz-linear-gradient(#4B4B4B, #111);
    background: linear-gradient(#4B4B4B, #111);
  border: 1px solid #282828;
  border-radius: 50%;
  color: #999;
  cursor: pointer;
  float: left;
  margin: 8px 0px;
  margin-right: 8px;
  padding: 12px 8px;
  width: 10px;
  text-align: center;
}

#clear {
  color: light-green;
}

#screen  {
    -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
    background: #D4DAB6;
    border: 1px solid #282828;
    border-radius: 5px;
    font-size: 30px;
    line-height: 30px;
    margin: 10px auto;
    padding-right: 10px;
    text-align: right;
    height: 80px;
    width:140px;
}

#ops-queue { 
  color: #000;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 50%;
  height: 80px;
}
.key:hover {
    background: #999;
    color: #777;
}