A Pen by GBE

Thumbnail
This awesome code was written by UniverSoulSun, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright UniverSoulSun ©
  • HTML
  • CSS
  • JavaScript
    <div class="calculator">
  <div class="container-fluid">
    <div class="row">
      <section class="header">
        <h1 class="author lead">GBE's</h1>
        <cite class="tit small">JavaScript Calculator</cite>
        <span class="glyphicons glyphicons-calculator"></span>
      </section>
    </div row>
    <div class="row">
      <button class="clear btn btn-danger" type="button">C</button>
      <div class="screen"></div>
    </div>

    <div class="btn-group row">
      <button class="btn btn-primary keys" type="button">7</button>
      <button class="btn btn-primary keys" type="button">8</button>
      <button class="btn btn-primary keys" type="button">9</button>
      <button id="plus" class="operator" type="button">+</button>
    </div>
    <div class="btn-group row">
      <button class="btn btn-primary keys" type="button">4</button>
      <button class="btn btn-primary keys" type="button">5</button>
      <button class="btn btn-primary keys" type="button">6</button>
      <button class="operator" type="button">-</button>
    </div>
    <div class="btn-group row">
      <button class="btn btn-primary keys" type="button">1</button>
      <button class="btn btn-primary keys" type="button">2</button>
      <button class="btn btn-primary keys" type="button">3</button>
      <button class="operator" type="button">&divide</button>
    </div>
    <div class="btn-group row">
      <button class="btn btn-primary keys" type="button">0</button>
      <button class="btn btn-primary decimalPoint" type="button">.</button>
      <button class="btn btn-primary sum" type="button">=</button>
      <button class="operator" type="button">&times</button>
    </div>

    <div>
      <section class="footer">
        <span class="sign jumbo"><sup>powered by</sup>UniverSoulSun</span><br>
        <img class="html-badge" src="https://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png" alt="HTML5 Powered with CSS3 / Styling, and Semantics" title="HTML5 Powered with CSS3 / Styling, and Semantics">
        <img class="jquery-logo" src="https://upload.wikimedia.org/wikipedia/en/9/9e/JQuery_logo.svg" alt="Jquery"/>
        <img class="bs-logo" src="http://www.brucehan.me/img/10.Bootstrap.png" alt="BootStrap"/>
        
        <!--<sub class="mark">HTML</sub>
        <sup>JavaScript</sup>
        <sub class="mark">JQuery</sub>
        <sup>CSS3</sup>
        <sub>BootStrap</sub>-->
    </section>
    </div>
  
</div>
</div>
<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Console Log</div>
    <div class="panel-body">Start Calculating</div>
    <div class="panel-footer"><sup>by</sup>UniverSoulSun</div>
  </div>

/*Downloaded from https://www.codeseek.co/UniverSoulSun/a-pen-by-gbe-WrjWKQ */
    $gold: #ffd700;
$boot-primary : #006dcc;

