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

              
                <div class="container-fluid">
  <div id="wrapper">
    <div id="calculator-display">
      <div id="previousDisplay"></div>
      <div id="currentDisplay"></div>
    </div>
    <div id="calculator-controls">
      <div class="table">
        <div class="table-row" id="row-1">
          <div id="ac" class="table-cell op null-op"><span>AC</span></div>
          <div id="ce" class="table-cell op null-op"><span>CE</span></div>
          <div id="percent" class="table-cell op binary-op"><span>%</span></div>
          <div id="square-root" class="table-cell op unary-op sqrt">&radic;<span style="text-decoration: overline">2</span></div>
        </div>
        <div class="table-row" id="row-2">
          <div id="seven" class="table-cell number"><span>7</span></div>
          <div id="eight" class="table-cell number"><span>8</span></div>
          <div id="nine" class="table-cell number"><span>9</span></div>
          <div id="divide" class="table-cell op binary-op"><span>&divide;</span></div>
        </div>
        <div class="table-row" id="row-3">
          <div id="four" class="table-cell number"><span>4</span></div>
          <div id="five" class="table-cell number"><span>5</span></div>
          <div id="six" class="table-cell number"><span>6</span></div>
          <div id="multiply" class="table-cell op binary-op"><span>&times;</span></div>
        </div>
        <div class="table-row" id="row-4">
          <div id="one" class="table-cell number"><span>1</span></div>
          <div id="two" class="table-cell number"><span>2</span></div>
          <div id="three" class="table-cell number"><span>3</span></div>
          <div id="subtract" class="table-cell op binary-op"><span>-</span></div>
        </div>
        <div class="table-row" id="row-5">
          <div id="zero" class="table-cell number"><span>0</span></div>
          <div id="period" class="table-cell op unary-op dot"><span>.</span></div>
          <div id="equals" class="table-cell op null-op"><span>=</span></div>
          <div id="add" class="table-cell op binary-op"><span>+</span></div>

        </div>

      </div>
    </div>
    <div id="calculator-footer">
      Designed by Manish Giri for FreeCodeCamp
    </div>


  </div>

  <div id="instructions">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">
      Launch Instructions
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Instructions</h4>
          </div>
          <div class="modal-body">
            <ul class="list-group">
              <li class="list-group-item">Click on the AC button before beginning each new calculation.</li>
              <li class="list-group-item">For square root of a number, first press the number then press the square root button.</li>
              <li class="list-group-item">An operation that results in a number too large to fit on the screen will display zero instead.</li>
              <li class="list-group-item">If a number has too many digits after the decimal point to fit on screen, some of the digits will be truncated.</li>
              <li class="list-group-item">Some operations like divide by zero, and square root of negative integers are not permitted.</li>
            </ul>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

          </div>
        </div>
      </div>
    </div>

  </div>

</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Lobster|Montserrat);
@import url(https://fonts.googleapis.com/css?family=Lora:400italic|Slabo+27px);
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Courgette);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:700);
body {
  /*  width: 100%;
  max-width: 1920px; /* YOUR BG MAX SIZE */
  background: #B6ABB1 url(https://dl.dropbox.com/s/f9bd1rgopphn3wp/9.jpg?dl=0) no-repeat center center;
  background-attachment: fixed;
  background-size: cover;
}

#wrapper {
  position: relative;
  width: 330px;
  height: 480px;
  margin: 40px auto 0 auto;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(16, 15, 15, 0.7) 57%, rgba(33, 54, 63, 0.2) 100%);
  border-radius: 20em / 3em;
  box-shadow: 0 5px 25px 1px #222, inset 0 0 10px 1px #222;
  padding: 10px 4px;
}

#calculator-footer {
  font-family: 'Lobster', cursive;
  text-align: center;
  color: floralwhite;
  position: absolute;
  bottom: 20px;
  left: 40px;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

#calculator-display {
  box-sizing: border-box;
  position: absolute;
  top: 15px;
  width: 95%;
  height: 115px;
  margin: 10px auto;
  padding: 6px;
  text-align: right;
  color: antiquewhite;
  font-size: 2.0em;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.1em;
}

#previousDisplay {
  position: absolute;
  right: 5px;
  padding: 4px 2px;
  height: 40px;
  width: 95%;
}

#currentDisplay {
  position: absolute;
  top: 60px;
  right: 5px;
  height: 40px;
  width: 95%;
  padding: 6px 2px;
}


/* CSS for CONTROLS */

#calculator-controls {
  box-sizing: border-box;
  position: absolute;
  top: 130px;
  width: 97%;
  height: 300px;
  padding: 20px 0;
}

