Scientific Calculator Using HTML, CSS and JS

HTML

CSS

Output

HTML Copied

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scientific Calculator Using HTML, CSS and JS</title>

</head>

<div class="back-op-area">
            <div class="field-area-name">
                <p>Teknowize calculator</p>
                <span class="calcOnIndicator"></span>
            </div>
            <div class="resultArea">
                <div class="show-output-area turn-on-off" id="texto"></div>
                <input readonly autocomplete="off" id="resultsCalculatorVarId" type="hidden" value="" size="28"
                    maxlength="25">
                <div class="showResultVar"></div>
            </div>
            <section class="container">
                <div class="btn-column">
                    <span>SHIFT</span>
                    <button class="btn"></button>
                </div>
                <div class="btn-column">
                    <span>ALPHA</span>
                    <button class="btn"></button>
                </div>
                <button class="btn-replay">REPLAY</button>
                <div class="btn-column">
                    <span>MODE</span>
                    <button class="btn"></button>
                </div>
                <div class="btn-column">
                    <span id="onOffTxtId">ON</span>
                    <button class="btn onOff"></button>
                </div>
            </section>
            <section class="containerOne">
                <button class="btnCsArea x-1" value="*">x</button>
                <button class="btnCsArea" value="equal">Calc</button>
                <span class="btnCsArea opacity"></span>
                <span class="btnCsArea opacity"></span>
                <button class="btnCsArea">Pi</button>
                <button class="btnCsArea x3" value="pow">x³</button>
                <button class="btnCsArea">ab/c</button>
                <button class="btnCsArea" value="sqrt">√</button>
                <button class="btnCsArea" value="sq">x²</button>
                <button class="btnCsArea" value="^">^</button>
                <button class="btnCsArea" value="log">log</button>
                <button class="btnCsArea" value="ln">In</button>
                <button class="btnCsArea" value="-">(-)</button>
                <button class="btnCsArea">.,,,</button>
                <button class="btnCsArea" value="hyp">hyp</button>
                <button class="btnCsArea" value="sin">sin</button>
                <button class="btnCsArea" value="cos">cos</button>
                <button class="btnCsArea" value="tan">tan</button>
                <button class="btnCsArea" value="Rcl">Rcl</button>
                <button class="btnCsArea" value="Eng">Eng</button>
                <button class="btnCsArea" value="(">(</button>
                <button class="btnCsArea" value=")">)</button>
                <button class="btnCsArea" value=",">,</button>
                <button class="btnCsArea" value="+">m+</button>
            </section>
            <section class="containerTwo">
                <button class="btnMathArea" value="7">7</button>
                <button class="btnMathArea" value="8">8</button>
                <button class="btnMathArea" value="9">9</button>
                <button class="btnMathArea btn-action" value="del">DEL</button>
                <button class="btnMathArea btn-action" value="clear">AC</button>
                <button class="btnMathArea" value="4">4</button>
                <button class="btnMathArea" value="5">5</button>
                <button class="btnMathArea" value="6">6</button>
                <button class="btnMathArea" value="*">x</button>
                <button class="btnMathArea" value="/">/</button>
                <button class="btnMathArea" value="1">1</button>
                <button class="btnMathArea" value="2">2</button>
                <button class="btnMathArea" value="3">3</button>
                <button class="btnMathArea" value="+">+</button>
                <button class="btnMathArea" value="-">-</button>
                <button class="btnMathArea" value="0">0</button>
                <button class="btnMathArea" value=".">.</button>
                <button class="btnMathArea" value="exp">EXP</button>
                <button class="btnMathArea" value="ans">Ans</button>
                <button class="btnMathArea" value="equal">=</button>
            </section>
        </div>
    </main>
</body>

</html>

CSS Copied

:root {
            --bg-color: #212429;
            --cont-color: #34383E;
            --black: #000;
            --gris: #777;
            --white: #fff;
            --display: #86B297;
            --btn-action: #ec0c4f;
            --git-chendo: #fd3938;
        }

body {
            background-color: var(--white);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            user-select: none;
            overflow-x: hidden;
        }

h1 {
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--white);
        }