body {
  background-repeat: no-repeat;
  background-image: url('http://skyboxcreative.com/wp-content/uploads/edd/2015/10/Sacred-Geometry-Vector-Illustrations-Vol2.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:100vs;
}

.calculator {
  position: relative;
  display: block;
  float: left;
  overflow: none;
  width: 370px;
  height: auto;
  max-height:550px;
  margin: 10px 0 0 30px;
  padding: 0 40px 40px 40px;
  background-color: #4dd2ff;
  border-radius: 80px;
  opacity: 0.9;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.header {
  position: relative;
  display: inline;
  text-align: right;
  
  color: #fff;
  font-size: 20px;
  padding: 10px 10px 0 0;
  margin: 15px 10px 10px 15px;
  z-index: 1px;
  
}

.author {
  position: relative;
  display: inline;
  padding: 0;
  margin: -13px;
  text-align: center;
  text-shadow: -5px 5px 5px $gold;
  font-family: 'italianno', cursive;
  font-size: 70px;
  letter-spacing: 5px;
  color: $gold;
  text-decoration: none;
  z-index: 1000px;
  
}
.tit{text-decoration: overline;}
.keys, .clear, .operator, .sum, .decimalPoint{
  position: relative;
  float: left;
  width: 70px;
  height: 50px;
  text-align: center;
  font-size: 20px;
  box-shadow: 5px 5px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}
.keys:hover{
  border-color: #ffd700;
  /*background-color: #a54dff;*/
  color:#fff;
}
.operator{
  font-size: 27px;
  color: $boot-primary;
  border-color: $boot-primary;
  background-color: #ffc24d;
}
.operator:hover{
  color: #fff;
  background-color: #ffa800;
}
.sum{
  color: #fff;
  background-color: #5cd65c;
  border-color: $gold;
  
}
.sum:hover{
  border-color: #ffd700;
  background-color: #2eb82e;
}
.clear {
  border-color: $boot-primary;
  background: #ff8080;
  color: #fff;
}
.clear:hover{
  background: #ff3333;
}
.screen {
  position: relative;
  float: left;
  
  height: 50px;
  width: 208px;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  box-shadow: inset 0 4px rgba(0, 0, 0, 0.2);
  /* Typography */
  font-size: 20px;
  line-height: 40px;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  text-align: right;
  letter-spacing: 0;
}
/*Pressing down effect*/
input:active{
  box-shadow: 0 0;
  top: 5px;
}
.clear:active{
  box-shadow: 0 0;
  top: 5px;
}
.sum:active{
  box-shadow: 0 0;
  top: 5px;
}
.footer{
  background-color:0;
  width:100%;
  padding: 20px;}
.sign{
  display:block;
  background-color:0;
  text-align: right;
  color: $gold;
}
.html-badge{
  position: relative;
  display:inline;
  width:165px; 
  height:64px; 
  left:140px;
   
}
.jquery-logo{
  position: relative;
  display: inline;
  height:64px;
  width:150px;
  right:10px;
  bottom:70px;
}
.bs-logo{
  position: relative;
  display:inline;
  bottom: 70px;
  right:220px;
  height: 64px;
}
sub{
  background-color:#fff;
}
.panel-footer sup, .sign sup{
  color :$gold;
  background-color:#000;
  
}
.panel{
  position: relative;
  display: block;
  float: right;
  background-color:#000;
  width: 250px;
  height: 500px;
  margin: 50px 20px 0 0;
  opacity: 0.8;
  text-align: right;
  font-size: 20px;
  font-weight: 900;
  color:$gold;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.panel-heading{
  position:absolute;
  width:100%;
  height:50px;
  text-align: left;
}
.panel-body{
  position:relative;
  float: right;
  top: 50px;
  width:100%;
  height: 400px;
  overflow-y: scroll;
}
.panel-footer{
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 0;
  text-decoration: overline;
  opacity: 0.9;
  background-color:#595959;
}


/*Downloaded from https://www.codeseek.co/UniverSoulSun/a-pen-by-gbe-WrjWKQ */
    $(document).ready();
var num = "",
  num2 = "",
  op = "";
var screen = $(".screen");
var panel = $(".panel-body");
//set screen to 0
screen.text("");
//clear screen and panel
$(".clear").click(function() {
  num = "";
  num2 = "";
  op = "";
  screen.text("0");
  panel.empty();
});
//LISTEN for numbers
$(":input.keys").not(".decimalPoint").click(function() {
  var val = $(this).text();
  if (num == "0" && val == "0") {
    num == "";
    return;
  }
  if (num2 == "") {
    panel.empty();
  }
  num += val;
  screen.text(num);
  testNumLength(num);

});
//LISTEN for operators
$(':input.operator').not(".sum").click(function() {
  if (num == "-" && num2 == "") return;
  if (num == "" || num == "0" || num == "0.") {
    //panel.text("1");
    op = $(this).text();
    //Input a negative value
    if (op == "-" && num.indexOf("-") == -1 && num2 == "" && num !== "0" && num !== "0.") {
      num = op;
      screen.text(op);
      op = "";
      return;
    } else if (num.indexOf("-") == 1) {

      panel.text("Can't touch this!");
      op = "";
      return;
    }
  }
  //Only the first number is entered
  else if (num2 == "") {
    op = $(this).text();
    $(".panel-body").append(num + "<br>");
    num2 = num;
    num = "";
  } else {
    ///////////////////To Allow continuous operations until
    if (op == "+") {

      num2 = (parseFloat(num2, 10) + parseFloat(num, 10)).toString(10);

    } else if (op == "-") {
      num2 = (parseFloat(num2, 10) - parseFloat(num, 10)).toString(10);

    } else if (op == "×") {
      num2 = (parseFloat(num2, 10) * parseFloat(num, 10)).toString(10);

    } else if (op == "÷") {
      num2 = (parseFloat(num2, 10) / parseFloat(num, 10)).toString(10);

    }
    screen.text(num2);
    panel.append(op + "  " + num + "<br>" + num2 + "<br>");
    op = $(this).text();
    num = "";
  };

});
//to SUM it all up
$(".sum").click(function() {
  //test to make sure two numbers where entered
  if (num2 == "") {
    return;
  } else {
    switch (op) {
      case "+":
        num2 = (parseFloat(num2, 10) + parseFloat(num, 10)).toString(10);
        break;
      case "-":
        num2 = (parseFloat(num2, 10) - parseFloat(num, 10)).toString(10);
        break;
      case "×":
        num2 = (parseFloat(num2, 10) * parseFloat(num, 10)).toString(10);
        break;
      case "÷":
        num2 = (parseFloat(num2, 10) / parseFloat(num, 10)).toString(10);
        break;
    }
    panel.append(op + " " + num + "<br>Total = " + num2);
    screen.text(num2);
    num = "";
    num2 = "";
    op = "";
  }
});
//Decimal Point
$(".decimalPoint").click(function() {
  if (num == "") {
    num = "0.";
    screen.text(num);
  } else if (num.indexOf(".") == -1) {
    num += ".";
    screen.text(num);
  }

});
//testing for decimal length
var testNumLength = function(num) {
  if (num.length > 9) {
    screen.text(num.substr(num.length - 9, 9));
    if (num.length > 15) {
      num = "";
      screen.text("Err");
    }
  }
};

Comments