html JavaScript Calculator v2 - 纯JavaScript | FreeCodeCamp

Posted 2021-05-10

*{
    margin: 0;
    padding: 0;
}
body{
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    background: #97c0cf;
}

.wrapper {
    text-align: center;
}

.info em{
    font-size: 2em;
    font-weight: bold;
    padding: 0 8px;
    position: relative;
    top: 5px;
}
h1 {
    font-family: 'Bree Serif', serif;
    font-size: 2.5em;
    margin-top: 15px;
    margin-bottom: 0;
}
#calculator-body {
    width: 400px;
    height: 650px;
    border: solid 25px #060606;
    margin: 50px;
    border-radius: 5px;
    margin:  50px auto;
    margin-top: 10px;
   box-shadow: 5px 10px 25px  #333;
}

#calculator-body p{
    text-align: center;
    margin-top: 25px;
    font-size: 1.2em;
}

#calculator-screen{
    width: 400px;
    height: 250px;
    background: #FFF;
}

#calculator-screen p#usersAnswer, #calculator-screen p#usersInput{
    margin: 0;
    padding: 0;
    text-align: left;
}
#calculator-screen p#usersInput{
    font-size: 1.5em;
    max-width: 400px;
    word-wrap:break-word;
    padding: 0 .5em;
    height: 180px;
    overflow: hidden;
}
#calculator-screen p#usersAnswer{
    font-size: 3.8em;
    font-weight: 600;
    padding: 0 .2em;
}

#calculator-btn-container {
    width: 400px;
    height: 400px;
}


.btn {
    float: left;
    width: 100px;
    height: 80px;
    line-height: 80px;
    border: solid 1px #060606;
    box-sizing: border-box;
    text-align: center;
    font-size: 2em;
    cursor: pointer;
    transition: all linear .2s;
}

.lg-btn{
    width: 200px;
    font-size: 2.5em;
}

.btn:active {
    position: relative;
    top: 1px;
    box-shadow: ;
}
.btn-top{
    border-top: 5px solid #060606;
}

.red-btn, .red-btn:hover, .black-btn, .black-btn:hover, .grey-btn, .grey-btn:hover, .blue-btn, .blue-btn:hover {
    transition: .2s linear background;
}
.red-btn{
    background:#FC4E45;
    color: #FFF;
}
.red-btn:hover{
    background:#f42d22;
}

.black-btn{
    background: #111111;
    color: #FFF;
}
.black-btn:hover{
    background: #0b0b0b;
}

.blue-btn{
    background:#38EAD2;
    color: #FFF;
}
.blue-btn:hover{
    background:#0ac9b0;
}

.grey-btn{
    background: #ECEBF1;
}
.grey-btn:hover{
    background: #cdccd4;
}

window.onload = function () {

    const calculator = document.getElementById("calculator-btn-container");
    const usersEquation = document.getElementById("usersInput");
    const usersAnswer = document.getElementById("usersAnswer");
    let userInput ="";
    let operators = ["%","/","*","-","+", "."];
    let answer;
    let equals = false;

    //function to check that user has not inputed double operator
    const checkInput = (nums) => {
        for( let i = 0; i < operators.length; i++){
            if(nums[0] === operators[i]){
                userInput = "";
            }else if(nums.slice(-1) == operators[i] && nums.slice(-2, -1) == operators[i] ){
                userInput = nums.slice(0, -1);
            }
        }
        usersEquation.innerHTML = userInput;

    }

    // outputs calculated info to HTML
    const showInfo = () => {
        let inputLength = usersAnswer.innerHTML;
        //console.log(inputLength);
        if(inputLength.length >9){
            usersEquation.innerHTML = "ERROR: Too Many characters";
            usersAnswer.innerHTML = "";
            userInput = userInput.slice(0, -2);
        }else if(userInput === ""){
            usersEquation.innerHTML = "";
            usersAnswer.innerHTML = "";
        }else if(equals === false){
            usersEquation.innerHTML = userInput;
            usersAnswer.innerHTML = eval(userInput);
        } else {
            usersEquation.innerHTML = eval(userInput);
            usersAnswer.innerHTML = eval(userInput);
            equals = false;
        }
    }

    // listens for when a button is clicked
    calculator.addEventListener("click", (e) => {
        let input = e.target.innerHTML;

        if(input === "="){
             equals = true;
        }else if(input === "AC"){
            userInput= "";
        }else if(input === "CE"){
            userInput = userInput.slice(0, -1);
        }else{
            userInput+=input;
            checkInput(userInput);
        }
        showInfo();
    });

    // listens for keyboard inputs
    document.addEventListener("keypress", () => {
        let x = event.keyCode;
        console.log(event.keyCode)
        if(x === 44){
            userInput = userInput.slice(0, -1);
        }else if (x >= 42 && x <= 57) {
            userInput+= String.fromCharCode(x);
        }else if(x == 13 || x == 61) {
            equals = true;
        }
        checkInput(userInput);
        showInfo();
    });

} // onload func

JavaScript Calculator v2 - Pure JavaScript | FreeCodeCamp
---------------------------------------------------------
Rebuilt the JavaScript Calculator for freeCodeCamp's advanced Front-End development projects with just JavaScript.
Keyboard enabled.

==== NO jQUERY ====

A [Pen](https://codepen.io/harunpehlivan/pen/QmbEmW) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).

[License](https://codepen.io/harunpehlivan/pen/QmbEmW/license).

<body>
        <div class="wrapper">
            <h1>freeCodeCamp JavaScript Calculator</h1>
            <div class="info">
                <p>If you use the keyboard use the <em>&lt;</em> as your backspace button.</p>
            </div>

            <div id="calculator-body">
                <div id="calculator-screen">
                    <p id="usersAnswer"></p>
                    <p id="usersInput"></p>
                </div>

                <div id="calculator-btn-container">
                    <div class="btn red-btn btn-top">AC</div>
                    <div class="btn red-btn btn-top">CE</div>
                    <div class="btn black-btn btn-top">%</div>
                    <div class="btn black-btn btn-top">/</div>

                    <div class="btn grey-btn">7</div>
                    <div class="btn grey-btn">8</div>
                    <div class="btn grey-btn">9</div>
                    <div class="btn black-btn">*</div>

                    <div class="btn grey-btn">4</div>
                    <div class="btn grey-btn">5</div>
                    <div class="btn grey-btn">6</div>
                    <div class="btn black-btn">-</div>

                    <div class="btn grey-btn">1</div>
                    <div class="btn grey-btn">2</div>
                    <div class="btn grey-btn">3</div>
                    <div class="btn black-btn">.</div>

                    <div class="btn grey-btn">0</div>
                    <div class="btn lg-btn blue-btn">=</div>
                    <div class="btn black-btn ">+</div>
                </div>
            </div>
        </div>
    </body>