Javascript Calculator

Javascript Calculator

Javascript Calculator

Javascript Calculator is the best Project For Beginners in Javascript. Here You will learn the new Function eval() and other statements like IF_ELSE. This is the Wonderful Project Tryout.

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>CNB Calculator</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Poppins&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="calculator">
            <div class="display">
                <input type="text" name="" id="inputs">
                <div class="outputs">
                    <!-- 100 -->
                </div>
            </div>
            <div class="buttons">
                <div class="rows">
                    <button class="clear">C</button> <button><</button> 
                    <button>%</button> <button>&divide;</button>
                </div>

                <div class="rows">
                    <button>7</button> <button>8</button> 
                    <button>9</button> <button>-</button>
                </div>
                <div class="rows">
                    <button>4</button> <button>5</button> 
                    <button>6</button> <button>+</button>
                </div>
                <div class="rows">
                    <button>1</button> <button>2</button> 
                    <button>3</button> <button>X</button>
                </div>
                <div class="rows">
                    <button>0</button> <button>&PlusMinus;</button> 
                    <button>.</button> <button>=</button>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS

*{
    margin: 0;
    padding: 0;
}
.container{
    display:flex;
    justify-content: center;
    align-items:center;
    height:100vh;
}
.calculator{
    /* height:450px; */
    padding-bottom:2%;
    width:350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top:5%;
    background-color:#16213E;
    border-radius:5px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.calculator .display{
    height:100px;
    width:320px;
    background-color:#0F3460;
}
#inputs{
    height:50px;
    width:100%;
    border:none;
    background-color:transparent;
    outline:none;
    color:white;
    font-family:poppins;
    font-size:1.2rem;
    padding-left:2%;
}
.outputs{
    text-align:right;
    padding-right:2%;
    color:white;
    font-family:Gilroy;
    font-size:1.5rem;
}
.buttons{
    width:320px;
    margin-top:5%;
}
.buttons .rows{
    display: flex;
    justify-content:space-between;
}
.buttons button{
    width:75px;
    height:50px;
    font-family:Poppins;
    font-weight:bolder;
    font-size:1.2rem;
    margin-bottom:2%;
    outline:none;
    border:none;
    border-radius:2px;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px inset;
}
.buttons button:hover{
    transition-duration:0.2s;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.clear{
    background-color:#E94560;
    color:white;
}

JAVASCRIPT

let buttons = document.querySelectorAll('button');
let inputs = document.getElementById('inputs');
let outputs = document.querySelector('.outputs');
buttons.forEach(element => {
    element.addEventListener('click',(e)=>{
        if(e.target.innerHTML=="="){
            outputs.textContent = eval(inputs.value);
        }else if(e.target.innerHTML=="C"){
            inputs.value="";
            outputs.textContent="";
        }else if(e.target.innerHTML=="X"){
            inputs.value = inputs.value + "*";
        }else if(e.target.innerHTML=="÷"){
            inputs.value = inputs.value + "/";
        }else if(e.target.innerHTML=="&lt;"){
            inputs.value = inputs.value.slice(0,-1);
        }else if(e.target.innerHTML=="±"){
            let output = parseInt(outputs.textContent);
            if(output<0){
                outputs.textContent = outputs.textContent.slice(1);
            }else{
                outputs.textContent = "-"+outputs.textContent;
            }
            console.log(output);
        }
        else{
            inputs.value = inputs.value + e.target.innerHTML;
        }
    })
});

Did you find this article valuable?

Support Dipesh Murmu by becoming a sponsor. Any amount is appreciated!