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.

            
              <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <link href='https://fonts.googleapis.com/css?family=Lato:400,300|Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
  <!-- Optional IE8 Support  ( ONLY USE IF IE8 SUPPORT NEEDED ) -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <title>Javascript Calculator</title>
</head>
<body>
<div class="main-container">
  <div class="row">
    <div class="left-spacer col-xs-0 col-sm-2 col-md-3 col-lg-3"></div>
    <div class="top-text col-xs-12 col-sm-8 col-md-6 col-lg-6">
      <h1>A FreeCodeCamp Zipline: Build a JavaScript Calculator</h1>

      <h3>This calculator operates in RPN, that is, Reverse Polish notation.</h3>

      <h4>Why use RPN? Read <a href="http://www.xnumber.com/xnumber/rpn_or_adl.htm" target="_blank">James Redin's
        RPN or DAL?
      </a> and see this <a href="https://www.youtube.com/watch?v=7ha78yWRDlE" target="_blank">YouTube video.</a></h4>

      <p>I purchased my first RPN calculator in 1981, an <a
          href="https://www.google.ca/search?q=hewlett+packard+34c+calculator+picture&biw=1680&bih=900&tbm=isch&tbo=u&source=univ&sa=X&ved=0ahUKEwiZqKTkoaDKAhVFHT4KHTGMAw0QsAQIJQ#imgrc=buDlUFuBqet42M%3A"
          target=_blank">HP-34c</a>, and have since purchased several more.</p>

      <p>Below is a very simple RPN "Postfix" calculator. With RPN you don't use brackets to show "order of operation"
        when
        evaluation order is ambiguous, for example solving (2 + 4) * 5. Instead you push intermediate results onto a
        stack until needed. In RPN there is no "equals" key. And typically you require less keystrokes when
        solving complex equations, and those calculations are less prone to errors.</p>

      <p>At the bottom of this page I've included a few examples on using a RPN calculator.</p>
    </div> <!-- end top-text -->
    <div class="right-spacer col-xs-0 col-sm-2 col-md-3 col-lg-3"></div>
  </div> <!-- end row -->
  <div id="calculator-container" class="container">
    <div class="row">
      <div id="spacer-left" class="spacer col-sm-4"></div>
      <div id="calculator-body" class="col-sm-4">
        <div id="calculator-screen">
          <div id="Z-stack">
            <span class="stack-label">Z: </span>
            <span id="Z-display-target"></span>
          </div>
          <div id="Y-stack">
            <span class="stack-label">Y: </span>
            <span id="Y-display-target"></span>
          </div>
          <div id="X-stack">
            <span class="stack-label">X: </span>
            <span id="X-display-target"></span>
          </div>
          <div id="screen-text">
            <span id="screen-text-target">RPN Javascript Calculator</span>
          </div>
        </div><!-- end calculator-screen -->
        <div class="calculator-button-wrapper">
          <div id="row-1">
            <button onclick="main.captureOneOverX_Key()" class="key smaller-font"><span class="super">1</span>/x
            </button>
            <button onclick="main.captureY_ToX_Key()" class="key smaller-font">y<span class="super">x</span></button>
            <button onclick="main.captureX_SquaredKey()" class="key smaller-font">x<span class="super">2</span></button>
            <button onclick="main.captureSquareRootOfX_Key()" class="key key2 smaller-font">SqRt</button>
          </div>
          <div id="row-2">
            <button onclick="main.captureEnterKey()" class="key smaller-font2">ENTER</button>
            <button onclick="main.captureClearKey()" class="key smaller-font2">CLR</button>
            <button onclick="main.captureClearX_Key()" class="key smaller-font2">CLx</button>
            <button onclick="main.captureX_SwapY_Key()" class="key key3 smaller-font2">X<img class="swap_x_y" <img class="swap_x_y" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/368633/exchange.png"/>Y</button>
          </div>
          <div id="row-3">
            <button onclick="main.captureSubtractionKey()" class="key">-</button>
            <button onclick="main.captureNumKey(7)" class="key">7</button>
            <button onclick="main.captureNumKey(8)" class="key">8</button>
            <button onclick="main.captureNumKey(9)" class="key">9</button>
          </div>
          <div id="row-4">
            <button onclick="main.captureAdditionKey()" class="key">+</button>
            <button onclick="main.captureNumKey(4)" class="key">4</button>
            <button onclick="main.captureNumKey(5)" class="key">5</button>
            <button onclick="main.captureNumKey(6)" class="key">6</button>
          </div>
          <div id="row-5">
            <button onclick="main.captureMultiplicationKey()" class="key">*</button>
            <button onclick="main.captureNumKey(1)" class="key">1</button>
            <button onclick="main.captureNumKey(2)" class="key">2</button>
            <button onclick="main.captureNumKey(3)" class="key">3</button>
          </div>
          <div id="row-6">
            <button onclick="main.captureDivisionKey()" class="key">/</button>
            <button onclick="main.captureNumKey(0)" class="key">0</button>
            <button onclick="main.captureNumKey('.')" class="key">.</button>
            <button onclick="main.captureChangeSignKey()" class="key">+ / -</button>
          </div>
        </div><!-- calculator-button-wrapper -->
        <div id="text-under-keypad">
          <p>FreeCodeCamp</p>
        </div>
      </div><!-- end calculator-body -->
      <div id="spacer-right" class="spacer col-sm-4"></div>
    </div><!-- end class row -->
  </div><!-- end calculator-container -->
  <div class="bottom-text row">
    <div class="left-spacer col-xs-0 col-sm-2 col-md-3 col-lg-3"></div>
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-6">
      <p class="example-highlight">Example 1: solve 3 + 5</p>

      <p>Classical calculator keystrokes are <span class="text-keys">3</span> <span class="text-keys">+</span>
        <span class="text-keys">5</span> <span class="text-keys">=</span> giving an answer of 8</p>

      <p>RPN calculator keystrokes are <span class="text-keys">3</span> <span class="text-keys">Enter</span>
        <span class="text-keys">5</span> <span class="text-keys">+</span> giving an answer of 8</p>

      <p>Notes - both methods required 4 keystrokes, so same amount of work.</p>

      <p class="example-highlight">Example 2: solve (3 + 5) * (6 - 2) </p>

      <p>Classical calculator keystrokes are <span class="text-keys">(</span> <span class="text-keys">3</span>
        <span class="text-keys">+</span> <span class="text-keys">5</span> <span class="text-keys">)</span>
        <span class="text-keys">*</span> <span class="text-keys">(</span> <span class="text-keys">6</span>
        <span class="text-keys">-</span> <span class="text-keys">2</span> <span class="text-keys">)</span>
        <span class="text-keys">=</span> giving an answer of 32</p>

      <p>RPN calculator keystrokes are <span class="text-keys">3</span> <span class="text-keys">Enter</span>
        <span class="text-keys">5</span> <span class="text-keys">+</span> <span class="text-keys">6</span>
        <span class="text-keys">Enter</span> <span class="text-keys">2</span> <span class="text-keys">-</span>
        <span class="text-keys">*</span> giving an answer of 32</p>

      <p>Notes - first method required 12 keystrokes, second method required 9. Using RPN saved 3 keystrokes.</p>
    </div>
    <div class="right-spacer col-xs-0 col-sm-2 col-md-3 col-lg-3"></div>
  </div> <!-- end bottom-text -->
