fCC Calculator

In this example below you will see how to do a fCC Calculator with some HTML / CSS and Javascript

Calculator for freeCodeCamp

Thumbnail
This awesome code was written by r3b311i0n, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright r3b311i0n ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>fCC Calculator</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

      <div class="container center-align">
        <div class="row output">
            <div class="col s12 m12 l12">
                <h1 class="white-text blue flow-text outputText card">fCC Calculator</h1>
            </div>
        </div>
        <div class="row">
            <div class="col s6 m6 l6">
                <a href="#" class="btn-large white ctrlBtn waves-effect waves-red" id="pwr">
                    <canvas id="icon0" width="50" height="50"></canvas>
                </a>
            </div>
            <div class="col s6 m6 l6">
                <a href="#" class="btn-large white ctrlBtn waves-effect waves-red" id="eq">
                    <canvas id="icon1" width="50" height="50"></canvas>
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col s3 m3 l3">
                <a href="#" class="flow-text" id="seven">
                    <span class="number btn-large red white-text waves-effect waves-light">7</span>
                </a>
            </div>
            <div class="col s3 m3 l3">
                <a href="#" class="flow-text" id="eight">
                    <span class="number btn-large red white-text waves-effect waves-light">8</span>
                </a>
            </div>
            <div class="col s3 m3 l3">
                <a href="#" class="flow-text" id="nine">
                    <span class="number btn-large red white-text waves-effect waves-light">9</span>
                </a>
            </div>
            <div class="col s3 m3 l3">
                <a href="#" class="btn-large white ctrlBtn waves-effect waves-red" id="add">
                    <canvas id="icon2" width="50" height="50"></canvas>
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col s3 m3 l3">
                <a href="#" class="flow-text" id="four">
                    <span class="number btn-large red white-text waves-effect waves-light">4</span>
                </a>
            </div>
            <div class="col s3 m3 l3">
                <a href="#" class="flow-text" id="five">
                    <span class="number btn-large red white-text waves-effect waves-light">5</span>
                </a>
            </div>
            <div class="col s3 m3 l3">
                <a href="#" class="flow-text" id="six">
                    <span class="number btn-large red white-text waves-effect waves-light">6</span>
                </a>
            </div>
            <div class="col s3 m3 l3">
                <a href="#" class="btn-large white ctrlBtn waves-effect waves-red" id="subtract">
                    <canvas id="icon3" width="50" height="50"></canvas>
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col s3 m3 l3">
                <a href="#" class="flow-text" id="one">
                    <span class="number btn-large red white-text waves-effect waves-light">1</span>
                </a>
            </div>
            <div class="col s3 m3 l3">
                <a href="#" class="flow-text" id="two">
                    <span class="number btn-large red white-text waves-effect waves-light">2</span>
                </a>
            </div>
            <div class="col s3 m3 l3">
                <a href="#" class="flow-text" id="three">
                    <span class="number btn-large red white-text waves-effect waves-light">3</span>
                </a>
            </div>
            <div class="col s3 m3 l3">
                <a href="#" class="btn-large white ctrlBtn waves-effect waves-red" id="multiply">
                    <canvas id="icon4" width="50" height="50"></canvas>
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col s6 m6 l6">
                <a href="#" class="flow-text" id="zero">
                    <span class="number btn-large red white-text waves-effect waves-light">0</span>
                </a>
            </div>
            <div class="col s3 m3 l3">
                <a href="#" class="flow-text" id="decimal">
                    <span class="number btn-large red white-text waves-effect waves-light">.</span>
                </a>
            </div>
            <div class="col s3 m3 l3">
                <a href="#" class="btn-large white ctrlBtn waves-effect waves-red" id="divide">
                    <canvas id="icon5" width="50" height="50"></canvas>
                </a>
            </div>
        </div>
    </div>
</main>

<footer>
    <div class="center-align">
        <small>Icons made by <a href="http://www.flaticon.com/authors/madebyoliver"
                                title="Madebyoliver">Madebyoliver</a> from <a href="http://www.flaticon.com"
                                                                              title="Flaticon">www.flaticon.com</a> is
            licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0"
                           target="_blank">CC 3.0 BY</a></small>
    </div>
</footer>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/r3b311i0n/fcc-calculator-ORBxPZ */
/* github: https://github.com/r3b311i0n/fCC_Calculator */

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

span {
    width: 100%;
}

.ctrlBtn {
    width: 100%;
}

.number {
    font-size: 2em;
}

