Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .container
.screen-container.mb-3
  .screen
    .output.d-flex.align-items-end.px-3
      #output.d-flex.flex-column.text-right
        span#inputLine
.keys
  #keysContainer.container.d-flex.flex-row.flex-wrap.justify-content-center
    button.btn.btn-calc.order-0 id="1" 1
    button.btn.btn-calc.order-1 id="2" 2
    button.btn.btn-calc.order-2.mr-3 id="3" 3
    button.btn.btn-calc.order-3.btn-fnc id="/" = "/"
    button.btn.btn-calc.order-7.order-sm-4.btn-fnc id="*" &times;
    button.btn.btn-calc.order-11.order-sm-5.btn-fnc id="-" -
    button.btn.btn-calc.order-4.order-sm-6 id="4" 4
    button.btn.btn-calc.order-5.order-sm-7 id="5" 5
    button.btn.btn-calc.order-6.order-sm-8.mr-3 id="6" 6
    button.btn.btn-calc.order-17.order-sm-9.btn-fnc id="c" c
    button.btn.btn-calc.order-15.order-sm-11.btn-fnc id="+" +
    button.btn.btn-calc.order-16.order-sm-10.btn-fnc id="Backspace" style="font-size: 1.2em" 			&#9003;
    button.btn.btn-calc.order-8.order-sm-12 id="7" 7
    button.btn.btn-calc.order-9.order-sm-13 id="8" 8
    button.btn.btn-calc.order-10.order-sm-14.mr-xs-3 id="9" 9
    button.btn.btn-calc.order-12.order-sm-15.mr-3 id="0" 0
    button.btn.btn-calc.order-13.order-sm-16.btn-fnc id="." .
    button.btn.btn-calc.order-14.order-sm-17.btn-fnc id="Enter" = "="
              
            
!

CSS

              
                body {
  background-color: #222;
  height: 100vh;
}
.screen-container {
  width: 100%;
  height: 70%;
}
.screen {
  width: 423px;
  height: 100%;
  position: relative;
  box-sizing: padding-box;
  padding-top: 20px;
  font-family: 'VT323', monospace;
  font-size: 2em;
  margin: 10px auto 0 auto;
  border-radius: 10px;
  background-color: #dfe;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzMwMCcgdmlld0JveD0nMCAwIDIwMCAzMDAnPgoJPGZpbHRlciBpZD0nZnV6eicgeD0nMCcgeT0nMCc+CgkJPGZlVHVyYnVsZW5jZSB0eXBlPSd0dXJidWxlbmNlJyBiYXNlRnJlcXVlbmN5PScwLjInIG51bU9jdGF2ZXM9JzEwJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+Cgk8L2ZpbHRlcj4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNmdXp6KScgb3BhY2l0eT0nMC4xNScvPgo8L3N2Zz4=);
  border: 5px inset #555;
}
div.output {
  position: absolute;
  width: 100%;
  bottom: 10px;
  right: 0;
  height: calc(100% - 20px);
  overflow: hidden;
}
div.output > div {
  width: 100%;
  max-width: 100%;
/*   overflow: hidden; */
}
  
div.output > div > span {
  color: #000;
  opacity: .7;
  font-size: 1.5em;
  line-height: 1em;
  min-height: 1em;
  overflow-wrap: break-word;
}
div.output span.old-output {
  opacity: .3;
  font-size: .8em;
  direction: ltr;
}
.keys > .container {
  width: 436px;
}
.btn-calc {
  padding: 0 .2em .2em 0;
  margin: 1px;
  color: rgba(255,255,255,.9);
  text-shadow: 0 0 8px #000;
  position: relative;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  font-size: 2em;
  width: 58px;
  height: 58px;
  background: url('data:image/png;base64,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') no-repeat;
}
.btn-calc:before {
  position: absolute;
  content: "";
  top: 5%;
  left: 5%;
  width: 80%;
  height: 80%;
  z-index: 2000;
  opacity: 0;
  border-radius: 5%;
  background-color: rgb(0,0,0);
}
.btn-calc:hover:before {
  opacity: .1;
}
.btn-calc:active,
.btn-calc:focus {
  box-shadow: none;
}
/*.btn-calc:focus {
  background:   url('data:image/png;base64,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') no-repeat;
} */
.btn-fnc {
  padding: 0 .2em .4em 0;
  line-height: 0;
}
/* .mr-xs-3 {
  margin-right: 0 !important;
} */
.order-sm-11 {
  order: 11;
}
.order-sm-12 {
  order: 12;
}
.order-sm-13 {
  order: 13;
}
.order-sm-14 {
  order: 14;
}
.order-sm-15 {
  order: 15;
}
.order-sm-16 {
  order: 16;
}
.order-sm-17 {
  order: 17;
}