</div> <!-- end main-container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/368633/main.js"></script>
</body>
</html>

            
          
!
            
              #font-face {
    font-family: digital;
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/368633/Digital.ttf') format('truetype');
}

body {
    background-color: #ffe4b5 !important;
    margin: 0;
    padding: 0;
    font-family: 'Varela Round', sans-serif !important;
    text-align: center;
}

.top-text {
    font-family: 'Varela Round', sans-serif;
}

h1 {
    text-shadow: 2px 1px 2px rgba(255, 60, 40, 0.9);
    color: #000;
    margin-top: 60px;
}

h4 {
    margin-top: 14px;
    margin-bottom: 20px;
    color: brown;
}

p {
    padding-left: 30px;
    padding-top: 6px;
    font-size: 14px;
    font-weight: bold;
    text-align: start;
}

#calculator-body {
    width: 340px;
    height: 410px;
    border: 3px solid #e15119;
    border-radius: 3px 3px 6px;
    background-color: #2f4e6f;
    padding: 0;
    margin-top: 30px;
    margin-bottom: 40px;
}

.spacer {
    height: 360px;
}

#calculator-screen {
    width: 318px;
    height: 130px;
    border: 1px solid sandybrown;
    margin-bottom: 10px;
    margin-left: 7px;
    margin-top: 5px;
    background-color: grey;
}

#Z-stack {
    width: 312px;
    height: 26px;
    border: 1px solid grey;
    margin: 6px 0 1px 2px;
}

#Y-stack {
    width: 312px;
    height: 26px;
    border: 1px solid grey;
    margin: 2px 0 1px 2px;
}

