<!DOCTYPE html>

<html>
    <head>
        <title>Calculator | JavaScript Mini Project</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="calculator">
        <div class="buttons">
        <h2 id="value">555</h2>
        <span>clear</span>
        <span>/</span>
        <span>*</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>-</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span id="plus">+</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>0</span>
        <span>00</span>
        <span>.</span>
        <span id="equal">=</span>
        </div>
        </div>
        <script>
            let buttons = document.querySelector('.buttons');
            let btn = document.querySelectorAll('span');
            let value = document.getElementById('value');

            for(let i=0;i<btn.length;i++){
                btn[i].addEventListener("click", function(){

                    if(this.innerHTML=="="){
                    value.innerHTML = eval(value.innerHTML);
                    }else{
                        if(this.innerHTML=="clear"){
                            value.innerHTML = "";
                        }
                        else{
                            value.innerHTML += this.innerHTML;
                        }
                    }
                })
            }
        </script>
    </body>
</html>


*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: consolas;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #edf1f4;
}
.calculator
{
    position: relative;
    width: 330px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 15px 15px 20px rgba(0,0,0,0.1),
    -15px -15px 20px #fffb;
}
.calculator  .buttons
{
    position: relative;
    display: grid;
}
.calculator .buttons #value
{
    position: relative;
    grid-column: span 4;
    user-select: none;
    overflow: none;
    width: 100%;
    text-align: end;
    color: #5166d6;
    height: 100px;
    line-height: 100px;
    box-shadow: inset 5px 5px 10px  rgba(0,0,0,0.1),
    inset -5px -5px 20px #fff;
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 0 20px;
    font-size: 2em;
    font-weight: 500;
}
.calculator .buttons span
{
    position: relative;
    padding: 10px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1),
    inset -5px -5px 20px #fff;
    margin: 10px ;
    cursor: pointer;
    user-select: none;
    min-width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    color: #666;
    border: 2px solid #edf1f4;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1),
    -5px -5px 10px #fff;
    border-radius: 10px;
}
.calculator .buttons span:active
{
    box-shadow:  inset 5px 5px 10px rgba(0,0,0,0.1),
    inset -5px -5px 10px #fff;
    color: red;
}
.calculator .buttons span#clear:active,
.calculator .buttons span#plus:active,
.calculator .buttons span#equal:active
{
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1),
    -5px -5px 10px rgba#fff,
    inset 5px 5px 10px rgba(0,0,0,0.1);
}