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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                Javascript Calculator
<div id="calculator">
  <div id="display">
    <div id="results">
      <span id="big">0</span>
      <span id="small">0</span>
    </div>
  </div>
  <div id="buttons">
    <div class="four">
      <button class="red" id="clear">AC</button>
      <button class="red" id="erase">CE</button>
      <button class="operation">/</button>
      <button class="operation">*</button>
    </div>
    <div class="four">
       <button class="num">7</button>
      <button class="num">8</button>
      <button class="num">9</button>
      <button class="operation">-</button>
    </div>
    <div class="four">
      <button class="num">4</button>
      <button class="num">5</button>
      <button class="num">6</button>
      <button class="operation">+</button>
    </div>
    <div id="lowest">
    <div id="left">
      <div id="top">
        <button class="num">1</button>
      <button class="num">2</button>
      <button class="num">3</button>
      </div>
      <div id="bottom">
        <button id="zero" class="num">0</button>
        <button id="dot" class="num">.</button>
      </div>
      </div>
      <button id="equals">=</button>
    </div>
  </div>
</div>
</div>
<footer> By: Braulio Salcedo</footer>
              
            
!

CSS

              
                body {
  background-color: grey;
  text-align: center;
  margin-top: 5px;
  font-size: 55px;
  font-family: Calibri;
  color: black;
  font-weight: bold;
}

#calculator {
  width: 450px;
  height: 500px;
  background-color: #c9c9c9;
  margin: auto;
  margin-top: 5px;
  margin-bottom: 13px;
  border: solid black 3px;
  border-radius: 15px;
  box-shadow: 10px 10px;
}

#display {
  width: 400px;
  background-color: #909090;
  height: 95px;
  margin: auto;
  margin-top: 25px;
  border-radius: 15px;
  text-align: right;
}

#calculator, #display {
  display: block;
}

#small {
  display: block;
  margin-top: -10px;
  font-size: 17px;
  color: #474547;

}

#results {
  margin-right: 20px;
  margin-top: -5px;
}

footer {
  clear: both;
  font-size: 25px;
  margin-bottom: 15px;
}

.four button, #top button, #dot {
  width: 90px;
  height: 50px;
  font-size: 25px;
}

#left {
  float: left;
}

#equals {
  float: right;
  width: 90px;
  height: 120px;
  margin-top: 15px;
  margin-right: 24px;
  font-size: 25px;
}

#bottom {
  margin-top: -3px;
}

#zero {
  height: 50px;
  width: 193px;
  font-size: 25px;
}

button {
  border-radius: 15px;
}

button, a { outline: none; }

.red {
  background-color: red;
  color: white;
}

#lowest {
  margin-left: 28px;
}
              
            
!