@media (max-width: 576px){
  .screen-container {
    height: 55%;
  }
  .screen {
    width: 90%;
  }
  .keys > .container {
    width: 310px;
  }
  .mr-xs-3 {
    margin-right: 1rem !important;
  }
  .order-1 {
    order: 1;
  }
  .order-2 {
    order: 2;
  }
  .order-3 {
    order: 3;
  }
  .order-4 {
    order: 4;
  }
  .order-5 {
    order: 5;
  }
  .order-6 {
    order: 6;
  }
  .order-7 {
    order: 7;
  }
  .order-8 {
    order: 8;
  }
  .order-9 {
    order: 9;
  }
  .order-10 {
    order: 10;
  }
  .order-11 {
    order: 11;
  }
  .order-12 {
    order: 12;
  }
  .order-13 {
    order: 13;
  }
  .order-14 {
    order: 14;
  }
  .order-15 {
    order: 15;
  }
  .order-16 {
    order: 16;
  }
  .order-17 {
    order: 17;
  }
}


              
            
!

JS

              
                var pressedBtn,
    raisedBtn;

$(document).ready(function() {
  var keysContainer = $("#keysContainer"),
    output = $("#output"),
    inputLine = $("#inputLine"),
    input,
    calcString,
    evalString,
    calcStep,
    currentKey,
    keyTestScope,
    keyGroups = ["/*", "*/", "-+", "+-"];

  // Sets the initial #output element contents and variable values.
  function calcStart() {
    inputLine
      .empty()
      .siblings().remove();

    input = "";
    calcString = "";
    evalString = "";
    calcStep = 0;
    currentKey = "";
    keyTestScope = "digits&-";
  }

  // Test if input matches calculator keys ("=" == enter, "<" == delete).
  function calcKeyTest(key, scope) {
    switch (scope) {
      case "all":
        return (
          /^[\d\/\*\-\+\.=c]$/.test(key) ||
          key == "Backspace" ||
          key === "Enter"
        );
        break;
      case "digits":
        return /^[\dc]$/.test(key);
        break;
      case "digits&-":
        return /^[\d\-c]$/.test(key);
        break;
      case "/*-+":
        return /^[\/\*\-\+c]$/.test(key);
        break;
    }
  }

  // Appends the typed input + pressed function key to the #calcLine span.
  function updateCalcLine(key) {
    calcString += " " + input + " " + key;
    $("#calcLine").text(calcString);
  }

  // Inserts a new #calcLine span above the #inputLine span and, if a #calcLine span already exists, appends the current input to its text value and removes its id attribute.
  function newCalcLine(key) {
    if ($("#calcLine").length)
      $("#calcLine")
        .text(calcString + " " + input)
        .removeAttr("id");

    calcString = "";
    inputLine.before($('<span id="calcLine" class="old-output">'));
    updateCalcLine(key);
  }

  function handleEquals() {
    evalString += input.toString();
    evalString = evalString.includes("--") ? evalString.replace(/--/g, "+") : evalString;
    
    evalString = eval(evalString);
    input = evalString;
    inputLine.text(input);

    keyTestScope = "/*-+";
    calcStep = 0;

    return evalString;
  }

  function handleCalc(key) {
    evalString = input.toString() + key;
    input = "";

    currentKey = key;

    ++calcStep;
    keyTestScope = "digits&-";
  }
  
  function pressButton(that){
    $(that).css("background", "url(" + pressedBtn + ") no-repeat");
  }
  
  function raiseButton(that){
    setTimeout( function(){$(that).css("background", "url(" + raisedBtn + ") no-repeat")}, 300 )
  }

  function handleInput(key) {

    if(key.trim() === "×") key = "*";
    if(key.trim() === "⌫") key = "Backspace";
    
    if (!calcKeyTest(key, keyTestScope)) return;

    keyTestScope = "all";

    if (key === "-" && !input.toString().length) {
      input = "-";
      inputLine.text(input);
      keyTestScope = "digits";
      return;
    }
    
    var that = document.getElementById(key);
    pressButton(that);
    raiseButton(that);

    switch (key.trim()) {
      case "Enter":
        if (calcStep < 1) return;

        updateCalcLine("=");
        handleEquals();
        break;
      case "+":
      case "-":
      case "*":
      case "/":        
        if (calcStep < 1) {
          newCalcLine(key);
          handleCalc(key);
        } else {
          if (currentKey === key || keyGroups.indexOf(currentKey + key) >= 0) {
            updateCalcLine(key);
            handleEquals();
            handleCalc(key);
          } else {
            updateCalcLine("=");
            handleEquals();
            newCalcLine(key);
            handleCalc(key);
          }
        }
        break;
      case "Backspace":
        input = input.substr(0, input.length - 1);
        inputLine.text(input);
        break;
      case "c":
        calcStart();
        break;
      default:
        if (key === "." && input.includes(".")) return;

        input += key;
        inputLine.text(input);
    }
  }

  calcStart();

  $(document).keydown( function(e){ handleInput(e.key); } );

  keysContainer.on("mousedown", "button", function() {
    pressButton(this);
    
    var key = this.innerHTML;

    switch (key) {
      case "&lt;":
        handleInput("Backspace");
        break;
      case "=":
        handleInput("Enter");
        break;
      default:
        handleInput(key);
    }
  });

  keysContainer.on("mouseup mouseleave", "button", function(e) {
    raiseButton(this)
  });
});

