CodePen Embed - #dailyui 004: Calculator

<main ontouchstart class="calculator pre-enter">
  <section class="screen">
    <div class="equation">
      <div class="summary"></div>
      <div class="total">0</div>
    </div>
  </section>
  <section class="buttons">
    <div class="numbers">
      <ul>
        <li class="clear">
          <button data-val="clear">c</button>
        </li>
        <li>
          <button data-val="9">9</button>
        </li>
        <li>
          <button data-val="8">8</button>
        </li>
        <li>
          <button data-val="7">7</button>
        </li>
        <li>
          <button data-val="6">6</button>
        </li>
        <li>
          <button data-val="5">5</button>
        </li>
        <li>
          <button data-val="4">4</button>
        </li>
        <li>
          <button data-val="3">3</button>
        </li>
        <li>
          <button data-val="2">2</button>
        </li>
        <li>
          <button data-val="1">1</button>
        </li>
        <li class="zero">
          <button data-val="0">0</button>
        </li>
        <li>
          <button data-val=".">.</button>
        </li>
      </ul>
    </div>
    <div class="operators">
      <ul>
        <li>
          <button data-val="÷">÷</button>
        </li>
        <li>
          <button data-val="×">×</button>
        </li>
        <li>
          <button data-val="-">-</button>
        </li>
        <li>
          <button data-val="+">+</button>
        </li>
        <li>
          <button data-val="=">=</button>
        </li>
      </ul>
    </div>
  </section>
</main>

$teal: #07F7BF;
$green: #B4ED50;
$yellow: #f4d063;
$orange: #fc9d6b;
$grey: #333;

$border: mix(mix($teal, $green), $grey, 80%);
$font: "Dank Mono", monospace;
$padding: 12px;

$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);

* { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
*:focus { outline: none!important; }
body, html { height: 100vh; }
body {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  perspective: 1000px;
  margin: 0;
  padding: $padding;
  font-family: $font;
  color: white;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background: $green;
  background: linear-gradient(135deg, rgba($green, 1) 0%, rgba($teal, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$green', endColorstr='$teal',GradientType=1 );
}

.calculator {
  display: flex;
  flex-flow: row wrap;
  width: 259px;
  box-shadow: 0 0 10px rgba(#555, .2);
  border-radius: $padding;
  &.pre-enter {
    opacity: 0;
    transform: rotateX(30deg) rotateY(30deg) translateY(300px) translateZ(0);
    visibility: hidden;
    .total {
      opacity: 0;
    }
  }
  &.on-enter {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: all 1000ms $easeOutCubic;
    .total {
      opacity: 1;
      transition: opacity 300ms ease-out 1000ms;
    }
  }
  button {
    display: block;
    padding: 0;
    border: 0;
    width: 64px;
    height: 64px;
    background: none;
    font-family: $font;
    cursor: pointer;
    transition: all 200ms ease-out;
    &:active, &.active {
      transition: all 100ms ease-in;
    }
  }
  .screen {
    width: 100%;
    border-bottom: 1px solid $border;
  }
  .equation {
    width: 100%;
    padding: $padding/2;
    border-radius: $padding $padding 0 0;
    background: white;
    color: $grey;
    overflow: hidden;
    .summary, .total {
      display: flex;
      justify-content: flex-end;
    }
  }
  .summary {
    padding: $padding/2 $padding/2 0;
    height: 22px;
    font-size: 16px;
    font-weight: 500;
    color: lighten($grey, 50%);
  }
  .total {
    padding: $padding/4 $padding/2 $padding/2;
    font-size: 32px;
  }
  .buttons {
    display: flex;
  }
  .numbers {
    width: 194px;
    ul {
      display: flex;
      flex-flow: row wrap;
      background: rgba(white, .3);
      border-bottom-left-radius: $padding;
    }
    button {
      font-size: 24px;
      font-weight: 400;
      color: $grey;
      background: rgba(white, .5);
      &:hover, &:focus {
        background: rgba(white, .75);
      }
      &:active, &.active {
        background: rgba($grey, .05);
      }
    }
    li {
      border-bottom: 1px solid $border;
      border-left: 1px solid $border;
      &.zero, &:last-child {
        border-bottom: 0;
      }
      &.clear, &:nth-child(2), &:nth-child(5), &:nth-child(8), &.zero {
        border-left: 0;
      }
    }
    .clear {
      width: 100%;
      button {
        width: 100%;
        background: rgba(white, .25);
        &:hover, &:focus {
          background: rgba(white, .75);
        }
        &:active, &.active {
          background: rgba($grey, .05);
        }
      }
    }
    .zero {
      width: 129px;
      button {
        width: 100%;
        border-bottom-left-radius: $padding;
      }
    }
  }
  .operators {
    width: 65px;
    border-left: 1px solid $border;
    ul {
      background: $yellow;
      background: linear-gradient(to bottom, rgba($yellow,1) 0%,rgba($orange,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$yellow', endColorstr='$orange',GradientType=0 );
      border-bottom-right-radius: $padding;
    }
    button {
      font-size: 36px;
      font-weight: 300;
      color: white;
      &:hover, &:focus {
        background: rgba(saturate(lighten(mix($orange, $yellow), 25%), 15%), .25);
      }
      &:active, &.active {
        background: rgba(saturate(darken(mix($orange, $yellow), 25%), 15%), .25);
      }
    }
    li {
      &:last-child {
        button {
          border-bottom-right-radius: $padding;
        }
      }
      &:not(:last-child) {
        border-bottom: 1px solid $border;
      }
    }
  }
}

@media only screen and (min-height: 424px) {
  body {
    align-items: center;
    align-content: center;
    overflow: hidden;
  }
}

View Compiled

// on enter
$(".calculator").addClass("pre-enter");
setTimeout(function(){
  $(".calculator").addClass("on-enter");
}, 500);
setTimeout(function(){
  $(".calculator").removeClass("pre-enter on-enter");
}, 2000);

// calculator
// heavily modified from @supah's calculator
// https://codepen.io/supah/pen/pgGYBe
var $keys = $('button');
var $total = $('.total');
var $summary = $('.summary');
var decimal = false;
var operators = ['+', '-', '×', '÷'];

$keys.click(function() {
  var keyVal = $(this).data('val');
  output = $summary.html();
  var lastChar = output[output.length - 1];

  // clear
  if (keyVal == 'clear') {
    $total.html('0');
    $summary.html('');
    decimal = false;
  }

  // equal
  else if (keyVal == '=') {
    output = output.replace(/×/g, '*').replace(/÷/g, '/');
    if (operators.indexOf(lastChar) > -1 || lastChar == '.')
      output = output.replace(/.$/, '');
    if (output) {
      $total.html(Math.round(eval(output)*10000000)/10000000);
    }
    $summary.addClass("complete");
    decimal = false;
  }

  // operators
  else if ($(this).parent().parent().parent().is('.operators')) {
    if ($summary.is(".complete")) {
      $summary.removeClass("complete");
    }
    if (output != '' && operators.indexOf(lastChar) == -1) {
      $summary.html($summary.html() + keyVal);
    } else if (output == '' && keyVal == '-') {
      $summary.html($summary.html() + keyVal);
    }
    if (operators.indexOf(lastChar) > -1 && output.length > 1) {
      $summary.html($summary.html().replace(/.$/, keyVal));
    }
    decimal = false;
  }

  // decimal
  else if (keyVal == '.') {
    if ($summary.is(".complete")) {
      $summary.html('0' + keyVal);
      $summary.removeClass("complete");
    } else if (output == '') {
      $summary.html('0' + keyVal);
    } else if (operators.indexOf(lastChar) > -1) {
      $summary.html($summary.html() + '0' + keyVal);
    } else {
      if (!decimal) {
        $summary.html($summary.html() + keyVal);
        decimal = true;
      }
    }
  }

  // numerals
  else {
    if ($summary.is(".complete")) {
      $summary.html(keyVal);
      $summary.removeClass("complete");
    } else {
      $summary.html($summary.html() + keyVal);
    }
  }
})

$(window).keydown(function(e) {
  console.log(e.which);
  switch (e.which) {
    case 48:
      key = 0;
      break;
    case 49:
      key = 1;
      break;
    case 50:
      key = 2;
      break;
    case 51:
      key = 3;
      break;
    case 52:
      key = 4;
      break;
    case 53:
      key = 5;
      break;
    case 54:
      key = 6;
      break;
    case 55:
      key = 7;
      break;
    case 56:
      key = 8;
      break;
    case 57:
      key = 9;
      break;
    
    case 191:
      key = '÷';
      break;
    case 190:
      key = '.';
      break;
    case 88:
      key = '×';
      break;
    case 189:
      key = '-';
      break;
    case 187:
      key = '+';
      break;
    case 67:
      key = 'clear';
      break;
    
    case 96:
      key = 0;
      break;
    case 97:
      key = 1;
      break;
    case 98:
      key = 2;
      break;
    case 99:
      key = 3;
      break;
    case 100:
      key = 4;
      break;
    case 101:
      key = 5;
      break;
    case 102:
      key = 6;
      break;
    case 103:
      key = 7;
      break;
    case 104:
      key = 8;
      break;
    case 105:
      key = 9;
      break;
    
    case 111:
      key = '÷';
      break;
    case 109:
      key = '-';
      break;
    case 106:
      key = '×';
      break;
    case 107:
      key = '+';
      break;
    case 13:
      key = '=';
      break;
    case 110:
      key = '.';
      break;
    case 27:
      key = 'clear';
      break;
    default:
      return false;
            }
  $('[data-val="' + key + '"]').addClass('active').click();
}).keyup(function(){
  $('.active').removeClass('active');
});

This Pen is owned by Gabrielle Wee on CodePen.

See more by @gabriellewee on CodePen

External CSS

https://gabriellew.ee/static/css/fonts.css

External CSS

External JavaScript