.output {
    padding-bottom: 3.5em;
}

.outputText {
    font-size: 4em;
}

/*Downloaded from https://www.codeseek.co/r3b311i0n/fcc-calculator-ORBxPZ */
var total = 0;
var clearCheck = false;

function main() {
    iconLoad();
}

function iconLoad() {
    for (let i = 0; i < 6; ++i) {
        let canvas = document.getElementById("icon" + i);
        let context = canvas.getContext("2d");
        let img = new Image();

        img.onload = function () {
            context.drawImage(this, 0, 0, canvas.width, canvas.height);
        };

        switch (i) {
            case 0:
                img.src = "data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggZD0iTTM1LjMxLDUuMDQyYy0wLjUzMi0wLjE1NS0xLjA4NSwwLjE1LTEuMjQsMC42OHMwLjE0OSwxLjA4NSwwLjY4LDEuMjRDNDQuOTA2LDkuOTMyLDUyLDE5LjQwNSw1MiwzMCAgIGMwLDEzLjIzMy0xMC43NjcsMjQtMjQsMjRTNCw0My4yMzMsNCwzMEM0LDE5LjM5MiwxMS4xMDUsOS45MTUsMjEuMjc5LDYuOTUzYzAuNTMtMC4xNTQsMC44MzUtMC43MDksMC42ODEtMS4yMzkgICBjLTAuMTUzLTAuNTMtMC43MDgtMC44MzktMS4yMzktMC42ODFDOS42OTgsOC4yNDEsMiwxOC41MDgsMiwzMGMwLDE0LjMzNywxMS42NjMsMjYsMjYsMjZzMjYtMTEuNjYzLDI2LTI2ICAgQzU0LDE4LjUyMiw0Ni4zMTQsOC4yNiwzNS4zMSw1LjA0MnoiIGZpbGw9IiNEODAwMjciLz4KCTxwYXRoIGQ9Ik0yOCwyN2MwLjU1MywwLDEtMC40NDcsMS0xVjFjMC0wLjU1My0wLjQ0Ny0xLTEtMXMtMSwwLjQ0Ny0xLDF2MjVDMjcsMjYuNTUzLDI3LjQ0NywyNywyOCwyN3oiIGZpbGw9IiNEODAwMjciLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K";
                break;
            case 1:
                img.src = "data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDM2IDM2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNiAzNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiPgo8Zz4KCTxyZWN0IHk9IjEyIiB3aWR0aD0iMzYiIGhlaWdodD0iMiIgZmlsbD0iI0Q4MDAyNyIvPgoJPHJlY3QgeT0iMjIiIHdpZHRoPSIzNiIgaGVpZ2h0PSIyIiBmaWxsPSIjRDgwMDI3Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==";
                break;
            case 2:
                img.src = "data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQyIDQyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MiA0MjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+Cjxwb2x5Z29uIHBvaW50cz0iNDIsMjAgMjIsMjAgMjIsMCAyMCwwIDIwLDIwIDAsMjAgMCwyMiAyMCwyMiAyMCw0MiAyMiw0MiAyMiwyMiA0MiwyMiAiIGZpbGw9IiNEODAwMjciLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==";
                break;
            case 3:
                img.src = "data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQyIDQyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MiA0MjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxyZWN0IHk9IjIwIiB3aWR0aD0iNDIiIGhlaWdodD0iMiIgZmlsbD0iI0Q4MDAyNyIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K"
                break;
            case 4:
                img.src = "data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMxLjExMiAzMS4xMTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxLjExMiAzMS4xMTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8cG9seWdvbiBwb2ludHM9IjMxLjExMiwxLjQxNCAyOS42OTgsMCAxNS41NTYsMTQuMTQyIDEuNDE0LDAgMCwxLjQxNCAxNC4xNDIsMTUuNTU2IDAsMjkuNjk4IDEuNDE0LDMxLjExMiAxNS41NTYsMTYuOTcgICAyOS42OTgsMzEuMTEyIDMxLjExMiwyOS42OTggMTYuOTcsMTUuNTU2ICIgZmlsbD0iI0Q4MDAyNyIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K";
                break;
            case 5:
                img.src = "data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQyIDQyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MiA0MjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHJlY3QgeT0iMjAiIHdpZHRoPSI0MiIgaGVpZ2h0PSIyIiBmaWxsPSIjRDgwMDI3Ii8+Cgk8cGF0aCBkPSJNMjEsMTNjMi43NTcsMCw1LTIuMjQzLDUtNXMtMi4yNDMtNS01LTVzLTUsMi4yNDMtNSw1UzE4LjI0MywxMywyMSwxM3ogTTIxLDVjMS42NTQsMCwzLDEuMzQ2LDMsM3MtMS4zNDYsMy0zLDMgICBzLTMtMS4zNDYtMy0zUzE5LjM0Niw1LDIxLDV6IiBmaWxsPSIjRDgwMDI3Ii8+Cgk8cGF0aCBkPSJNMjEsMjljLTIuNzU3LDAtNSwyLjI0My01LDVzMi4yNDMsNSw1LDVzNS0yLjI0Myw1LTVTMjMuNzU3LDI5LDIxLDI5eiBNMjEsMzdjLTEuNjU0LDAtMy0xLjM0Ni0zLTNzMS4zNDYtMywzLTMgICBzMywxLjM0NiwzLDNTMjIuNjU0LDM3LDIxLDM3eiIgZmlsbD0iI0Q4MDAyNyIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=";
        }
    }
}