pressedBtn =
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAlVSURBVGhD1ZqLdtvGEYYXBClKlus6dXzsvEbrxE3sXHp6TtP3fwnf7caSLIkEiMw3ix8YwqBIS8yp8vv83sXs7lx2dhcghOL5T983Jycnqa7rdHl5mZbLZQJN0ziLokiTycRlAnIh1iPW5ZNWB2XqdMKiyDY+nZ/5mNWqaseuun5FUfrY1BQugyDawP+Dg4N09+5dLxk3m81S8fT7J8379+8TJDgGZaWFDwLUyxIjmxGNxTpozDF04qScU2CUYFktfFzT1O34HGBmaeOnXYCC7FCuViuv37lzJ02n1tdw7969VHz79O/Nmzdv0suXL7uA6IAiBsGodBOGE7AeZA4O5CD6QCjBwXy2JreeZjdPLgHWtV23OgTpAkzgYrE030uX1fUqffPNY+QEU1rDgTk5yzPVOcQymjrJQmTss53Z0TFILke5xtnJpM2WZVhBa8KHJDH0RYX0rfK8pQkznxVmRzRA5Brl9LuK6l9VlXPsWrpwgjGsFMieUX8ylR1nX1kmqlz2gWvv5gnQNWOIDV0s0/nhNO/Bf/74tHn79q0vUQ6Zo4N5Ojw89P2IQTp5ln2C+z0kaOblPKCMdWA+dEBHNy712fFrU9807bYocmlTmKa2umi0kNf7S3/ZnhNmiDgY9+jRIztknn/nAb548cKD+sud43T//v0uEAIksLLIyw3lYp7pHJg2NuA6lkCHifSqjQABk+mlhZDb+rG2xrLzIcCObR/zxnXXJjs9PU1VvUgPHz5MxXfPvu0CxMjf/nrfG46Ojrrlx2QpQFdmShSYSpbG1fj8sPLxbYDurLGy7OV6vyIskT62aGyC2wCFGCDyS0vSu3fv0tmnk/TgwQM7RX944qcoZK8Q4OPHj9Px8bFnhfVdVSsWpxkps6GWEfTbBPrqtIzjcEgBAq4JMK+MPlOTph3D+iXaCOlrV8jFYpFevXqV/vfbe1+JE2VAht2oycim2kA+ANZl2uBkGdlNqEmLHGLYju1YkhC2FKuJurehPM9YPzMyKpkUQIF2BaxS9SHjKTpsEzU+EhuyJcg3UbLYX5NO6QGqA9C+A2oD3YA2WCH2AWNtao/9Yh0Mg9KEwmgz6gdRT9RBP/eZCxFFpJYGOtBZMwyQiQpWjG1wiKFcdZXRUUFjhn2HYyijTNdwwnqNygmGJUVwyibtMVhRszWkICNwW79NUF/1ieXYOHznDkCb38MRxo4aOJTF8s+EydDpYXBCDHKs/f+NmOW4QrqblzoM9xMYXoNYv03ALwVIvTtk1OjCNsgoi7yNUEAgnqTdfVBBxlNxDLc1SPkPqHcBxuDk/DCATfLbBvmnAMHaEp3Yw2z3/iNQP5X+CAynbNInooc5sOvUyuvGnluJZ8JvLf7xzMvTerWwe9xylWbloTPV9qOx4Ddhfvzxp4PBEh7LrDIu2nE9Tl5EtHXXYpNdrIyUxhK50XVa9Jv0zmfzdPHpwsvGfiDPeBPBP2XQ3Hcl3RxYsLCwJ3kCz/LNkJ6riONjcvvV2mrJ2DVbm4BO6XCv3YghzgxwB1if7fVNwa+dIfglBAU8WQ93NygG4H63190pauZzypWo+LvL6+F6BFJ6Xe4DMTE5JguQF608V/ostm+yuo6+MT//JT4GjbsubwqCkq61216OtvKL9ZexfaddIOXX5TZ8SY7XMshLHl4TdOCctkzm4AiSn0pWWiavYh43zn7iLJABJbeea0HgkSiozxh5u6Z6bcHpeu1o7JwYqM6y68MPkra+CRz1ugUNEYO8CmN+Ts7Pz73SMNt2p2C2yR5Occ+HdZOXsMs9s1lZvB9SbqP9NyrraCDIVPK4mH90g2iXo9ilXLdUm7/otTFc64XZhpvb+pzJwFW8DdDhosnzFWGinK1W2LD/jDlIBuQ9uLJ9dl3GCfPlGuiywQSxmD4D+7itbgJnicg9F/opCrTc4BA3zRCGFMw2NLVNBlm4xuMaIIuQW19VVdwHyZAFwGI10g/ydFbbzMOV3zZujrEgh083tp68HOm6FSQi3gM9eC7ibIxhlwxq5q7DIbB2nSmNgbH//KVTFK4Fyd4RDWOORaJnE1kc+V443v5HQLF0AQIF1wVpUPtYUJHRYXFacEybobDguM1F0mcNwfaXQn7LPvuw0677Bk8xnKzsdbiyjcM18kjNkCjY3cuJ4wSuzb8rJsOAA7blupyZ5ZI/ofnJ4aXZzw4oC8KY818C6fJym2cB+CFQEwVUbWSbOSDffboQxqV20+AiFvYUdNks00W9cC5sViMvV0un2iu7DTRTc8uyUdohMZ3O7MCYWmaMU8tQSw6QSFZgDE6PfJ7BGByIAcJdsKnvNj3b2oe4qi/+Q39EE+msBiHWwa7GQXTgS/Xc1I7iQM5tgrLLoDrfBPvQsQvG7BCYVqGy1wUooQbGzmAXxzf12aZnX3YAeiB9ugDbNr/QYBn8syLGMtHf+ShZt/y9kOglJ1hKDVL6RcZAzd6Q2/Tsy47IpzAXFxfedz6f5wyigEaM6QMgjNCJNurIIE/oqusaygBQCbbp2ZcdgB59fMBkwbVnUeoIgQxKrjoUooz+clSlqD5jera1gyiL+od2FBxULJ5BZkgNmgUG0Ik2ygj1FWJ9iG169mUHoIsse2BWd/0xpRigTpBRJidE5GrTdZTHtm169mUHAvYf0LcyEz684ytZgmIAe1D7kGuAEwJ1UYiyIbfp2ZcdSPYWi4UfLnyp5Yl68uwfzYcPHxKfNdNJAfOlAjMqxfa/1wVbAG0tI/cxeVhlzCrPmVfpqetqL3Ygz7KvX7/2zyn53s5X5/N/P2t4dfjx48dEyYzS4fhu/hjPl8GKTdtqa8FbDBkDygLAOK8ieK/Ci2WMT2dzt8H3Y9pv2Dk5/c0DhOjDZj4xlz7ZyM7OzryODYhMk+L+mS5tKz7N5iO8r75+kOrFMhU//+cnd/3T+akb7pdnfyTzhe+0nHugUijKKGte9QaaTntMSkXrOHJAXcyCXp/k+TrL1/oa1Bd43/a3KfpZmqw8JqOcWfZIwi+//mz9mzQ7yF/tVtWim+FM6kU6mB13AQrqg4wxEXJKJVkRGNOhfSVCBoA77TqzDxovW3Gst5V95lmSBKZsep9//fcXH3F4lDNQ18suCCkjwFVthn2pZhkKINf012kclxuIDqkv7ORtgPymA73OfPh0dni9YMhro7ff2bJABbfh/VL6HdPL76R7swrtAAAAAElFTkSuQmCC";
raisedBtn = "data:image/png;base64,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";
              
            
!
999px

Console