cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="calculator-container div-center">
      <div class="header section">
        <span class="title">BASIC CALCULATOR</span>
      </div>
      <div class="display section">
          <div class="result">0</div>
          <div class="history">0</div>
      </div>
      <div class="buttons section">
          <button value="c" class="clear reset">C</button>
          <button value="ce" class="clear clear-entry">CE</button>
          <button value="z" class="surprise">?</button>
          <button value="÷" class="operator">÷</button>
          
          
          <button value="7" class="digit">7</button>
          <button value="8" class="digit">8</button>
          <button value="9" class="digit">9</button>
          <button value="x" class="operator">x</button>
          
          

          <button value="4" class="digit">4</button>
          <button value="5" class="digit">5</button>
          <button value="6" class="digit">6</button>
          <button value="-" class="operator">-</button>
          

          <button value="1" class="digit">1</button>
          <button value="2" class="digit">2</button>
          <button value="3" class="digit">3</button>
          <button value="+" class="operator">+</button>
          
          
          <button value="0" class="digit wide">0</button>
          <button value="." class="digit">,</button>
          <button value="=" class="operator">=</button>
      </div>
      <div class="footer section">
        <span>Created by <a href="http://balach.de" target="_blank">Balach</a></span>
      </div>
    </div>
            
          
!
            
              html {
  height: 100%;
}

body {
  background-color: rgba(245, 245, 245, 0.75);
  font-family: 'Josefin Sans', sans-serif;
  font-size: large;
  color: rgb(52, 52, 52);
  text-shadow: rgba(115, 111, 111, 0.55) 0px 0px 4px;
}

.div-center {
  text-align: center;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
}

.calculator-container {
  width: 20rem;
}


.display {
  background-color: rgba(70, 66, 66, 0.94);
  color: rgb(245, 245, 245);
  border: 5px solid rgba(158, 158, 158, 0.1);
  border-radius: 2px;
  width: 16.5rem;
  margin-left: 1.5rem;
  height: 3rem;
  margin-bottom: -0.8rem;
  transition: all 1s;
}
.display.magic {
  width: 18.5rem;
  height: 3.5rem;
  margin-left: 0.5rem;
}

.result {
  font-size: xx-large;
  text-align: right;
  margin-left: 10%;
  margin-right: 8%;
}

.history {
  font-size: small;
  text-align: right;
  margin-left: 10%;
  margin-right: 10%;
}

.section {
  margin-top: 1rem;
  margin-top: 1rem;
}

.title {
  font-weight: bolder;
  font-size: larger;
}

button {
  color: rgba(10,10,10, 0.7);
  font-size: x-large;
  font-weight: 600;
  box-shadow: #56534d 1px 1px;
  border-bottom: 2px solid #56534d;
  width: 4rem;
  height: 4rem;
  background-color: rgb(220, 218, 218);
  border-radius: 4px;
  transition: all 1s;
}
button:focus {
  outline: 0;
}
.surprise {
  color: #CDDC39;
  background-color: #607D8B;
}
button.magic {
  margin: 0.3rem;
  border-radius: 50%;
}

button.wide {
  width: 8.3rem;
}

button.clear {
  background-color: rgba(212, 65, 18, 0.9);
}

button.operator {
  background-color: rgb(255, 152, 0);
}

.footer {
  margin-top: 2rem;
}
            
          
!
            
              // Set up global variables
var calculator = {
  "entry": "0",
  "entries": [],
  "total": 0,
  "history": "0",
  "realHistory": "0",
  "lastOperand": "",
  "operations" : {
    "+" : function(a,b) {
      return  parseFloat(parseFloat(a) + parseFloat(b));
    },
    "-" : function(a,b) {
      return parseFloat(parseFloat(a) - parseFloat(b));
    },
    "x" : function(a,b) {
      return parseFloat(parseFloat(a) * parseFloat(b));
    },
    "÷" : function (a,b) {
      if (parseFloat(b) == 0) {
        alert("Division by Zero is not cool.");
        return parseFloat(a);
      } 
      return parseFloat(parseFloat(a) / parseFloat(b));
    },
    "=" : function() {
      return true;
    }
  },
  "updateView" : function(){
    console.log("Updating Display");
    $(".result").html(calculator.total);
    $(".history").html(calculator.history);
  },
  "clearEntry" : function() {
    console.log("Clearing Entry");
    calculator.entry = "0";
    calculator.history = calculator.realHistory;
    op = "";
    calculator.updateView();
  },
  "reset" : function(){
    console.log("Reseting Everything");
    calculator.entry = "0";
    calculator.entries = [];
    calculator.total = 0;
    calculator.history = "0";
    calculator.realHistory = "0";
    calculator.lastOperand = "";
    calculator.updateView();
  }
};

// Start the engines
$(document).ready(function() {

  $("button.surprise").on("click", function(){
    $("button").toggleClass("magic");
    $(".display").toggleClass("magic");
  });
  $("button.digit").on("click", function(){
    var digit = $(this).val();
    calculator.entry += digit;
    calculator.history += digit;
    calculator.updateView();
    $(".result").html(calculator.entry);
  });
  $("button.reset").on("click", function(){
    calculator.reset();
  });
  $("button.clear-entry").on("click", function(){
    calculator.clearEntry();
  });
  $("button.operator").on("click", function(){
    var op = $(this).val();
    var dontRecord = false;
    if (calculator.operations.hasOwnProperty(op)) {
      if (calculator.entries.length <= 1 && calculator.lastOperand === "") {
        if (calculator.entries[0] !== calculator.total) {
          calculator.entries[0] = parseFloat(calculator.entry);
          calculator.entry = "0";
        }
      }
      else if (calculator.lastOperand !== "") {
        if (calculator.entries.length === 1 && calculator.entry !== "0") {
          calculator.entries[1] = parseFloat(calculator.entry);
          calculator.total = parseFloat(calculator.operations[calculator.lastOperand](calculator.entries[0], calculator.entries[1]).toFixed(3));
          calculator.entries = [calculator.total];
          calculator.entry = "0";
        }
        else if (calculator.entry === "0") {
          console.log("Hit operation with out entry", calculator.realHistory, op, calculator.history);
          dontRecord = true;
        }  
      }
      if (op !== "=") {
        calculator.lastOperand = op;
        if (!!dontRecord) {
          calculator.history = calculator.history.slice(0, -1);
        }
        calculator.history += op;
      }
      else if (op === "=") {
        calculator.lastOperand = "";
        calculator.history = calculator.total;
      }
      calculator.realHistory = calculator.history;
      calculator.updateView();
    }
  });
});
            
          
!
999px
Loading ..................

Console