function appendOperator() {
    clearCheck = false;

    switch (this.id) {
        case "add":
            //noinspection JSJQueryEfficiency
            if (/\s/.test($(".outputText").html().slice(-1))) {
                //noinspection JSJQueryEfficiency
                $(".outputText").html($(".outputText").html().slice(0, length - 2) + "+ ");
            }
            else if (/\d/.test($(".outputText").html().slice(-1))) {
                //noinspection JSJQueryEfficiency
                let expr = $(".outputText").html();
                //noinspection JSJQueryEfficiency
                $(".outputText").html(expr + " + ");
            }
            break;
        case "subtract":
            //noinspection JSJQueryEfficiency
            if (/\s/.test($(".outputText").html().slice(-1))) {
                //noinspection JSJQueryEfficiency
                $(".outputText").html($(".outputText").html().slice(0, length - 2) + "- ");
            }
            //noinspection JSJQueryEfficiency
            else if (/\d/.test($(".outputText").html().slice(-1))) {
                //noinspection JSJQueryEfficiency
                let expr = $(".outputText").html();
                //noinspection JSJQueryEfficiency
                $(".outputText").html(expr + " - ");
            }
            break;
        case "multiply":
            //noinspection JSJQueryEfficiency
            if (/\s/.test($(".outputText").html().slice(-1))) {
                //noinspection JSJQueryEfficiency
                $(".outputText").html($(".outputText").html().slice(0, length - 2) + "* ");
            }
            //noinspection JSJQueryEfficiency
            else if (/\d/.test($(".outputText").html().slice(-1))) {
                //noinspection JSJQueryEfficiency
                let expr = $(".outputText").html();
                //noinspection JSJQueryEfficiency
                $(".outputText").html(expr + " * ");
            }
            break;
        case "divide":
            //noinspection JSJQueryEfficiency
            if (/\s/.test($(".outputText").html().slice(-1))) {
                //noinspection JSJQueryEfficiency
                $(".outputText").html($(".outputText").html().slice(0, length - 2) + "/ ");
            }
            //noinspection JSJQueryEfficiency
            else if (/\d/.test($(".outputText").html().slice(-1))) {
                //noinspection JSJQueryEfficiency
                let expr = $(".outputText").html();
                //noinspection JSJQueryEfficiency
                $(".outputText").html(expr + " / ");
            }
            break;
    }
}