.table {
  box-sizing: border-box;
  height: 250px;
  display: table;
  width: 100%;
  border-collapse: separate;
  font-family: 'Montserrat', sans-serif;
  color: white;
  margin-left: 25px;
}

.table-row {
  display: table-row;
  margin: 5px;
}

#table-row div {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.table-cell {
  display: table-cell;
  padding: 10px;
  font-size: larger;
  text-shadow: -2px -2px 2px rgba(5, 5, 5, 1);
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.table-cell span {
  cursor: pointer;
}

.table-cell:hover {
  color: red;
}

.table-cell:active {
  position: relative;
  top: 5px;
}


/*square root button*/

#row-1 div:first-child,
#row-1 div:nth-child(2),
#row-1 div:last-child {
  padding: 5px;
}


/*CSS for instructions panel*/

#instructions {
  position: fixed;
  left: 44%;
  bottom: 0px;
  z-index: 1049;
  font-family: 'Courgette', cursive;
}

#instructions button {

  text-transform: uppercase;
  opacity: 0.6;
}

#instructions button:hover {
  opacity: 1;
}

.modal-body {
  font-family: 'Droid Serif', serif;
}
              
            
!

JS

              
                //global variables and functions

var result = 0;
var entries = [];
var lastNum = 0;
var currentNum = 0; //at any point this number is in memory if no number is pressed
var currentNumDisplay = "";

var currentOp = '';
var lastOp = '';

var oldResult = '';

//to prevent multiple decimals in same number
var sameNumberDecimal = false;

//new display variables
var $previousDisplay = $("#previousDisplay");
var $presentDisplay = $("#currentDisplay");



//check number of decimals in a number
Number.prototype.countDecimals = function () {
    if(Math.floor(this.valueOf()) === this.valueOf()) return 0;
    return this.toString().split(".")[1].length || 0; 
}

function showMessage(character, message) {
    if(character) {
        $previousDisplay.html('<i style="font-size:0.6em; color:#BADCF3">'+oldResult+"</i>");
    }
    else if(!character) {
        $previousDisplay.html("");
        $previousDisplay.html('<i style="color:red;font-size:0.5em;">' + message +"</i>");
    }
}


function resultCheck(num) {
    var answer = 0;

    //get length of number itself
    var numberLength = num.toString().length;
    console.log("Number Length = " + numberLength);

    //CASE 1 - total 15 numbers on screen
    if(numberLength <= 15) {

        //if number of digits after decimal >= 13, fix to 10
        if(num % 1 !== 0 && num.countDecimals >= 13) {
            console.log("Num of decimals = " + num.countDecimals);
            showMessage(false, "Result truncated");
            answer = num.toFixed(10);

        }
        else {
            answer = num;
        }

    }

    //CASE 2 - more than 15 numbers on screen
    else if(numberLength > 15) {

        //check if decimals exists
        if(num % 1 !== 0) {
            var decimalDigits = num.countDecimals();
            var preDecimalDigits = numberLength - decimalDigits;

            if(preDecimalDigits <= 5 && decimalDigits >= 11) {
                console.log("Inside else 1");
                showMessage(false, "Result truncated");
                answer = num.toFixed(10);
            }
            
            else if(preDecimalDigits >= 11 && decimalDigits >= 4) {
                console.log("Inside else 2");
                answer = num.toFixed(3);
            }
            else if(5 < preDecimalDigits <= 11 && decimalDigits < 4) {
                console.log("Inside else 3");
                answer = num;
            }
        }

        else {
            //no decimal places
            console.log("Inside else 4");
            showMessage(false, "Result too large");
            answer = 0;
        }


    }

    return answer;
}


function calculate(num1, op, num2) {
    var result = 0;
    if (op === "+") {
        result = resultCheck(num1 + num2);
    } else if (op === "-") {
        result = resultCheck(num1 - num2);
    } 

    else if (op === "*") {
        result = resultCheck(num1 * num2);
    } 

    else if (op === "/") {
        if (num2 !== 0) {
            result = resultCheck(num1 / num2);
        }
        else if(num2 === 0) {
            console.log("Inside divide by zero loop");
            showMessage(false, "Divide by Zero");

            //$previousDisplay.html('<i style="font-size:0.7em;color:green;">'+oldResult+"</i>");
             //$previousDisplay.html('<b style="font-size:0.5em;color:red;">'+"Invalid Operation"+"</b>");
             result = 0;
        }
    } 

    else if (op === "sqrt") {
        if (num1 >= 0) {
            result = resultCheck(Math.sqrt(num1));
        }
        else {
            showMessage(false, "Invalid Number");
            result = 0;
        }
    } 

    else if (op === "%") {
        if(num2 !== 0) {
            result = num1 % num2;
        }
        else {
            showMessage(false, "Invalid Number");
            result = 0;
        }
    }

    return result;
}


