<div class="calc_container">
  <div class="texture"></div>
  <div class="win_container">
    <div class="win_button red">
      <span>x</span>
    </div>
     <div class="win_button orange">
       <span>-</span>
    </div>
    <div class="win_button grey">
    </div>
  </div>
  <div class="title">
    Calculette
  </div>
  <div id ="screen" class="screen">
    <span id="result" class="result">
      0
    </span>
    <span class="operator">
      
    </span>
  </div>
  <div class="buttons_container">
  <div class="disabled button">MC</div>
  <div class="disabled button">M+</div>
  <div class="disabled button">M-</div>
  <div class="disabled button">MR</div>
  <div class="button">C</div>
  <div class="button">±</div>
  <div class="button">÷</div>
  <div class="button">×</div>
  <div class="button">7</div>
  <div class="button">8</div>
  <div class="button">9</div>
  <div class="button">-</div>
  <div class="button">4</div>
  <div class="button">5</div>
  <div class="button">6</div>
  <div class="button">+</div>
  <div class="button">1</div>
  <div class="button">2</div>
  <div class="button">3</div>
  <div class="button equal">=</div>
  <div class="button zero">0</div>
  <div class="disabled button comma">,</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body{
  background:#282828;
  text-align:center;
   font-family:"Open sans", sans-serif;
    -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.calc_container{
  position:relative;
  box-sizing:border-box;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e1e1e1+0,d1d1d1+5,c2c2c2+12,ababab+30,9c9c9c+52,9f9f9f+65,9c9c9c+83,a1a1a1+91,9a9a9a+100 */
  background: #e1e1e1; /* Old browsers */

  background: -moz-linear-gradient(top,  #e1e1e1 0%, #d1d1d1 5%, #c2c2c2 12%, #ababab 30%, #9c9c9c 52%, #9f9f9f 65%, #9c9c9c 83%, #a1a1a1 91%, #9a9a9a 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #e1e1e1 0%,#d1d1d1 5%,#c2c2c2 12%,#ababab 30%,#9c9c9c 52%,#9f9f9f 65%,#9c9c9c 83%,#a1a1a1 91%,#9a9a9a 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #e1e1e1 0%,#d1d1d1 5%,#c2c2c2 12%,#ababab 30%,#9c9c9c 52%,#9f9f9f 65%,#9c9c9c 83%,#a1a1a1 91%,#9a9a9a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e1e1', endColorstr='#9a9a9a',GradientType=0 ); /* IE6-9 */
  
  border-radius:4px;
  width:220px;
  height:282px;
  margin: 62px auto 0 auto;
  box-shadow:0 32px 43px rgba(0,0,0,.4),
    0 0 29px 9px rgba(0,0,0,.3)
}

.win_button{
  height:10px;
  width:10px;
  border-radius:50%;
  border:1px solid #444444;
 
  box-shadow:inset 0 1px rgba(255,255,255,.7),
    0 1px rgba(255,255,255,.5);
  float:left;
  margin-right:7px;
}

.win_button.red{
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d89f9f+3,f73e3b+36,ef3737+100 */
background: rgb(216,159,159); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(216,159,159,1) 3%, rgba(247,62,59,1) 36%, rgba(239,55,55,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(216,159,159,1) 3%,rgba(247,62,59,1) 36%,rgba(239,55,55,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(216,159,159,1) 3%,rgba(247,62,59,1) 36%,rgba(239,55,55,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d89f9f', endColorstr='#ef3737',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.win_button.orange{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efd6b1+3,efb358+39,f2a426+100 */
background: rgb(239,214,177); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(239,214,177,1) 3%, rgba(239,179,88,1) 39%, rgba(242,164,38,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(239,214,177,1) 3%,rgba(239,179,88,1) 39%,rgba(242,164,38,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(239,214,177,1) 3%,rgba(239,179,88,1) 39%,rgba(242,164,38,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efd6b1', endColorstr='#f2a426',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.win_button.grey{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9f9f9+3,dbdbdb+39,adadad+100 */
background: rgb(249,249,249); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(249,249,249,1) 3%, rgba(219,219,219,1) 39%, rgba(173,173,173,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(249,249,249,1) 3%,rgba(219,219,219,1) 39%,rgba(173,173,173,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(249,249,249,1) 3%,rgba(219,219,219,1) 39%,rgba(173,173,173,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#adadad',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
.win_button.orange{
  font-size:20px;
}

.win_button span{
  display:none;
}

.win_container:hover span{
  display:block;
}
.win_container{
  position:absolute;
  top:7px;
  left:10px;
  font-size:9px;
  line-height:8px;
  color:#510e11;
}

.title{
  font-size:13px;
  padding:4px 0;
  color:#333;
  text-shadow: 0 1px rgba(255,255,255,.6);
}

.operator{
  display:block;
  text-align:center;
  padding-left:45px;
  font-size:14px;
  line-height:30px
}

.screen{
  background:#effabc;
  width:188px;
  height:47px;
  margin:0 auto;
   border-radius:4px;
  box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.1),inset 0 2px 3px rgba(0,0,0,.43),inset 0 -1px 0px rgba(0,0,0,.2), 0 2px 2px rgba(255,255,255,.8),
1px 0 1px 0 rgba(0,0,0,.12),
1px 0 0px 0 rgba(0,0,0,.3),
   -1px 0 1px 0 rgba(0,0,0,.12),
-1px 0 0px 0 rgba(0,0,0,.3);
  font-size:15px;
  box-sizing:border-box;
  text-align:right;
  padding:2px 22px 0 0;
  -moz-box-sizing:border-box;
}

.buttons_container{
  margin:6px auto 0 auto;
  float:none;
  overflow:hidden;
  width:88%;
  clear:both;
}

.button{
  font-size:13px;
  line-height:25px;
  text-shadow:0 1px rgba(255,255,255,.4);
  height:25px;
  width:22%;
  border:1px solid #676767;
  float:left;
  margin:5px 2.6% 0px 0%;
  border-radius: 5px;
  text-align:center;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d5d5d5+0,c9c9c9+28,cbcbcb+100 */
background: #d5d5d5; /* Old browsers */
background: -moz-linear-gradient(top,  #d5d5d5 0%, #c9c9c9 28%, #cbcbcb 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #d5d5d5 0%,#c9c9c9 28%,#cbcbcb 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #d5d5d5 0%,#c9c9c9 28%,#cbcbcb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5d5d5', endColorstr='#cbcbcb',GradientType=0 ); /* IE6-9 */

  box-shadow: inset 0 2px #ebebeb,0 1px #c3c3c3, inset 0 -1px 2px rgba(0,0,0,.4);
  cursor:pointer;
}

.button:active{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8a8a8a+0,ababab+20,adadad+56,adadad+56,aeaeae+100 */
background: rgb(138,138,138); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(138,138,138,1) 0%, rgba(171,171,171,1) 20%, rgba(173,173,173,1) 56%, rgba(173,173,173,1) 56%, rgba(174,174,174,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(138,138,138,1) 0%,rgba(171,171,171,1) 20%,rgba(173,173,173,1) 56%,rgba(173,173,173,1) 56%,rgba(174,174,174,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(138,138,138,1) 0%,rgba(171,171,171,1) 20%,rgba(173,173,173,1) 56%,rgba(173,173,173,1) 56%,rgba(174,174,174,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a8a8a', endColorstr='#aeaeae',GradientType=0 ); /* IE6-9 */
box-shadow:inset 0  3px  5px rgba(0,0,0,.1),
  inset -1px  0px  3px rgba(0,0,0,.1),
  0 1px rgba(255,255,255,.6),
  inset 1px  0px  3px rgba(0,0,0,.1);
  border:1px solid #414141;
  
}

.button:nth-child(4n){
  margin-right:0;
}

.zero{
  width:47.3%;
}

.zero, .comma{
  margin-top:-26px;
  position:relative;
  bottom:1px;
}

.equal{
  height:59px;
  line-height:96px;
}

.texture{
  height:100%;
  width:100%;
  position:absolute;
  background-image: url(data:image/png;base64,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);
  opacity:.4;
}

.screen, win_container,
.button{
  position:relative;
}

.disabled,
.button.disabled:active{
  background:rgba(255,255,255,.5);
  color:#717070;
  cursor: not-allowed;
  box-shadow:none;
}
var Calc = {
    acc: null,
    value: 0,
    makeOperation: function(operation, n) {
        if (this.acc !== null) {
            switch (operation) {
                case '×':
                    this.acc = this.acc * n;
                    return this.acc;
                    break;

                case '÷':
                    this.acc = this.acc / n;
                    return this.acc;
                    break;

                case '+':
                    this.acc = this.acc + n;
                    return this.acc;
                    break;

                case '-':
                    this.acc = this.acc - n;
                    return this.acc;
                    break;
            }
        } else {
            this.acc = n;
            return this.acc;
        }
    },
    toScreen: function(n) {
        $("#result").text(n);
    },
    alternate: function(s){
        return s = s > 1 ? 0 : s;
    },
    allOperators: function(arr){
        return isNaN(arr[0]) && isNaN(arr[1]);
    },
    displayOperator: function(operator){
    	if(['+','-','÷','×'].indexOf(operator) > -1){
            $('.operator').text(operator);
        }
    },
    clearOperator: function(){
      $('.operator').text('');
    },
    init: function() { 
        var _this = this;
        var btnVal;
        var operation;
        var states = [null, null];
        var rptOp = [0, 0];
        var temp;
        var i = rptC = 0;
        var accMode = false;
        var evalMode = false;
        var floatingMode = false;
        
        $(".button:not(.disabled)").click(function(e) {
            
            btnVal = $(this).text();
            rptC = _this.alternate(rptC);
            rptOp[rptC] = btnVal;
            rptC++;

			if (!isNaN(btnVal)) {
            	if(floatingMode){
            	  _this.value += btnVal.toString();
            	}
            	else{
        			  accMode = false;
        		    btnVal = Number(btnVal);
        		    _this.value *= 10;
        		    _this.value += btnVal;
            	}
              _this.toScreen(_this.value);
            }

            else if(btnVal === 'C'){
            	_this.acc = null;
            	_this.value = 0;
            	_this.toScreen(_this.value);
            	rptOp = [0, 0];
            	states = [null, null];
            	_this.clearOperator();
            }

            else if(btnVal === '±'){
            	if(accMode){
            		_this.acc = _this.acc * -1;
            		_this.toScreen(_this.acc);
            	}
            	else{
            		evalMode = true;
            		_this.toScreen( - _this.value);
            	}
            }

            else {
            	floatingMode = false;
            	_this.value = Number(_this.value);
            	i = _this.alternate(i);
            	states[i] = btnVal;

            	operation = i === 0 ? states[1] : states[0];
            	_this.displayOperator(btnVal);

            	if(evalMode){
            		_this.makeOperation(operation, -1 * _this.value);
            		_this.toScreen(_this.acc);
            		_this.value = 0;
            	}
            	else{
            		if(_this.allOperators(rptOp) && rptOp.length === 2){
            			operation = btnVal;
            		}
            		else{
            			_this.makeOperation(operation, _this.value);
            			_this.toScreen(_this.acc);
            			_this.value = 0;
            			accMode = true;
            		}
            	}
            	evalMode = false;

                i++;
            }

        });
    }
};

Calc.init();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js