A Pen by Davide Curletti.

index.html

<div class="screen">
  <p align="right"></p>
</div>
<div class="pad">
  <div class="number">1</div>
  <div class="number">2</div>
  <div class="number">3</div>
  <div class="number">4</div>
  <div class="number">5</div>
  <div class="number">6</div>
  <div class="number">7</div>
  <div class="number">8</div>
  <div class="number">9</div>
  <div class="operator">+</div>
  <div class="number">0</div>
  <div class="operator">-</div>
  <div class="operator">*</div>
  <div class="operator">/</div>
  <div class="operator">=</div>
  <div class="operator clear">Clear</div>
</div>

qtaHr.markdown

qtaHr

A Pen by Davide Curletti on CodePen.

License.

script.js

$(document).ready(function(){
  var holder = [];
  // Hover effect
  $('.pad').on({
    mouseenter: function(){
      color = $(this).css("background");
      $(this).css("background", "white")
    }, 
    mouseleave: function(){
      $(this).css("background", color);
    }, 
    click: function(){
      buttonVal = $(this).text();
      $screen = $('.screen > p');
      if (buttonVal == "=") {
        answer = Number(holder.join(""))
        $screen.html(answer)
        holder = [];
      } else if (buttonVal == "Clear") {
        holder = [];
        $screen.html(holder);
      } else { 
        holder.push(buttonVal);
        $screen.html(holder.join(""));
        console.log(holder)
      };
    },
  }, '.number,.operator');

});

style.css

.screen{
  height:50px; width:298px;
  background: #F0F0F0;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  margin-bottom: 1px;
}
.pad{
  height: 600px; width: 300px;
  background: red;
}
.number,.operator{
  height:98px;
  width:98px;
  border: 1px solid black;
  float: left;
  background: green;
  text-align: center;
  line-height: 100px;
}
.operator{
  background:grey;
}
.clear{
width: 298px;
}