JS

              
                $(document).ready(function() {
// state = almost done (needs to be fixed for decimal numbers that start with zero - other than that it seems to work just fine from what I've seen)
var total = 0, smallArray, newBig, newSmall, thisText, bigText, smallText, j, last, final, curr,  operations = [], $big = $('#big'), $small = $('#small'), $span = $('span');
// handles number buttons
$('.num').click(function() {
  thisText = $(this).text(); // gets text from big text, small text, and the value of button just clicked
  bigText = $big.text();
  smallText = $small.text();
  if (smallText === "Digit Limit Met") {
    $small.text("0");
    smallText = "0";
  }
  if (!(bigText === "0" && thisText === "0")) { // will only run if the value in calculator is not already zero and the button pressed is not zero
    if ((smallText === "0" && thisText !== ".") || /=+/.test(smallText)) { // handles first instance of entering a value and case in which the '=' has already been pressed (both small and big text will get set to the value entered)
      if (/=+/.test(smallText)) operations = [];
      newSmall = newBig = thisText;
    } else if (bigText === "*" || bigText === "+" || bigText === "-" || bigText === "/") { // handles scenarion in which big text contains an operation symbol (happens after operation button is pressed) / this will set the big text to the new value pressed and will add the value pressed to small text
      if (thisText === ".") {
        thisText = "0" + thisText;
      } 
       newBig = thisText;
      if ((thisText === "." && bigText.indexOf(".")  === -1) || thisText !== ".") {
       newSmall = smallText + thisText;
      }
    } else { //de faault case (same thing happens to small as previous case, if big text is 0 it get sets equal to small, other wise it simply has newest value added on to it (there was some special case that made me realize I needed this, but I do not quite remember what it was)
      if ((thisText === "." && bigText.indexOf(".")  === -1) || thisText !== ".") {
      newSmall = smallText + thisText;
         }
      if (bigText === "0" && smallText === "0") {
       newBig = newSmall;
      } else if (bigText === "0" && smallText !== "0") {
        newBig = smallText.slice(smallText.lastIndexOf(operations[operations.length - 1]) + 1) + thisText;
      } else {
        if ((thisText === "." && bigText.indexOf(".")  === -1) || thisText !== ".") {
        newBig = bigText + thisText;
        }
      }
    }
    checkLength(newBig, newSmall);
   } else {
     if ($small.text() !== "0") $small.text("0"); // handles case in which small text might not be 0 but big text might be (sets small to 0 as well)
   }
});
// handles operation buttons
$('.operation').click(function() {
  smallText = $small.text();
  bigText = $big.text();
  if ((bigText !== "0" || smallText !== "0") && smallText !== "Digit Limit Met" && bigText.charAt(bigText.length - 1) !== ".") {
    thisText = $(this).text();
    if (/=+/.test(smallText)) {
      $small.text(smallText.slice(smallText.indexOf("=") + 1) + thisText);
      $big.text(thisText);
      operations.push(thisText);
    } else if (bigText !== "+" && bigText !== "-" && bigText !== "*" && bigText !== "/") {
      $small.text(smallText + thisText);
      $big.text(thisText);
      operations.push(thisText);
    }
  } 
});
// handles AC button
$('#clear').click(function() {
  $span.text("0");
  operations = [];
});
// handles '=' button
/* old way I used - obsolete but worth keeping for learning purposes
$('#equals').click(function() {
  smallText = $small.text();
  if (smallText !== "0" && !/=+/.test(smallText)) {
  bigText = $big.text();
  if (bigText !== "*" && bigText !== "+" && bigText !== "-" && bigText !== "/") {
  smallArray = smallText.split(/[\+\/\x\-]/);  
  if (smallText.charAt(0) !== "-") {
    final = Number.parseFloat(smallArray[0]);
  } else {
    smallArray.splice(0, 1);
    final = Number.parseFloat("-" + smallArray[0]);
  }
  j = 0;
  for (var i = 1; i < smallArray.length; i++) {
    curr = Number.parseFloat(smallArray[i]);
    switch (operations[j]) {
      case "+":
        final += curr;
        break;
      case "-":
        final -= curr;
        break;
      case "*":
        final *= curr;
        break;
      default:
        final /= curr;
        break;
    }
    j++;
  }
  newSmall = smallText + "=" + final;
  checkLength("" + final, newSmall);
  operations = [];
  }
  }
});
*/
$('#equals').click(function() {
  smallText = $small.text();
  if (smallText.charAt(smallText.length - 1) !== ".") {
  final = eval(smallText);
  checkLength(final, smallText + "=" + final);
  }
});
// checks length of small/big text in order to see if it is outside limits (13 for big text and 43 for tiny text) - this method does the actual changing of the text
function checkLength(big, small) {
  if (big.length > 13 || small.length > 43) {
       $big.text("0");
       $small.text("Digit Limit Met");
      } else {
        $big.text(big);
        $small.text(small);
     }
}
// handles CE button
$('#erase').click(function() {
  smallText = $small.text();
  if (!/[\-\*\/\+]+/.test(smallText)) {
    $('#clear').trigger('click');
  } else if (/[=]+/.test(smallText)) {
    smallText = smallText.slice(0, smallText.indexOf("="));
    $small.text(smallText);
    $big.text(smallText.slice(smallText.lastIndexOf(operations[operations.length - 1]) + 1));
  } else {
    last = smallText.charAt(smallText.length - 1);
    if (last === "*" || last === "+" || last === "-" || last === "/") {
      $small.text(smallText.slice(0, smallText.lastIndexOf(last)));
      $big.text("0");
      operations.pop();
    } else {
      $small.text(smallText.slice(0, smallText.lastIndexOf(operations[operations.length - 1]) + 1));
      $big.text(operations[operations.length - 1]);
    }
  }
});
});
              
            
!
999px

Console