function pushOperator(oper) {
    currentOp = oper;
    entries.push(currentOp);
    console.log("----");
    console.log("Entries = " + entries);

    //changes for new displays
    showMessage(true, "");
    //$previousDisplay.html('<i style="font-size:0.7em; color:#BADCF3">'+oldResult+"</i>");
    console.log("Old Result = " + oldResult);
    //clear currentOp
    currentOp = '';

}


$(".table-cell").click(function () {
    
    var $this = $(this);

    //if button clicked was a number
    if ($this.hasClass("number")) {
        currentNum = parseInt($this.text(), 10);

        //check if last entry in entries[] is also a number
        lastNum = entries[entries.length - 1];
        if ($.isNumeric(lastNum)) {
            //number repition
            //remove last number from entries

            var lastNumS = lastNum.toString();

            //if current number is of 14 or less digits
            if(lastNumS.length <= 14) {

                var last = entries.pop();
                var lastS = last.toString();

                //get last entry in entries, combine with this number, update currentNum, currentNumDisplay and display on screen
                currentNumDisplay = lastS + currentNum;
                currentNum = parseFloat(currentNumDisplay, 10);
                
                //do same thing for old result display
                
                entries.push(currentNum);
                console.log("----");
                console.log("Entries = " + entries);
                oldResult = entries.join("");
                //oldResult = currentNumDisplay;   
                showMessage(true, "");
                //$previousDisplay.html('<i style="font-size:0.7em;color:green">'+oldResult+"</i><br>");
                $presentDisplay.html(currentNumDisplay);

               // oldResult = currentNumDisplay;   
                console.log("Old Result = " + oldResult);
            }


        }

        //check if last entry in entries[] is "."
        else if (entries[entries.length - 1] == ".") {
            //last entry in entries is a dot
            //remove '.'
            entries.pop();
            //remove last number in entries
            lastNum = entries.pop();
            //prepare formatted number
            currentNumDisplay = lastNum + "." + currentNum;
            //get formatted number to store in entries
            currentNum = parseFloat(currentNumDisplay, 10);
            entries.push(currentNum);
            console.log("----");
            console.log("Entries = " + entries);
            //----------testing-----------
            oldResult = entries.join("");
            showMessage(true, "");
            //---------------------------
            //console.log("----");
            //$display.html(currentNumDisplay);
            $presentDisplay.html(currentNumDisplay);

        }


        else {
            //if last entry in entries[] is not a number, 
            //it must be an operator or a new number

            entries.push(currentNum);
            console.log("----");
            console.log("Entries = " + entries);
            //----------testing-----------
            oldResult = entries.join("");
        
            //---------------------------
            //previousDisplay.html('<i style="font-size:0.7em;color:green;">'+oldResult+"</i>");
            showMessage(true, "");
            $presentDisplay.html(currentNum);
            //oldResult += currentNum;
            console.log("Old Result = " + oldResult);
        }
    }

    //else if button clicked was an operator
    else if ($this.hasClass("op")) {

        currentOp = $this.text();
        
        oldResult += currentOp;
        console.log("Current Op => " + currentOp);

        /*----------------------------------------------------
        check if the operator was a null operator AC|CE|=
        -----------------------------------------------------*/
        if ($this.hasClass("null-op")) {
            //validation for decimal case
            sameNumberDecimal = false;
            //check if operator is an 'AC'
            if (currentOp === "AC") {
                //console.log("Inside if loop, Current Op = " + currentOp);
                //clear entries array
                entries = [];
                console.log("----");
                console.log("Entries = " + entries);
                //console.log("----");
                //clear screen display
                //$display.html("");
                $previousDisplay.html("");
                $presentDisplay.html("");

                //clear currentNum, currentOp, oldresult
                currentNum = 0;
                currentOp = '';
                oldResult = '';
            }


            //check if operator was a 'CE' 
            else if (currentOp === "CE") {
                //if last entry in entries is a number
                if ($.isNumeric(entries[entries.length - 1])) {
                    //remove last number from entries
                    entries.pop();
                    //change - don't remove last operator from entries
                    //entries.pop();
                    console.log("----");
                    console.log("Entries = " + entries);
                    //console.log("----");
                    //reset currentOp,currentNum
                    currentNum = 0;
                    currentOp = '';
                }
                //if last entry in entries was not a number
                else {
                    //last entry is an operator, but don't remove it
                    //entries.pop();
                    console.log("----");
                    console.log("Entries = " + entries);
                    //console.log("----");
                    //reset currentOp,currentNum
                    //currentNum = 0;
                    currentOp = '';

                }
            }

            //check if operator was an '='
            else if (currentOp === "=") {
                //calculate result from entries
                var temp = 0;
                oldResult = entries.join("");
                while (entries.length >= 3) {
                    temp = calculate(entries[0], entries[1], entries[2]);
                    entries.splice(0, 3, temp);
                    console.log("----");
                    console.log("Entries = " + entries);
                    console.log("----");
                }
                result = temp;
                //$display.html(result);
               // $previousDisplay.html("");
                //showMessage(true,"");
                $presentDisplay.html(result);
                //reset entries & current op
                currentOp = '';
                entries = [];
                console.log("Entries = " + entries);

            }
        }


        /*----------------------------------------------------
          check if operator was a unary operator SQRT|.
        -----------------------------------------------------*/
        else if ($this.hasClass("unary-op")) {

            //check if operator was a sqrt
            if ($this.hasClass("sqrt")) {
                //validation for decimal case
                sameNumberDecimal = false;
                //check if last entry in entries was a number
                if ($.isNumeric(entries[entries.length - 1])) {
                    //if yes, get last number in entries
                    lastNum = entries[entries.length - 1];
                    //compute result of square root
                    result = calculate(lastNum, "sqrt", 0);
                    //show result on screen
                    showMessage(true,"");
                    //$previousDisplay.html('<i style="font-size:0.7em;color:green">'+oldResult+"</i><br>");
                    $presentDisplay.html(result);
                    //reset everything
                    entries = [];
                    currentOp = '';
                }

                //if last entry was not a number
                else {
                    //discard the value of sqrt
                    currentOp = '';
                }
            }

            //check if operator was a dot
            else if ($this.hasClass("dot")) {
                //check if last entry in entries was a number - only valid case
                if ($.isNumeric(entries[entries.length - 1])) {
                    console.log("Samenumberdecimal = " + sameNumberDecimal);
                    if(!sameNumberDecimal) {
                        sameNumberDecimal = true;
                        entries.push(".");                     
                    }
                    else {
                    }
                }

                //else - last entry in entries is not a number - ignore

            }
        }

        /*---------------------------------------------------------
          check if the operator was a binary operator - +|-|*|/|%
        ---------------------------------------------------------*/
        else if ($this.hasClass("binary-op")) {
            
            //validation for decimal case
            sameNumberDecimal = false;

            //check if last entry in entries is a number

            if ($.isNumeric(entries[entries.length - 1])) {
                //get what operator was pushed
                if ($this.is("#add")) {
                    //if operator is +
                    pushOperator("+");
                }

                //if operator is '-' 
                else if ($this.is("#subtract")) {
                    //if operator is +
                    pushOperator("-");
                }

                //if operator is '*'
                else if ($this.is("#multiply")) {
                    //if operator is +
                    pushOperator("*");
   
                }

                //if operator is '/'
                else if ($this.is("#divide")) {
                    //if operator is +
                    pushOperator("/");
                } 

                else if ($this.is("#percent")) {
                    //if operator is +
                    pushOperator("%");
                }


            }

            //else last entry in entries is not a number
            else {

                //last entry is an operator, pop it
                lastOp = entries.pop();
                 if ($this.is("#add")) {
                    //if operator is +
                    pushOperator("+");
                }

                //if operator is '-' 
                else if ($this.is("#subtract")) {
                    //if operator is -
                    //CHANGES for negative numbers
                    if(!entries.toString().length) {
                        //if entries is emtpy
                        entries.push(0);
                        pushOperator("-");
                    }
                    else {
                        pushOperator("-");
                    }
                }

                //if operator is '*'
                else if ($this.is("#multiply")) {
                    //if operator is +
                    pushOperator("*");
   
                }

                //if operator is '/'
                else if ($this.is("#divide")) {
                    //if operator is +
                    pushOperator("/");
                } 

                else if ($this.is("#percent")) {
                    //if operator is +
                    pushOperator("%");
                }

                // if ($this.is("#add")) {
                //     //if operator is +
                //     currentOp = '+';
                //     entries.push(currentOp);
                //     console.log("----");
                //     console.log("Entries = " + entries);

                //     //changes for new displays
                //     //$previousDisplay.html('<i style="font-size:0.7em; color:green">'+oldResult+"</i>");
                //     console.log("Old Result = " + oldResult);
                //     //clear currentOp
                //     currentOp = '';
                // }


            }

        }
    }




});

              
            
!
999px

Console