Calculator made with JS, CSS and HTML

dgbowv.markdown

Calculator made with JS, CSS and HTML

A Pen by Eduardo Sanchez on CodePen.

License.

index.html

<div id="calculator-frame" class="container">
  <div id="calculator-wrap" class="row">
    <div class="col-xs-12 display text-right">
      <p class="operation"></p>
      <p class="current-num"></p>
    </div>
    <div class="col-xs-9">
      <div class="row">        
        <div class="col-xs-4 key text-center"><span class="num reset">AC</span>
        </div>
        <div class="col-xs-4 key text-center"><span class="num partial-reset">CE</span>
        </div>
        <div class="col-xs-4 key text-center"><span class="num percent">%</span>
        </div>
        <div class="col-xs-4 number text-center"> <span class="num">1</span>
        </div>
        <div class="col-xs-4 number text-center"> <span class="num">2</span>
        </div>
        <div class="col-xs-4 number text-center"> <span class="num">3</span>
        </div>
        <div class="col-xs-4 number text-center"> <span class="num">4</span>
        </div>
        <div class="col-xs-4 number text-center"> <span class="num">5</span>
        </div>
        <div class="col-xs-4 number text-center"> <span class="num">6</span>
        </div>
        <div class="col-xs-4 number text-center"> <span class="num">7</span>
        </div>
        <div class="col-xs-4 number text-center"> <span class="num">8</span>
        </div>
          <div class="col-xs-4 number text-center"> <span class="num">9</span>
        </div>
        <div class="col-xs-4 number text-center"><span class="num">0</span>
        </div>
        <div class="col-xs-4 number text-center"><span class="num">.</span>
        </div>
        <div class="col-xs-4 number text-center"> <span class="equal">=</span>
        </div>       
      </div>
    </div>
    <div class="col-xs-3">
      <div class="col-xs-12 operator text-center"> <span class="op num">/</span>
        </div>
        <div class="col-xs-12 operator text-center"> <span class="op num">*</span>
        </div>
        <div class="col-xs-12 operator text-center"> <span class="op num">-</span>
        </div>
          <div class="col-xs-12 operator text-center"> <span class="op num plus">+</span>
        </div>      
    </div>
    <div class="testing"></div>
  </div>
</div>

script.js

$(document).ready(function(){
  $("#calculator-frame").css({
    height: $(window).height()
  });
  var number = "";
  var display_number = "";
  var op_string = "";
  var new_number = false;
  var operators = ["+", "*", "/", "-", "%"];
  var percent = false;
  $(".row").click(function(){
    $(".operation").text(op_string);
  });
  $(".number .num").click(function() {
    if(new_number === true) {
      number = "";
      new_number = false;
    }
    
    number = $(this).text();
    display_number = display_number + $(this).text();
    op_string = op_string + number;    
    $(".current-num").text(display_number);
  });
  
  $(".operator .op").click(function() {
    if(operators.indexOf( op_string.substr(-1)) === -1){
      if (percent === true && op_string.length > 0) {
        op_string = op_string + ")";
        percent = false;
      }
       op_string = op_string + $(this).text();  
       new_number = true;
       display_number = ""; 
    }
  });
  
  $(".equal").click(function(){
    if (percent === true && op_string.length > 0) {
      op_string = op_string + ")";
      percent = false;
    }
    var total = eval(op_string);
    op_string = total.toString();
    display_number = "";
    $(".current-num").text(total);
  });
  
  $(".reset").click(function(){
    op_string = "";
    $(".current-num").text("");
    new_number = false;
    number = "";
    display_number = "";
  });
  
  $(".partial-reset").click(function(){
    op_string = op_string.substr(0, op_string.length - display_number.length);
    display_number = "";
    $(".current-num").text(display_number);
  });
  
  $(".percent").click(function(){
    if (op_string.length > 0) {
      percent = true;
      op_string = op_string + "* (1/100 *";
      display_number = "";
      $(".current-num").text(display_number);
    }
  });
});

scripts

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

style.css

