css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              
  <div id="calculator" class="img-rounded">
    <div id="display" class="img-rounded"> 0</div>
    <div id="clear" class="btn btn-default">CE</div>
    <div id="add" class="btn btn-default">+</div>
    <div id="subtract" class="btn btn-default">-</div>
    <div id="multiply" class="btn btn-default">*</div>
    <div id="divide" class="btn btn-default">/</div>
    <div id="equals" class="btn btn-default">=</div>
    <div id="one" class="btn btn-default">1</div>
    <div id="two" class="btn btn-default">2</div>
    <div id="three" class="btn btn-default">3</div>
    <div id="four" class="btn btn-default">4</div>
    <div id="five" class="btn btn-default">5</div>
    <div id="six" class="btn btn-default">6</div>
    <div id="seven" class="btn btn-default">7</div>
    <div id="eight" class="btn btn-default">8</div>
    <div id="nine" class="btn btn-default">9</div>
    <div id="zero" class="btn btn-default">0</div>
    <div id="point" class="btn btn-default">.</div>
</div>
            
          
!
            
              #calculator {
  margin: 0 auto;
  margin-top: 100px;
  margin-bottom: 100px;
  background-color: #cc9900;
  padding: 200px;
  width: 200px;
  height: 450px;
  position: relative;
}

#display {
  background-color: #ff9999;
  width: 300px;
  height: 45px;
  position: absolute;
  top: 30px;
  bottom: inherit;
  left: 0;
  right: 0;
  margin: auto;
  text-align: right;
  font-size: 25px;
  padding: 5px;
}

#clear {
  position: relative;
  bottom: 100px;
  right: 160px;
  width: 50px;
  height: 35px;
  text-align: center;
  margin: auto;
}

#add {
  position: relative;
  left: 100px;
  bottom: 140px;
  width: 50px;
  height: 35px;
  text-align: center;
  margin: 10px 10px 10px 10px;
}

#subtract {
  position: relative;
  left: 100px;
  bottom: 140px;
  width: 50px;
  height: 35px;
  text-align: center;
  margin: 10px 10px 10px 10px;
}

#multiply {
  position: relative;
  left: 100px;
  bottom: 140px;
  width: 50px;
  height: 35px;
  text-align: center;
  margin: 10px 10px 10px 10px;
}

#divide {
  position: relative;
  left: 100px;
  bottom: 140px;
  width: 50px;
  height: 35px;
  text-align: center;
  margin: 10px 10px 10px 10px;
}

#equals {
  position: relative;
  left: 100px;
  bottom: 140px;
  width: 50px;
  height: 35px;
  text-align: center;
  margin: 10px 10px 10px 10px;
}

#one {
  position: relative;
  right: 170px;
  bottom: 250px;
  width: 50px;
  height: 35px;
  text-align: center;
  margin: 10px 10px 10px 10px;
}

#two {
  position: relative;
  right: 100px;
  bottom: 305px;
  width: 50px;
  height: 35px;
  text-align: center;
  margin: 10px 10px 10px 10px;
}

#three {
  position: relative;
  right: 30px;
  bottom: 360px;
  width: 50px;
  height: 35px;
  text-align: center;
  margin: 10px 10px 10px 10px;
}

#four {
  position: relative;
  right: 170px;
  bottom: 470px;
  width: 50px;
  height: 35px;
  text-align: center;
  margin: 10px 10px 10px 10px;
}

#five {
  position: relative;
  right: 100px;
  bottom: 525px;
  width: 50px;
  height: 35px;
  text-align: center;
  margin: 10px 10px 10px 10px;
}

#six {
  position: relative;
  right: 30px;
  bottom: 580px;
  width: 50px;
  height: 35px;
  text-align: center;
  margin: 10px 10px 10px 10px;
}

#seven {
  position: relative;
  right: 170px;
  bottom: 690px;
  width: 50px;
  height: 35px;
  text-align: center;
  margin: 10px 10px 10px 10px;
}

#eight {
  position: relative;
  right: 100px;
  bottom: 745px;
  width: 50px;
  height: 35px;
  text-align: center;
  margin: 10px 10px 10px 10px;
}

#nine {
  position: relative;
  right: 30px;
  bottom: 800px;
  width: 50px;
  height: 35px;
  text-align: center;
  margin: 10px 10px 10px 10px;
}