h1 a {
            text-decoration: none;
            color: #ccc;
        }

/* on off switch*/
        .turn-on-off {
            visibility: hidden;
        }

/*<---------->*/
        /*Fields area show*/
        .field-area-name {
            display: flex;
            justify-content: space-between;
        }

p {
            color: var(--white);
        }

.field-area-name p {
            color: var(--display);
            font-weight: 700;
        }

.onOffindicator {
            width: 8px;
            height: 8px;
            background: rgb(115, 255, 0);
            border-radius: 50%;
        }

.back-op-area {
            background-color: var(--cont-color);
            padding: .5em;
            border-radius: .3em;
            width: 15.7em;
            border: .01em double var(--gris);
            box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .7);
        }

.resultArea {
            background: rgb(61, 61, 61);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            padding: .3em 0;
            width: 100%;
            height: 3.3em;
        }

.resultArea-2 {
            background-color: var(--display);

}

/*animation cursor field*/
        .show-output-area {
            /* left display field*/
            padding-left: .4em;
            width: 15em;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

.show-output-area::after {
            content: '│';
            color: var(--black);
            animation: .9s animated infinite;
            -webkit-animation: .9s animated infinite;
        }

@keyframes animated {
            from {
                opacity: 0;
            }

to {
                opacity: 1;
            }
        }

/*<---------------->*/
        .resultArea input {
            background-color: transparent;
            padding-left: .4em;
            user-select: none;
            border: none;
            outline: none;
        }

.showResultVar {
            margin: 0 .4em;
            align-self: flex-end;
            user-select: none;
        }

/*>-----show end------<*/
        .container {
            display: flex;
            justify-content: space-between;
            margin-top: 1em;
        }

.containerOne {
            display: grid;
            grid-template-columns: repeat(6, 41.7px);
            margin-bottom: .5em;
        }

.containerTwo {
            display: grid;
            grid-template-columns: repeat(5, 50px);
        }

button {
            background-color: var(--cont-color);
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-right: none;
            border-bottom: none;
            box-shadow: 1px 1px 2px #000;
            color: var(--white)
        }

button:active {
            background-color: #212429;
        }

button.btn {
            width: 2em;
            height: 1em;
            border-radius: 1em;
        }

.btn-column {
            display: flex;
            flex-direction: column;
        }

.btn-column span {
            font-size: .6em;
            text-align: center;
            color: var(--white);
        }

.btn {
            padding: .5em;
            margin: .2em;
            cursor: pointer;
        }

.btn-replay {
            position: relative;
            width: 5.5em;
            height: 4em;
            border-radius: 3em 3em 5em 5em;
        }

.btnCsArea {
            padding: .1em;
            margin: .3em;
            border-radius: .4em;
            cursor: pointer;
        }

.opacity {
            visibility: hidden;
        }

.btnMathArea {
            padding: .5em;
            margin: .2em;
            border-radius: .5em 0 .5em 0;
            cursor: pointer;
        }

.btn-action {
            background-color: var(--btn-action);
        }

JS Copied

/*show display area*/
    const resultsCalculatorVar = document.querySelector("#resultsCalculatorVarId");
    const showResultVar = document.querySelector('.showResultVar');
    let showOutputVar = document.querySelector('#texto');
    let resultBg = document.querySelector('.resultArea');

/*<--on Off area-->*/
    const onOff = document.querySelector('.onOff');
    const onOffIndicator = document.querySelector('.calcOnIndicator');

/*Turn on off area*/
    onOff.addEventListener('click', () => {
        resultsCalculatorVar.value = '';
        showResultVar.textContent = '';
        showOutputVar.classList.toggle('turn-on-off');
        resultBg.classList.toggle('resultArea-2');
        onOffIndicator.classList.toggle('onOffindicator');
        var onOffTxtId = document.getElementById('onOffTxtId')
        if (onOffTxtId.innerText == "OFF") {
            onOffTxtId.innerHTML = "ON"
        }
        else if (onOffTxtId.innerText == "ON") {
            onOffTxtId.innerHTML = "OFF"
        }

else {
            onOffTxtId.innerText = "OFF"
        }

});

// calculator function area
    function calculator() {
        document.addEventListener('click', e => {
            let target = e.target;
            if (target.tagName === "BUTTON") {
                let TrimedValueVar = target.value.trim();
                switch (true) {
                    case TrimedValueVar == "equal":
                        checkNum(resultsCalculatorVar) ? showCalc(resultsCalculatorVar) : 'ERROR';
                        break;
                    case TrimedValueVar == "clear": 
                        resultsCalculatorVar.value = '';
                        showResultVar.textContent = '';
                        showOutputVar.textContent = '';
                        break;
                    case TrimedValueVar == "del":
                        delBack(resultsCalculatorVar);
                        showOutputVar.textContent = showOutputVar.textContent.slice(0, -1);
                        break;
                    case (TrimedValueVar === "ln"
                        || TrimedValueVar === "exp"
                        || TrimedValueVar === "pow"
                        || TrimedValueVar === "log"
                        || TrimedValueVar === "ans"
                        // add more operations area
                        || TrimedValueVar === "sq"
                        || TrimedValueVar === "sqrt"
                        || TrimedValueVar === "sin"
                        || TrimedValueVar === "cos"
                        || TrimedValueVar === "tan"):
                        if (checkNum(resultsCalculatorVar)) {
                            if (TrimedValueVar === "ln") {
                                TrimedValueVar = "log";
                            }
                            // add more features area
                            else if (TrimedValueVar === "pow") {
                                resultsCalculatorVar.value = eval(resultsCalculatorVar.value) * eval(resultsCalculatorVar.value) * eval(resultsCalculatorVar.value);
                                showOutputVar.textContent = resultsCalculatorVar.value
                                break;
                            }
                            // <----------------> //
                            else if (TrimedValueVar === "sq") {
                                resultsCalculatorVar.value = eval(resultsCalculatorVar.value) * eval(resultsCalculatorVar.value);
                                showOutputVar.textContent = resultsCalculatorVar.value
                                break;
                            }
                            // <----------------> //
                            else if (TrimedValueVar === "sin") {
                                resultsCalculatorVar.value = eval(Math.sin(resultsCalculatorVar.value * Math.PI / 180));
                                break;
                            }
                            else if (TrimedValueVar === "cos") {
                                resultsCalculatorVar.value = eval(Math.cos(resultsCalculatorVar.value * Math.PI / 180));
                                break;
                            }
                            else if (TrimedValueVar === "tan") {
                                resultsCalculatorVar.value = eval(Math.tan(resultsCalculatorVar.value * Math.PI / 180));
                                break;
                            }
                            // <----------------> //
                            else if (TrimedValueVar === "ans") {
                                checkNum(resultsCalculatorVar) ? showCalc(resultsCalculatorVar) : 'ERROR';
                                break;
                            }

// default operation area -->
                            resultsCalculatorVar.value = eval(Math[TrimedValueVar](resultsCalculatorVar.value));
                            showOutputVar.textContent = resultsCalculatorVar.value
                        }
                        break;
                    default: // show function area
                        addDisplay(resultsCalculatorVar, target.value);
                        break;
                }
            }
        });
    }
    // show display
    const addDisplay = (input, character) => {
        showOutputVar.textContent = input.value + character.trim();
        input.value == null || input.value == ""
            ? input.value = character.trim()
            : input.value += character.trim();
    }
    // back character Delete
    const delBack = (button) => {
        button.value = button.value.substring(0, button.value.length - 1)
    } // change sign button
    const changeSign = (button) => {
        button.value.substring(0, 1) == "-"
            ? button.value = button.value.substring(1, button.value.length)
            : button.value = "-" + button.value
    }
    // show result here 
    const showCalc = (calc) => {
        showResultVar.textContent = eval(calc.value)
    }
    // check number and characters
    const checkNum = (str) => {
        for (let i = 0; i < str.length; i++) {
            let ch = str.substring(i, i + 1)
            if (ch < "0" || ch > "9") {
                if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "." && ch != "(" && ch != ")") {
                    alert("invalid entry!")
                    return false
                }
            }
        }
        return true
    }
    calculator();