This is inspired by Kamil Khadeyev (http://dribbble.com/shots/723449-Calc-GUI). I am spending time improving my JS knowledge and figured a more complex calc would be the best way to do it. Still have a lot more to go and better way of handling the code in

index.html

<div class="calculator" id="calculator">
  <div class="result" id="result">0</div>
  <div class="col-3">
     <ul>
       <li id="memory-clear">MC</li>
       <li id="memory-plus">M+</li>
       <li id="memory-minus">M-</li>
       <li class="clear" id="clear">C</li>
       <li class="positive-negative" id="positive-negative"><span>+</span></li>
       <li id="divide"> / </li>
       <li>7</li>
       <li>8</li>
       <li>9</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li class="zero">0</li>
       <li>.</li>
     </ul>
  </div>
  <div class="col-1">
    <ul>
      <li>MR</li>
      <li id="multiply"> x </li>
      <li id="subtract">-</li>
      <li id="add">+</li>
      <li class="equals" id="equals">=</li>
    </ul>
  </div>
</div>

script.js

var calc = $('#calculator'),
    result = $('#result'),
    num = new Array();

$('li', calc).click(function(e) {
   var el = $(this),
       key = el.html(),
       mp = el.attr('id') == 'memory-plus',
       mm = el.attr('id') == 'memory-minus';
  
  if(result.text() == 0) {
    result.empty();
  }
  
  if(el.attr('id') == 'clear') {
    result.empty().append(0);
    return true;
  }
    
  if (el.attr('id') == 'positive-negative') {
    if(result.text() == 0) {
      result.empty().append(0);
      return true;
    } else {
       result.prepend('- ');
      return true;
    }
  }
  
  if(mp || mm) {
    calc.append('<span class="memory">M</span>');
    if (mp) {
      num.push(result.text().replace(/[^0-9]/, ""));
      localStorage.setItem('Calculator Memory',num);
      return true;
    }
  }
  
  if(el.attr('id') == 'memory-clear') {
    calc.find('span.memory').remove();
    localStorage.removeItem('Calculator Memory');
    return true;
  }
  
  result.append(key);
  e.preventDefault();
});

style.scss

@import "compass";
*, *:before, *:after {
  box-sizing: border-box;
}


$textColor: #715d54;

body {
  background: #c5dfe5;
  font-weight: bold;
  user-select: none;
  text-shadow: 0 1px 0 #fff;
}

.calculator {
  background: linear-gradient(#f7f4ed, #f0ede6);
  border: 1px solid #cac3b1;
  border-radius: 4px;
  box-shadow: 0 1px 0 #fcfbf9 inset, 0 10px 15px #458493;
  height: 316px;
  left: 50%;
  margin: -158px 0 0 -122px;
  padding: 14px 12px; 
  position: absolute;
  top: 50%;
  width: 248px;
}

.result {
  background: linear-gradient(#dad3c7,#f1ede6 35%, #f5f2ec 50%);
  border-radius: 3px;
  box-shadow: 0 1px 1px #dcd9d2, 0 2px 1px #fdfdfc;
  border: 0;
  color: $textColor;
  font-weight: bold;
  height: 42px;
  line-height: 42px;
  margin-bottom: 12px;
  outline: none;
  padding-right: 10px;
  position: relative;
  text-align: right;
  width: 220px;
}

.col-3 {
  float: left;  
  width: 171px;
  
  li {
    display: inline-block;
    float: left;
    margin: 0 6px 6px 0;
    
    &:nth-child(3n+3) {
      margin-right: 0;
    }
  }
}

ul {
  margin: 0;
  padding: 0;
}


li {
  background: linear-gradient(#f5f1e9, #eeeae2);
  border: 1px solid #dfdcd7;
  border-radius: 3px;
  box-shadow: 0 1px 0 #fff inset, 0 1px 1px #dfdcd7;
  color: $textColor;
  font-size: 12px;
  height: 34px;
  line-height: 34px;
  list-style-type: none;
  cursor: pointer;
  text-align: center;
  width: 51px;
  
  &:hover {
    background: #f1ede5;
  }
  
  &:active {
    background: linear-gradient(#eeeae2, #f5f1e9);
    box-shadow: 0 1px 0 #dfdcd7 inset, 0 1px 0 #fff;
  }
}

.clear {
  background: linear-gradient( #e87f49, #e17842);
  border: 1px solid #b64e19;
  box-shadow: 0 1px 0 #fe955f inset, 0 1px 1px #b64e19;
  color: #fcfcfc;
  text-shadow: 0 1px 0 #e06e33;
  
  &:hover {
    background: #e57c46;
  }
  
  &:active {
    background: linear-gradient( #e17842, #e87f49);
    box-shadow: 0 1px 0 #b64e19 inset, 0 1px 0 #fe955f;
  }
 
}

.positive-negative {
  span {
    position: relative;
    top: -1px;
    
     &:before {
      border-bottom: 2px solid $textColor;
      box-shadow: 0 1px #fff;
      height: 5px;
      content:"";
      left: 0;
      position: absolute;
      width: 8px;
      top: 9px;
    }
  }
   
}

.zero {
   width: 108px;
}

.col-1 {
  display: inline-block;
  
  li {
    display: block;
    margin-bottom: 6px;
  }
}

.equals {
  background: linear-gradient(#8e919e, #797c89);
  border: 1px solid #6a7c7f;
  box-shadow: 0 1px 0 #a4a7b4 inset, 0 -1px 1px #5c5f6c inset;
  color: #fefefe;
  height: 73px;
  line-height: 110px;
  text-shadow: none;
  
  &:hover {
    background: #848794;
  }
  
  &:active {
    background: linear-gradient(#797c89, #8e919e);
    box-shadow: 0 -1px 0 #a4a7b4 inset, 0 1px 0 #5c5f6c inset;
  }
 
}

.memory {
  color: $textColor;
  font-size: 12px;
  left: 60px;
  position: absolute;
  text-shadow: 0 1px 0 #fff;
  top: 43px;
}