function enterNumber() {
    if (clearCheck === true) {
        $(".outputText").html("");
    }
    clearCheck = false;

    switch (this.id) {
        case "zero":
            //noinspection JSJQueryEfficiency
            if ($(".outputText").html() === "0" || $(".outputText").html() == "fCC Calculator") {
                $(".outputText").html("0");
            }
            else {
                //noinspection JSJQueryEfficiency
                let expr = $(".outputText").html();
                //noinspection JSJQueryEfficiency
                $(".outputText").html(expr + "0");
            }
            break;
        case "one":
            //noinspection JSJQueryEfficiency
            if ($(".outputText").html() === "0" || $(".outputText").html() == "fCC Calculator") {
                $(".outputText").html("1");
            }
            else {
                //noinspection JSJQueryEfficiency
                let expr = $(".outputText").html();
                //noinspection JSJQueryEfficiency
                $(".outputText").html(expr + "1");
            }
            break;
        case "two":
            //noinspection JSJQueryEfficiency
            if ($(".outputText").html() === "0" || $(".outputText").html() == "fCC Calculator") {
                $(".outputText").html("2");
            }
            else {
                //noinspection JSJQueryEfficiency
                let expr = $(".outputText").html();
                //noinspection JSJQueryEfficiency
                $(".outputText").html(expr + "2");
            }
            break;
        case "three":
            //noinspection JSJQueryEfficiency
            if ($(".outputText").html() === "0" || $(".outputText").html() == "fCC Calculator") {
                $(".outputText").html("3");
            }
            else {
                //noinspection JSJQueryEfficiency
                let expr = $(".outputText").html();
                //noinspection JSJQueryEfficiency
                $(".outputText").html(expr + "3");
            }
            break;
        case "four":
            //noinspection JSJQueryEfficiency
            if ($(".outputText").html() === "0" || $(".outputText").html() == "fCC Calculator") {
                $(".outputText").html("4");
            }
            else {
                //noinspection JSJQueryEfficiency
                let expr = $(".outputText").html();
                //noinspection JSJQueryEfficiency
                $(".outputText").html(expr + "4");
            }
            break;
        case "five":
            //noinspection JSJQueryEfficiency
            if ($(".outputText").html() === "0" || $(".outputText").html() == "fCC Calculator") {
                $(".outputText").html("5");
            }
            else {
                //noinspection JSJQueryEfficiency
                let expr = $(".outputText").html();
                //noinspection JSJQueryEfficiency
                $(".outputText").html(expr + "5");
            }
            break;
        case "six":
            //noinspection JSJQueryEfficiency
            if ($(".outputText").html() === "0" || $(".outputText").html() == "fCC Calculator") {
                $(".outputText").html("6");
            }
            else {
                //noinspection JSJQueryEfficiency
                let expr = $(".outputText").html();
                //noinspection JSJQueryEfficiency
                $(".outputText").html(expr + "6");
            }
            break;
        case "seven":
            //noinspection JSJQueryEfficiency
            if ($(".outputText").html() === "0" || $(".outputText").html() == "fCC Calculator") {
                $(".outputText").html("7");
            }
            else {
                //noinspection JSJQueryEfficiency
                let expr = $(".outputText").html();
                //noinspection JSJQueryEfficiency
                $(".outputText").html(expr + "7");
            }
            break;
        case "eight":
            //noinspection JSJQueryEfficiency
            if ($(".outputText").html() === "0" || $(".outputText").html() == "fCC Calculator") {
                $(".outputText").html("8");
            }
            else {
                //noinspection JSJQueryEfficiency
                let expr = $(".outputText").html();
                //noinspection JSJQueryEfficiency
                $(".outputText").html(expr + "8");
            }
            break;
        case "nine":
            //noinspection JSJQueryEfficiency
            if ($(".outputText").html() === "0" || $(".outputText").html() == "fCC Calculator") {
                $(".outputText").html("9");
            }
            else {
                //noinspection JSJQueryEfficiency
                let expr = $(".outputText").html();
                //noinspection JSJQueryEfficiency
                $(".outputText").html(expr + "9");
            }
            break;
        case "decimal":
            //noinspection JSJQueryEfficiency
            if ($(".outputText").html() === "0" || $(".outputText").html() == "fCC Calculator") {
                $(".outputText").html(".");
            }
            else {
                //noinspection JSJQueryEfficiency
                let expr = $(".outputText").html();
                //noinspection JSJQueryEfficiency
                $(".outputText").html(expr + ".");
            }
            break;
    }
}

$("#zero").on("click", enterNumber);

$("#one").on("click", enterNumber);

$("#two").on("click", enterNumber);

$("#three").on("click", enterNumber);

$("#four").on("click", enterNumber);

$("#five").on("click", enterNumber);

$("#six").on("click", enterNumber);

$("#seven").on("click", enterNumber);

$("#eight").on("click", enterNumber);

$("#nine").on("click", enterNumber);

$("#decimal").on("click", enterNumber);

$("#add").on("click", appendOperator);

$("#subtract").on("click", appendOperator);

$("#multiply").on("click", appendOperator);

$("#divide").on("click", appendOperator);

$("#eq").on("click", function () {
    //noinspection JSJQueryEfficiency
    total = eval($(".outputText").html());
    //noinspection JSJQueryEfficiency
    $(".outputText").html(total);

    clearCheck = true;
});

$("#pwr").on("click", function () {
    $(".outputText").html("0");
});

$(window).ready(main());

Comments