CodePen Embed - Calculator

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="container">
    <div class="unselectable" id="calculator">
      <!-- Screen and C key -->
      <div class="top">
        <div id="display"></div>
      </div>
      <div class="keys">
        <!-- keys -->
        <span class="btn operator">+</span> 
        <span class="btn operator">-</span> 
        <span class="btn operator">×</span> 
        <span class="btn operator">&divide;</span>
        <span class="btn number">7</span> 
        <span class="btn number">8</span> 
        <span class="btn number">9</span> 
        <span class="btn operator">&radic;</span>
        <span class="btn number">4</span> 
        <span class="btn number">5</span> 
        <span class="btn number">6</span> 
        <span class="btn operator">x<sup>y</sup></span>
        <span class="btn number">1</span> 
        <span class="btn number">2</span> 
        <span class="btn number">3</span> 
        <span class="btn " id="pnsign">+/-</span>
        <span class="btn number">0</span> 
        <span class="btn number">.</span> 
        <span class="btn operator" id="eval">=</span> 
        <span class="btn clear">C</span>
      </div>
    </div>
  </div>
</body>

@import url('https://fonts.googleapis.com/css?family=Rubik');

* {
  font-family: 'Rubik', sans-serif; 
  box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
  background: -moz-radial-gradient(center, ellipse cover, rgba(164,138,171,1) 0%, rgba(61,53,69,1) 64%, rgba(11,19,22,1) 95%, rgba(11,19,22,1) 100%); /* ff3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(164,138,171,1)), color-stop(64%, rgba(61,53,69,1)), color-stop(95%, rgba(11,19,22,1)), color-stop(100%, rgba(11,19,22,1))); /* safari4+,chrome */
background:-webkit-radial-gradient(center, ellipse cover, rgba(164,138,171,1) 0%, rgba(61,53,69,1) 64%, rgba(11,19,22,1) 95%, rgba(11,19,22,1) 100%); /* safari5.1+,chrome10+ */
background: -o-radial-gradient(center, ellipse cover, rgba(164,138,171,1) 0%, rgba(61,53,69,1) 64%, rgba(11,19,22,1) 95%, rgba(11,19,22,1) 100%); /* opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(164,138,171,1) 0%, rgba(61,53,69,1) 64%, rgba(11,19,22,1) 95%, rgba(11,19,22,1) 100%); /* ie10+ */
background:radial-gradient(ellipse at center, rgba(164,138,171,1) 0%, rgba(61,53,69,1) 64%, rgba(11,19,22,1) 95%, rgba(11,19,22,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A48AAB', endColorstr='#0B1316',GradientType=1 ); /* ie6-9 */
/*     background-color: #607D8B; 
    background: url("https://dl.dropboxusercontent.com/u/9311890/purpleBlur.jpg") center center no-repeat; */
    background-size: cover;
}

.container {
  margin-top: 10%;
}

#calculator {
  border: 1px solid #ddd;
  width: 330px;
  height: 445px;
  margin: 20px auto;
  border-radius: 10px;
  padding: 20px;
/*   background-color: #FF6766;  */
  background-color: rgba(0,0,0,0.2); 
    -webkit-box-shadow: 0px 50px 50px -45px rgba(0,0,0,0.85);
-moz-box-shadow: 0px 50px 50px -45px rgba(0,0,0,0.85);
box-shadow: 0px 50px 50px -45px rgba(0,0,0,0.85);
}

.top span.clear {
  float: left;
  width: 45px;
  height: 45px;
/*   border: 1px solid #ddd; */
  border-radius: 50%;
  margin-left: 8px;
  text-align: center;
  line-height: 35px;
  text-align: center;
  font-size: 1.4em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.top span.clear:hover {
  color: #777;
}

.top span.clear:active {
  background-color: rgba(255,255,255,0.3);
  float: left;
  width: 45px;
  height: 45px;
/*   border: 1px solid #555; */
/* //  border-radius: 50%; */
  margin-left: 8px;
  text-align: center;
  line-height: 35px;
  text-align: center;
  font-size: 1.4em;
  cursor: pointer;
}

.top #display {
  height: 45px;
  width: 270px;
  margin-left: 10px;
  float: left;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  line-height: 45px;
  padding: 0 15px 0 10px;
  font-size: 1.8em;
  text-align: right;
  overflow: hidden;
  color: #eee;
}

.keys span{
  float: left;
  width: 60px;
  height: 60px;
/*   border: 1px solid #ddd; */
  border-radius: 50%;
  text-align: center;
  margin: 6px;
  line-height: 50px;
  text-align: center;
  font-size: 2em;
  cursor: pointer;
}

.keys span:hover{
  color: #777;
}

sup {
  font-size: 0.6em;
  margin-left:2px;
}

.unselectable {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
}

/* 
========================
      BUTTON
========================
*/
.btn {
  color: #eee;
  transition: all 0.5s;
  position: relative;
  border-radius: 100%;
  padding: 4px 0;
}
.btn::active {
  background-color: rgba(255,255,255,0.3);
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(255,255,255,0.2);
  transition: all 0.3s;
  border-radius: 100%;
}
.btn:hover::before {
  opacity: 0 ;
  transform: scale(0.5,0.5);
}
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: all 0.3s;
  border: 1px solid rgba(255,255,255,0.5);
  transform: scale(1.2,1.2);
  border-radius: 100%;
}
.btn:hover::after {
  opacity: 1;
  transform: scale(1,1);
}

$(document).ready(function() {
  var number = "";
  var numberTwo = "";
  var selectedOperator = "";
  var result = $("#display");
  
  
  // clear display
  $('.clear').click(function() {
    number = "";
    numberTwo = "";
    selectedOperator = "";
    $('#display').text("0");
  })
  
    //sloppy +/- change
    function signChange(){
      number *= -1;
      $('#display').text(number);
      console.log("signchange: "+ number);
    }
  var pnsignClick = document.getElementById("pnsign");
  pnsignClick.addEventListener("click", signChange);
  

  //enter numbers and decimal
  $('.number').click(function() {
    number += $(this).text();
    $('#display').text(number);
    console.log(number);
  })

  $(".operator").not("#eval").click(function() {
    selectedOperator = $(this).text();
    numberTwo = number;
    number = "";
    console.log("op:"+selectedOperator);
    console.log("2:"+numberTwo);
    console.log("1:"+number);
    //result.text("");
  });

  //do the operation
  $('#eval').click(function() {

    if (selectedOperator === "+") {
      number = (parseFloat(numberTwo) + parseFloat(number));
    } else if (selectedOperator === "-") {
      number = (parseFloat(numberTwo) - parseFloat(number));
    } else if (selectedOperator === "×") {
      number = (parseFloat(numberTwo) * parseFloat(number)).toPrecision(5);
    } else if (selectedOperator === "÷") {
      number = (parseFloat(numberTwo) / parseFloat(number)).toPrecision(5);
    } else if (selectedOperator === "xy") {
      number = (Math.pow(numberTwo,number)).toPrecision(5);
    } else if (selectedOperator === "√") {
      number = Math.sqrt(numberTwo); 
    }
    result.text(number);
    number = "";
    numberTwo = "";

  })

});

This Pen is owned by Eddie on CodePen.

See more by @kirbyedy on CodePen

External CSS

//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

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