Scientific Calculator Using HTML, CSS and JS

HTML

CSS

Output

HTML

<!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

: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

/*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();

Ui Code Snippets

Scientific Calculator Using HTML, CSS and JS

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

Scientific Calculator Using HTML, CSS and JS

HTML

CSS

JS

Output

Network Marketing

SEO Course