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

              
                <!DOCTYPE html>
<html>
  <head>
  <meta name="viewport", content="width=device-width" initial-scale="1">
  <head>
  <div class="calculator">
    <div class="input" id="display">0
    </div>
    <div class="button">
      <div class="operators">
        <div id="add">+</div>
        <div id="subtract">-</div>
        <div id="multiply">&times;</div>
        <div id="divide">&divide;</div>
      </div>
      <div class="leftPanel">
        <div class="numbers">
          <div id="seven">7</div>
          <div id="eight">8</div>
          <div id="nine">9</div>
        </div>
        <div class="numbers">
          <div id="six">6</div>
          <div id="five">5</div>
          <div id="four">4</div>
        </div>
        <div class="numbers">
          <div id="three">3</div>
          <div id="two">2</div>
          <div id="one">1</div>
        </div>
        <div  class="numbers">
          <div id="decimal">.</div>
          <div id="zero">0</div>
          <div class="clear" id="clear">C</div>
        </div>
      </div>
      <div class="equals" id="equals">=</div>
    </div>
  </div>
    <br/>
    <p class="text-center">Designed by Linda Aluso</p>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

</html>
 
              
            
!

CSS

              
                
  body {
    font-family:sans-serif;
    font-size: 2.0em;
    letter-spacing:5px;
    width: 500px;
    margin: 5% auto;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;     
}
.calculator {
    padding:20px;
   border-radius:1px;
  -webkit-box-shadow:0 1px 4px 0 rgba(0,0,0 0.2);
    box-shadow: 0 1px 4px 0 rgba(0,0,0 0.2);
    
}
.input{
  height:60px;
  border:1px solid #b9b9b9;
  border-radius:5px;
  padding-top:10px;
   padding-right:15px;
    margin-right:6px;
    font-size: 15px;
   text-align:right;
  overflow-x:auto;
  transition:all .2s ease-in-out;
    
}
.input:hover{
  border: 1px solid #bbb;
  -webkit-box-shadow:  inset 0 1px 4px 0 rgba(0, 0, 0, 0.25)
   box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.25)
}
.button {}
.operators{}
.leftPanel{
  display:inline-block;
}
.operators div, .numbers div {
  display:inline-block;
  border:1px solid #bbb;
  cursor:pointer;
  width:100px;
  font-size:20px;
  padding:10px;
    margin:20px 4px 10px 0;
  text-align:center;
    
}
.operators div{
  background:#ddd;
}
.operators div:hover, .numbers div:hover{
  background:red;
    border colour: #fff;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
  
}
operators div:active, .numbers div:active{
  font-weight:bold;
  
}
div.equals {
  display:inline-block;
  vertical-align: top;
  width: 20%;
  background:#4d90fe;
  color:#ddd;
  padding:127px 10px;
  margin: 10px 6px 10px 0;
  border:1px solid #c9c9c9;
  text-align:center;
  cursor:pointer;
 transiton: all.2s ease-in-out;
}
div.equals:hover {
  border: 1px solid #d6d6d6;
  border colour: #ddd;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0,0.2);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
}
div.equals:active {
  font-weight:bold;
}

              
            
!

JS

              
                //jQuery used to build the project
$(document).ready(function(){
   //Stores the inputs from user to calculate later
  var inputs=[""];
  //String to store current input string
  var totalString;
 //Operators array for validation without .
  var operators1 = ["+","-","&divide;","&times;"];
 //operators array for validation with .
  var operators2 = ["."];
  //Numbers array for validation
  var nums=[0,1,2,3,4,5,6,7,8,9];
  //Adds value to inputs array and checks validation
  function getValue(currVal){
     if(operators2.includes(inputs[inputs.length-1])===true && currVal==="."){
    console.log("Duplicate '.'");
  }
      //Validation so it doesn't start with an operator
    else if(inputs.length===1 && operators1.includes(currVal)===false){
      inputs.push(currVal);
    }
    //If last character was not an operator add operator to the array
  else if(operators1.includes(inputs[inputs.length-1])===false){
    inputs.push(currVal);
  }
    else if(nums.includes(Number(currVal))){
      inputs.push(currVal);
    }
    update();
  }
  function update(){
    totalString= inputs.join("");
    $("#display").html(totalString);
    console.log(inputs);
  }
  function getTotal(){
    totalString = inputs.join("");
    $("#display").html(eval(totalString));
  }
  
  $(".button").on("click", function(){
    if(this.id==="deleteAll"){
      inputs = [""];
      update();
    }
    else if(this.id==="backOne"){
      inputs.pop();
      update();
    }
    else if(this.id==="total"){
      getTotal();
    }
    else{
      
      //error1
      if(inputs[inputs.length-1].indexOf("+","-","&divide;","&times;",".")===-1){
        getValue(this.id);
      }
      else {
        getValue(this.id);
      }
    } 
  });
  
});
/*
$(document).ready(function(){
 //storing current variables and characters to be used later
  var inputs=[""];
  var totalOutput;
  var nums=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  var operators1=["+", "-", "&times;", "&divide;"];
  var operators2=["."];
  //Displays inputs and outputs
  function calcDisplay(val){
    //check if the last input has an operator and a decimal point
    //Avoid duplication of decimal point in the same number
    if(operators2.includes(inputs[inputs.length-1]) === true && val === "."){
      console.log("Duplicate '.'")
    } 
    //check if the first input is a number and not an operator
    else if(inputs.length === 1 && operators1.includes(val) === false){
      inputs.push(val);
    } 
    //check if the last character is an operator, if not go ahead and add it
    else if(operators1.includes(inputs[inputs.length-1])===false)
    {
      inputs.push(val);
    } 
    else if(nums.includes(Number(val)))
    {
      inputs.push(val);
    }
   // update();
  } 
  //function to update the changes
  function update(){
    totalOutput = inputs.join("");
    $("#display").html(totalOutput)
  }
  //The total to be displayed
  function getTotal(){
    totalOutput= inputs.join("");
    $("#display").html(eval(totalOutput));
  }
  //add click handler to  all the buttons
  //validating the operators and numbers
  $(".button").on("click", function(){
    if(this.id==="clear"){
      inputs = [""]
      update();
    }
    else if(this.id==="equals")
    {
      getTotal();
    }
    else 
    {
      if(inputs[inputs.length - 1].indexOf("+", "-" ,"&times;", "&divide;")===-1){
        calcDisplay(this.id)
      }
                                                                  
  else{
    calcDisplay(this.id);
         } 
        }
      }
  });
}); */
              
            
!
999px

Console