body{
  background: url("http://orig13.deviantart.net/ed4c/f/2012/160/b/c/background_desk_wood_texture_objects_scratch_by_archibald_butler-d52wel3.jpg");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  font-family: "Ubuntu", Sans-Serif;
  color: #fff;
}

#calculator-frame {
  width: 390px;
}

#calculator-wrap {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background-color: gray;
  padding: 20px;
  border-bottom: 15px solid #2f4f4f;
  border-radius: 15px;
  -moz-box-shadow:    inset 0 0 15px #fff;
   -webkit-box-shadow: inset 0 0 15px #fff;
   box-shadow:         inset 0 0 15px #fff;
}

.number,
.key,
.operator {
  height: 50px;
  font-size: 24px;
  cursor: pointer;
}

.num,
.equal {
  width: 60px;
  border: 2px solid #000;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(76,76,76,1);
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 0%, rgba(71,71,71,1) 0%, rgba(44,44,44,1) 0%, rgba(102,102,102,1) 11%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 96%, rgba(19,19,19,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76,76,76,1)), color-stop(0%, rgba(89,89,89,1)), color-stop(0%, rgba(71,71,71,1)), color-stop(0%, rgba(44,44,44,1)), color-stop(11%, rgba(102,102,102,1)), color-stop(51%, rgba(0,0,0,1)), color-stop(60%, rgba(17,17,17,1)), color-stop(96%, rgba(43,43,43,1)), color-stop(100%, rgba(19,19,19,1)));
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 0%, rgba(71,71,71,1) 0%, rgba(44,44,44,1) 0%, rgba(102,102,102,1) 11%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 96%, rgba(19,19,19,1) 100%);
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 0%, rgba(71,71,71,1) 0%, rgba(44,44,44,1) 0%, rgba(102,102,102,1) 11%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 96%, rgba(19,19,19,1) 100%);
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 0%, rgba(71,71,71,1) 0%, rgba(44,44,44,1) 0%, rgba(102,102,102,1) 11%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 96%, rgba(19,19,19,1) 100%);
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 0%, rgba(71,71,71,1) 0%, rgba(44,44,44,1) 0%, rgba(102,102,102,1) 11%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 96%, rgba(19,19,19,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 );
Copy text


}

.reset,
.partial-reset {
  background: rgba(248,80,50,1);
  background: -moz-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 0%, rgba(246,41,12,1) 42%, rgba(240,47,23,1) 65%, rgba(231,56,39,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(248,80,50,1)), color-stop(0%, rgba(241,111,92,1)), color-stop(42%, rgba(246,41,12,1)), color-stop(65%, rgba(240,47,23,1)), color-stop(100%, rgba(231,56,39,1)));
  background: -webkit-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 0%, rgba(246,41,12,1) 42%, rgba(240,47,23,1) 65%, rgba(231,56,39,1) 100%);
  background: -o-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 0%, rgba(246,41,12,1) 42%, rgba(240,47,23,1) 65%, rgba(231,56,39,1) 100%);
  background: -ms-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 0%, rgba(246,41,12,1) 42%, rgba(240,47,23,1) 65%, rgba(231,56,39,1) 100%);
  background: linear-gradient(to bottom, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 0%, rgba(246,41,12,1) 42%, rgba(240,47,23,1) 65%, rgba(231,56,39,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=0 );
Copy text

}

.display {
  height: 150px;
  background-color: #000;
  margin-bottom: 25px;
  overflow: hidden;
  color: #fff;
  font-size: 48px;
  font-family: "Black Ops One", cursive;
  border-raius: 10px;
  -moz-box-shadow:    inset 0 0 7px #fff;
   -webkit-box-shadow: inset 0 0 7px #fff;
   box-shadow:         inset 0 0 7px #fff; 
}

.operator .plus {
  height: 100px;
  top: 0;
  transform: translateY(0);
}

.operation {
  color: #fff;
  font-size: 14px;
  display: block;
  text-align: left;
  padding: 10px;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Black+Ops+One" rel="stylesheet" />