#X-stack {
    width: 312px;
    height: 26px;
    border: 1px solid grey;
    margin: 2px 0 1px 2px;
}

#X-display-target {
    float: right;
    font-family: 'Digital', sans-serif;
    font-weight: 300;
    font-size: 19px;
}

#Y-display-target {
    float: right;
    font-family: 'Digital', sans-serif;
    font-weight: 300;
    font-size: 19px;
}

#Z-display-target {
    float: right;
    font-family: 'Digital', sans-serif;
    font-weight: 300;
    font-size: 19px;
}

#screen-text {
    width: 312px;
    height: 26px;
    border: 1px solid grey;
    color: #c8d7e3;
    font-weight: bold;
    text-align: center;
    margin-top: 12px;
    margin-left: 2px;
    padding-top: 2px;
}

.stack-label {
    float: left;
    text-align: left;
}

.calculator-button-wrapper {
    text-align: center;
    margin-left: 1px;
}

.key {
    background-color: black;
    color: #e15119;
    display: inline;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 26px;
    height: 36px;
    width: 76px;
    padding: 0 0 0 0;
    margin: 0;
    text-decoration: none;
    line-height: 5px;
}

.key2 {
    height: 36px;
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 0;
}

.key3 {
    height: 36px;
    padding-top: 3px;
}

.swap_x_y {
    color: rgb(255, 255, 255);
    display: inline;
    height: 14px;
    width: 10px;
    margin: 0 5px 1px 6px;
}

.super {
    vertical-align: super;
    color: #e15119;
    font-size: 14px;
    height: auto;
    padding-left: 4px;
    text-align: left;
    width: auto;
}

.smaller-font {
    font-size: 1.2em;
}

.smaller-font2 {
    font-size: 1.0em;
}

#text-under-keypad {
    margin-top: 6px;
    padding-left: 76px;
    text-align: center;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.7), 1px 1px 0 rgba(0, 0, 0, 0.9);
    color: #333;
    opacity: 0.4;
    font: 200 16px 'Lato';
    letter-spacing: 0.16em;
}

.bottom-text-heading {
    color: #09567a;
    text-decoration: underline;
}

.example-highlight {
    color: brown;
    font-weight: bold;
}

.text-keys {
    border: solid 1px #09567a;
    margin: 0 4px;
    padding: 3px;
}

@media screen and (max-width: 1200px) {
    #spacer-right {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    #spacer-left, #spacer-left {
        display: none;
    }
}
            
          
!
            
              /**
 *  Created by Rick Stewart on 1/8/2016.
 */
