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 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

              
                <div class = "container">
  
  <div class = calcWrap>
  <div class = "row justify-content-center">
    <div class = "display col-md-3 col-xs-10 text-right">
      
    </div>
  </div>
  <div class = "row justify-content-center">
    <div class = "col-md-4 text-center first">
      <h1 id = "keyDisplay">0</h1>
      <p id = "trailDisplay">0</p>
      <div class = "btn-group btn-group-lg">
        <button class = "btn btn-outline-danger" id ="resetAll"><span class = "btnFontAdj">AC</span></button>
        <button class = "btn executer btn-outline-danger" id ="resetLastOne">&lt;</button>
        <button class = "btn operator btn-outline-primary" id="/">&divide;</button>
        <button class = "btn operator btn-outline-primary" id="*">&times;</button>
      </div>
    </div>
   </div>
   <div class = "row justify-content-center">
    <div class = "col-md-4 text-center">
      <div class = "btn-group btn-group-lg">
        <button class = "btn num btn-outline-primary" id="7">7</button>
        <button class = "btn num btn-outline-primary" id="8">8</button>
        <button class = "btn num btn-outline-primary" id="9">9</button>
        <button class = "btn operator btn-outline-primary" id="-">&minus;</button>
      </div>
    </div>
   </div>
    <div class = "row justify-content-center">
     <div class = "col-md-4 text-center">
      <div class = "btn-group btn-group-lg">
        <button class = "btn num btn-outline-primary" id="4">4</button>
        <button class = "btn num btn-outline-primary" id="5">5</button>
        <button class = "btn num btn-outline-primary"id="6">6</button>
        <button class = "btn operator btn-outline-primary"id="+">&plus;</button>
      </div>
    </div>
   </div>
    <div class = "row justify-content-center">
     <div class = "col-md-4 text-center">
      <div class = "btn-group btn-group-lg">
        <button class = "btn num btn-outline-primary" id="1">1</button>
        <button class = "btn num btn-outline-primary"id="2">2</button>
        <button class = "btn num btn-outline-primary"id="3">3</button>
        <button class = "btn executer btn-outline-success"id="=">&equals;</button>
      </div>
    </div>
  </div>
  <div class = "row justify-content-center">
     <div class = "col-md-4 text-center last">
      <div class = "btn-group btn-group-lg">
        <button class = "btn num btn-outline-primary" id=".">.</button>
        <button class = "btn num btn-outline-primary"id="0">0</button>
        <!--<button class = "btn nothing btn-outline-secondary">7</button>-->
      </div>
     </div>
    </div>
   </div>       
</div>

              
            
!

CSS

              
                body{
  background-color: #c0c0c0;
}
.container{
/*   background-color: #121f1f; */
  background-color: #c0c0c0;

}
.col-md-4 {
  background-color: white;
}
.btn-group{
  margin: 5px 40px 5px 5px;
}

.btn-group button{
  padding: 1%;
  margin: 0 3% 0 3%;
}
.btn-group button:hover{
  cursor: pointer;
}
.btnFontAdj{
  font-size: 40%;
}
.first {
  margin-top: 2%;
  border-radius: 10px 10px 0 0;
}
.last {
  margin-bottom: 2%;
  border-radius: 0 0 10px 10px;
}
.first h1, .first p {
  color: black;
/*   margin-right: 15%; */
}
.first {
  word-wrap: break-word;
}










              
            
!

JS

              
                var allInputs = [];
//For storing the answer and adding to the end of the user trail.
var currAnswer = 0;
//If a user clicks CE I have this to separate the popped value from the remaining array.
var popped = "";
//Checking for duplicate ++ -- // etc..
var operators = "+-/*";
//Checking for numbers
var nums = "123456789";
//Checking for duplicate "."
var decimalCount = 0;
//to determine whether we are first sequence or not.
var evaluated = false;

function resetter () {
  allInputs = [];
  currAnswer = 0;
  popped = "";
  decimalCount = 0;
  evaluated = false;
  $("#trailDisplay").html("0");
  $("#keyDisplay").html("0");
}

function update (inputs) {
  $("#trailDisplay").html(inputs.join(""));
} 

function round(value, decimals) {
  return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
}

function evaluate (currInputs) {
    currAnswer = eval(currInputs.join(""));
  
    if (currAnswer % 1 != 0) {
      currAnswer = math.format(currAnswer, {precision: 14});
    }
  
    $("#keyDisplay").html(currAnswer);
    allInputs.push("=");
    allInputs.push(currAnswer);
    update(allInputs);
    allInputs = [currAnswer]; //So a user can continue to chain math from their last answer
    evaluated = true;
    decimalCount = 0;
}

$("button").on('click',function() {
  //A operator or = is not a valid first input
  if (allInputs.length === 0 && (operators.indexOf(this.id) > -1 || this.id === "=" || this.id === "0")) {
    console.log("'+-/*=0' are not valid first inputs.");
  //Reset everything if they hit reset
  } else if (this.id ==="resetAll") {
    resetter();
  //Reset the last input user entered
  } else if (this.id === "resetLastOne") {
    popped = allInputs.pop();
    allInputs.length === 0 ? update([0]) : update(allInputs); //update[0] so trailDisplay still shows 0 instead of blank.
  } else if (this.id === "=") {
    if (allInputs.length < 3 || operators.indexOf(allInputs[allInputs.length - 1]) > -1 || allInputs[allInputs.length - 1] === ".") {
      console.log("Can't evaluate, can't end in an operator, has to have at least 3 charactars, can't end in decimal")
    } else {
      evaluate(allInputs);
    }
  } else {
     if (operators.indexOf(allInputs[allInputs.length - 1]) > - 1 && operators.indexOf(this.id) > -1) {
         //change the operator for the user
         allInputs[allInputs.length-1] = this.id;
         update(allInputs);
     } else if (allInputs[allInputs.length - 1] === "." && operators.indexOf(this.id) > -1) {
       console.log("Can't have 2 '+-/*' in a row or a '.' and any '+-/*' in a row");
     } else {
         if (this.id === ".") {
           decimalCount++; //trying to see if user hits 2 .'s in a row or 2 within a string of numbers.
         }
         if (operators.indexOf(this.id) > - 1) {
           decimalCount = 0; //they hit an operator so we can start over the err checking
         }
         if (this.id === "." && decimalCount > 1) {
           console.log("Can't have 2 '.' in a row or 2 '.' in a number.");
         } else if (nums.indexOf(this.id) > -1 && evaluated || this.id === "." && evaluated) {
           //If its our second time through and user next input is a number or '.', then we aren't chainging off original answer anymore. 
           allInputs[0] = [this.id];
           update(allInputs);
           $("#keyDisplay").html("0");
           evaluated = false;
         } else {
           allInputs.push(this.id);
           update(allInputs);
           evaluated = false;
         }
     }
  } 
});
              
            
!
999px

Console