#zero {
  position: relative;
  right: 170px;
  bottom: 690px;
  width: 120px;
  height: 35px;
  text-align: center;
  margin: 10px 10px 10px 10px;
}

#point {
  position: relative;
  right: 30px;
  bottom: 745px;
  width: 50px;
  height: 35px;
  text-align: center;
  margin: 10px 10px 10px 10px;
}
            
          
!
            
              //convert this to prototype based programming. javascript has no class based programming only based on constructors

var Calculator = {

  numberOrDecimalPoint: "",
  operation: "",
  pressed: "",

  //helper object to translate value to id without "#" needed for internal model
  valueToId: {
    "+": "add",
    "-": "subtract",
    "*": "multiply",
    "/": "divide",
    "=": "equals",
    "1": "one",
    "2": "two",
    "3": "three",
    "4": "four",
    "5": "five",
    "6": "six",
    "7": "seven",
    "8": "eight",
    "9": "nine",
    "0": "zero",
    ".": "point"
  },

  //display function object to display stuff
  display(value) {
    //reset display marker to reset the display
    // var resetDisplay = false;
    // operatio switch is on when clicked and off when number or decimal or another operation is pressed
    var operationSwitch = false;
    //helper object that correlates with #id for each button
    var id = {
      "+": "#add",
      "-": "#subtract",
      "*": "#multiply",
      "/": "#divide",
      "=": "#equals",
      "1": "#one",
      "2": "#two",
      "3": "#three",
      "4": "#four",
      "5": "#five",
      "6": "#six",
      "7": "#seven",
      "8": "#eight",
      "9": "#nine",
      "0": "#zero",
      ".": "#point"
    }

    //check the arugments if number set it to display or if an operation highlight the function 
    if (isNaN(value) && value != ".") {

      //operation switch set to true that means operation is pressed
      // operationSwitch = true;

      //highlight selected operation
      //$(id[value]).css("padding", "5px");
      //set previous storedoperation back to not highlighted
      // $(id[this.storedOperation[0]]).css("padding", "0px");
      // console.log('#19 operation pressed and highlighted', value);
      //if clear pressed set display to zero
      if (value == "=" || value == "clear") {
        $("#display").text("0");
        // operationSwitch = false;
        // $(id[this.storedOperation[0]]).css("padding", "0px");
        console.log('#20 equals pressed or clear pressed');

      }

      //set reset display to true
      // resetDisplay = true;

    } else if (!isNaN(value)) {
      //display the value by concatenating it unless reset display is set to true after operation pressed
      // if (resetDisplay) {
      //if period is pressed first '.' pressed first
      if (value == ".") {
        $("#display").text("0" + value);
        console.log('#13 "." was pressed before number', value);
      }
      $("#display").text(value);
      console.log('#12 the value in display is', value);
      //reset the display to not true to continue to concatenate
      // resetDisplay = false;
      // } //else {
      //continue to concatenate display
      //$("display").text($("#display").text().concat(value));
      //does this work?"??
      //console.log('#11, trying to concantenate here but maybe not required??'$("#display").text().concat(value));
      // }
    }

  },

  //lets make the store an object
  /** store will store number in an array for tens and hundredths etc while a second number  in another array, it also has an array for operations **/
  store: {
    //array of first number
    firstNumber: [],

    //array of stored operations
    storedOperation: [],
    //array of second number
    secondNumber: [],

    //helper function to check if values stored 
    notEmpty() {

      return (this.firstNumber[0] != null && this.secondNumber[0] != null);
      console.log('#14 both first and second number are not empty', this.firstNumber, this.secondNumber);
    },
    //first Number not empty
    firstNumberNotEmpty() {

      return (this.firstNumber[0] != null);
      console.log('#15 first number in store is', this.firstNumber);
    },
    //storedOperation not empty
    storedOperationNotEmpty() {

      return (this.storedOperation[0] != null);
      console.log('#16 stored operation in store is', this.storedOperation);
    },

    //helper function to check and see if a decimal point is already present
    decimalPointPresent(array) {
      console.log('#17 index of "." in array', array.indexOf("."));
      return array.indexOf(".");

    },

    //second Number not empty
    secondNumberNotEmpty() {

      return (this.secondNumber[0] != null);
      console.log('#18 second number in array is', this.secondNumber);
    },

  },

  //operator function as an object
  operator: {
    "-": function(x, y) {
      return x - y;
    },
    "+": function(x, y) {
      return x + y;
    },
    "*": function(x, y) {
      return x * y;
    },
    "/": function(x, y) {
      return x / y;
    }
  },

  clear() {
    //empty everything in the store
    this.store.firstNumber = [];
    this.store.storedOperation = [];
    this.store.secondNumber = [];
    this.display("clear");

  },

  equals() {

    //if any of the numbers are not present or operation not stored return false #21
    if (this.store.notEmpty() != true || this.store.storedOperationNotEmpty() != true) {
      console.log('#21 store of numbers or stored operation is empty', this.store.firstNumber, this.store.secondNumber, this.store.storedOperation);
      //empty somewhere
      return false;

    }

    //equals similar to second operation take the first operate on the second number and store it in the first but do not empty the storedOperation

    //pop the secondNumber array and concatenate it into a whole number
    var stringSecondNumber = this.store.secondNumber.join("");
    //empty the array secondNumber
    this.store.secondNumber = [];

    //convert the string to float
    var secondNumber = parseFloat(stringSecondNumber);

    console.log('#22 second number as a float', secondNumber);

    //pop the firstNumber array and concatenate it into a float
    var stringfirstNumber = this.store.firstNumber.join("");
    var firstNumber = parseFloat(stringfirstNumber);
    this.store.firstNumber = [];
    console.log('#23 first number as a float', firstNumber);

    //pop the operation previously pressed in the store, perform the operation and push the new operation and push the new value into firstNumber 
    var oldOperation = this.store.storedOperation.pop();
    var result = this.operator[oldOperation](firstNumber, secondNumber);
    this.store.firstNumber.push(result);
    this.store.storedOperation.push(oldOperation);
    //check for null
    //if (oldOperation != null) {

    console.log('#24 result with old operation performed and stored again. ', result, oldOperation);
    //call display
    this.display(result);
    //}
  },

  press() {
    this.pressed = arguments[0];
    console.log(arguments[0]);

    //it is not a number and it is not a deceimal point and not empty
    if (isNaN(this.pressed) && this.pressed != "." && this.pressed != null) {
      //it's a string operation
      this.operation = this.pressed;

      //operation is clear send it to clear function
      if (this.operation == "clear") {
        this.clear();
        //call display
        this.display(this.operation);
        console.log("#25 clear pressed");
        return false;
      }
      //operation is equals call it here
      if (this.operation == "=") {
        this.equals();
        //this.display(this.operation)
        console.log('#26 equals pressed.');
        return false;
      }

      //if operation is pressed second time ie already storedOperation but store numbers are empty so empty the first operation and put the new one in
      if (this.store.storedOperationNotEmpty() && this.store.notEmpty() != true) {
        console.log('#27 stored numbers are empty and one of the operation key pressed second time');

        //empty the stored operation
        this.store.storedOperation = [];

        //just store the new operation
        this.store.storedOperation.push(this.operation);

        console.log('#28 operation pressed is. ', this.operation);
        //call display
        return this.display(this.operation);
      }

      //if operation is pressed second time ie storedOperation is not empty && store is not empty
      if (this.store.storedOperationNotEmpty() && this.store.notEmpty()) {
        console.log('#29 numbers in the store are not empty and operation in the store is not empty', this.store.storedOperation, this.store.firstNumber, this.store.secondNumber);
        //pop the secondNumber array and concatenate it into a whole number
        var stringSecondNumber = this.store.secondNumber.join("");

        //empty the array secondNumber
        this.store.secondNumber = [];

        //convert the string to float
        var secondNumber = parseFloat(stringSecondNumber);
        console.log('#30 second float number is', secondNumber);

        //pop the firstNumber array and concatenate it into a float
        var stringFirstNumber = this.store.firstNumber.join();
        var firstNumber = parseFloat(stringFirstNumber);
        this.store.firstNumber = [];
        console.log('#31 first float number is', firstNumber);

        //pop the operation previously pressed in the store, perform the operation and push the new operation and push the new value into firstNumber 
        var oldOperation = this.store.storedOperation.pop();
        //empty operation
        this.store.storedOperation = [];
        var result = this.operator[oldOperation](firstNumber, secondNumber);
        this.store.firstNumber.push(result);
        this.store.storedOperation.push(this.operation); //call the display results and show the results

        console.log('#32 result of the old operation #2 is and the new operation #3 operation pushed is ', result, oldOperation, this.operation);
        return this.display(result);
      }
      //if the operation is pressed for the first time after being cleared or pressing the equals button 

      //check to see if first number is stored and first time pressed operation
      if (this.store.storedOperationNotEmpty() != true && this.store.firstNumberNotEmpty()) {
        this.store.storedOperation.push(this.operation);
        console.log('#33 first number is in the store and there is no operation in the store. new operation to push into store is', this.operation);

        //call display here
        this.display(this.operation);

      }
      //always check the argument is not null and is a number
    } else {
      console.log('#34 pressed is number', this.pressed);
      // can be number or decimal point
      this.numberOrDecimalPoint = this.pressed;

      //if this is not a chain of operations ie there is only one storedOperation and first number was stored already
      if (this.store.storedOperation.length === 1 && this.store.firstNumberNotEmpty() && this.store.storedOperationNotEmpty()) {
        console.log('#35 first number is stored and operation is already stored so push second number. ', this.numberOrDecimalPoint);

        //push the second number as long as operation pressed
        if (this.numberOrDecimalPoint == ".") {
          if (this.store.decimalPointPresent(this.store.secondNumber) == -1) {
            console.log('#43 second value stored in store is', this.numberOrDecimalPoint);
            this.store.secondNumber.push(this.numberOrDecimalPoint);

            console.log('#2 already pushed the . into the array', this.store.secondNumber);
            //update number or decimal point for display
            this.numberOrDecimalPoint = this.store.secondNumber.join("");

            //call display
            return this.display(this.numberOrDecimalPoint);
            //break here
            //return false;

          } else {

            console.log('#7 it already has a "." in the array');

            // #change2, prevent the default behavior
            return false;

          }
        }
        if (this.numberOrDecimalPoint != ".") {

          console.log('#36 second continue to be pushed ', this.numberOrDecimalPoint);
          console.log('#40 operation in store is ', this.store.storedOperation);
          //end operation here and store second number
          this.store.secondNumber.push(this.numberOrDecimalPoint);

          this.numberOrDecimalPoint = this.store.secondNumber.join("");
          return this.display(this.numberOrDecimalPoint);

        }

      }

      //still on the first number so keep storing it until operation is pressed ie operation is stored in the store
      if (this.numberOrDecimalPoint == "." && this.store.secondNumberNotEmpty() != true && this.store.storedOperationNotEmpty() != true) {
        console.log('#37 first number has a "." ', this.numberOrDecimalPoint);

        if (this.store.decimalPointPresent(this.store.firstNumber) == -1) {
          this.store.firstNumber.push(this.numberOrDecimalPoint);
          console.log('#40 "." has been pushed ', this.numberOrDecimalPoint);
          //store it in numberorDecimal for display
          this.numberOrDecimalPoint = this.store.firstNumber.join("");

        } else {
          console.log('#38 "." already present');
          //stop default behavior
          return false
        }
      } else if (this.numberOrDecimalPoint != "." && this.store.secondNumberNotEmpty() != true && this.store.storedOperationNotEmpty() != true) {
        this.store.firstNumber.push(this.numberOrDecimalPoint);

        //store it in numberorDecimal for display
        this.numberOrDecimalPoint = this.store.firstNumber.join("");
        console.log('#39 first number is ', this.numberOrDecimalPoint);
      }
    }

    //call display here at the end
    this.display(this.numberOrDecimalPoint);
  }

};

var calculator1 = Object.create(Calculator);
//jquery for click event to call calculator
$("#clear").click(function() {
  calculator1.press("clear");
});
$("#add").click(function() {
  calculator1.press("+");
});
$("#subtract").click(function() {
  calculator1.press("-");
});
$("#multiply").click(function() {
  calculator1.press("*");
});
$("#divide").click(function() {
  calculator1.press("/");
});
$("#equals").click(function() {
  calculator1.press("=");
});
$("#one").click(function() {
  calculator1.press("1");
});
$("#two").click(function() {
  calculator1.press("2");
});
$("#three").click(function() {
  calculator1.press("3");
});
$("#four").click(function() {
  calculator1.press("4");
});
$("#five").click(function() {
  calculator1.press("5");
});
$("#six").click(function() {
  calculator1.press("6");
});
$("#seven").click(function() {
  calculator1.press("7");
});
$("#eight").click(function() {
  calculator1.press("8");
});
$("#nine").click(function() {
  calculator1.press("9");
});
$("#zero").click(function() {
  calculator1.press("0");
});
$("#point").click(function() {
  calculator1.press(".");
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console