var myMain = function () {
    "use strict";

    /*  get references to display fields */
    var xStackDisplay = document.getElementById('X-display-target');
    var yStackDisplay = document.getElementById('Y-display-target');
    var zStackDisplay = document.getElementById('Z-display-target');

    /* define stack accumulators */
    var x_Accumulator = 0;
    var y_Accumulator = 0;
    var z_Accumulator = 0;

    /* define scratchpad work area variable */
    var scratchpad = [];

    /* define flag to track last scratchpad operation, operand (true) or operator (false) */
    var lastScratchpadAccessType = true;

    /* accumulator getters and setters */
    var setX_Accumulator = function (num) {
        x_Accumulator = num;
    };

    var setY_Accumulator = function (num) {
        y_Accumulator = num;
    };

    var setZ_Accumulator = function (num) {
        z_Accumulator = num;
    };

    var getX_Accumulator = function () {
        return x_Accumulator;
    };

    var getY_Accumulator = function () {
        return y_Accumulator;
    };

    var getZ_Accumulator = function () {
        return z_Accumulator;
    };

    /* scratchpad last access type, getter and setter */
    var setScratchpadLastAccessType = function (bool) {
        lastScratchpadAccessType = bool;
    };

    var getScratchpadLastAccessType = function () {
        return lastScratchpadAccessType;
    };

    /* update methods for refresh of x, y, and z display fields */
    var update_Display = function () {
        xStackDisplay.innerText = getX_Accumulator().toFixed(5);
        yStackDisplay.innerText = getY_Accumulator().toFixed(5);
        zStackDisplay.innerText = getZ_Accumulator().toFixed(5);
    };

    /* initialize accumulators to zero at start of program, update display. */
    setX_Accumulator(0);
    setY_Accumulator(0);
    setZ_Accumulator(0);
    update_Display();

    /* method to add value to scratchpad array */
    var enterNumericToScratchpad = function (value) {
        if (getScratchpadLastAccessType()) {
            scratchpad.push(value);
        }
        else {
            setZ_Accumulator(getY_Accumulator());
            setY_Accumulator(getX_Accumulator());
            clearScratchpad();
            setX_Accumulator(0);
            scratchpad.push(value);
        }
        setScratchpadLastAccessType(true);
    };

    /* clear scratchpad array to initial state. */
    var clearScratchpad = function () {
        scratchpad = [];
        setScratchpadLastAccessType(true);
    };

    /* method to move scratchpad data into x accumulator and update display*/
    var scratchpadToX_Display = function () {
        var num = parseFloat(scratchpad.join(""));
        setX_Accumulator(num);
        update_Display();
    };

    /* basic math methods */
    var addX_Y = function () {
        var temp = getX_Accumulator() + getY_Accumulator();
        setScratchpadLastAccessType(false);
        setY_Accumulator(getZ_Accumulator());
        setZ_Accumulator(0);
        setX_Accumulator(temp);
        update_Display();
    };
    var subtractX_Y = function () {
        var temp = getY_Accumulator() - getX_Accumulator();
        setScratchpadLastAccessType(false);
        setY_Accumulator(getZ_Accumulator());
        setZ_Accumulator(0);
        setX_Accumulator(temp);
        update_Display();
    };
    var multiplyX_Y = function () {
        var temp = getX_Accumulator() * getY_Accumulator();
        setScratchpadLastAccessType(false);
        setY_Accumulator(getZ_Accumulator());
        setZ_Accumulator(0);
        setX_Accumulator(temp);
        update_Display();
    };
    var divideX_Y = function () {
        var temp = getY_Accumulator() / getX_Accumulator();
        setScratchpadLastAccessType(false);
        setY_Accumulator(getZ_Accumulator());
        setZ_Accumulator(0);
        setX_Accumulator(temp);
        update_Display();
    };

    /* misc. math functions */
    var oneOverX = function () {
        setX_Accumulator(1 / getX_Accumulator());
        clearScratchpad();
        setScratchpadLastAccessType(false);
        update_Display();
    };

    var yToX = function () {
        var temp = Math.pow(getY_Accumulator(), getX_Accumulator());
        setScratchpadLastAccessType(false);
        setY_Accumulator(getZ_Accumulator());
        setZ_Accumulator(0);
        setX_Accumulator(temp);
        update_Display();
    };

    var xSquared = function () {
        setX_Accumulator(getX_Accumulator() * getX_Accumulator());
        clearScratchpad();
        setScratchpadLastAccessType(false);
        update_Display();
    };

    var squareRootOfX = function () {
        setX_Accumulator(Math.sqrt(getX_Accumulator()));
        clearScratchpad();
        setScratchpadLastAccessType(false);
        update_Display();
    };

    var xSwapY = function () {
        var temp = getX_Accumulator();
        setX_Accumulator(getY_Accumulator());
        setY_Accumulator(temp);
        clearScratchpad();
        setScratchpadLastAccessType(false);
        update_Display();
    };

    var changeSignX = function () {
        setX_Accumulator(getX_Accumulator() * (-1));
        clearScratchpad();
        setScratchpadLastAccessType(false);
        update_Display();
    };

    /* methods to capture keystrokes, and carry out the task. "public exposed methods" */
    return {
        captureNumKey: function (value) {
            enterNumericToScratchpad(value);
            scratchpadToX_Display();
        },
        captureEnterKey: function () {
            setZ_Accumulator(getY_Accumulator());
            setY_Accumulator(getX_Accumulator());
            setScratchpadLastAccessType(false);
            clearScratchpad();
            update_Display();
        },
        captureClearKey: function () {
            setX_Accumulator(0);
            setY_Accumulator(0);
            setZ_Accumulator(0);
            clearScratchpad();
            update_Display();
        },
        captureClearX_Key: function () {
            setX_Accumulator(0);
            clearScratchpad();
            update_Display();
        },
        captureAdditionKey: function () {
            addX_Y();
        },
        captureSubtractionKey: function () {
            subtractX_Y();
        },
        captureMultiplicationKey: function () {
            multiplyX_Y();
        },
        captureDivisionKey: function () {
            divideX_Y();
        },
        captureOneOverX_Key: function () {
            oneOverX();
        },
        captureY_ToX_Key: function () {
            yToX();
        },
        captureX_SquaredKey: function () {
            xSquared();
        },
        captureSquareRootOfX_Key: function () {
            squareRootOfX();
        },
        captureX_SwapY_Key: function () {
            xSwapY();
        },
        captureChangeSignKey: function () {
            changeSignX();
        }
    };
};

var main = new myMain();


            
          
!
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