Here Is The Working Calculator with glassmorphism effect.

SOURCE CODE:

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphism Calculator</title>
</head>
<body>
    <div class="calc-body">
        <input type="text" name="" id="inp" readonly>
        <table>
            <tr>
                <td>(</td>
                <td>)</td>
                <td>C</td>
                <td>/</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>+</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>*</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>-</td>
            </tr>
            <tr>
                <td class="zero">0</td>
                <td>.</td>
                <td>%</td>
                <td class="equal">=</td>
            </tr>
        </table>
    </div>
</body>
</html>

CSS CODE:

*{
    font-family: sans-serif;
    user-select: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
body{
    justify-content: center;
    align-items: center;
    display: flex;
    min-height: 100vh;
    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}
.calc-body{
    height: 65.5vh;
    width: 21vw;
    background: radial-gradient(at 100% 50%, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.5));
    border-radius: 15px;
}
input{
    font-size: 45px;
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    height: 105px;
    width: 21vw;
    border: none;
    outline: none;
    background: transparent;
}
table{
    justify-content: center;
    align-items: center;
    display: flex;
}
td{
    cursor: pointer;
    font-size: 30px;
    text-align: center;
    height: 70px;
    width: 70px;
    border-right: 1px solid rgba(192, 192, 192, 0.2);
    border-bottom: 1px solid rgba(192, 192, 192, 0.2);
}
td:hover{
    background-color: rgb(255, 0, 179);
}
.zero{
    border-bottom-left-radius: 15px;
}
.equal{
    border-bottom-right-radius: 15px;
}

JavaScript Code:

 let screen=document.getElementById('inp');
    let buttons=document.querySelectorAll('td');
    let screenValue='';
    for(item of buttons){
        item.addEventListener('click', (e)=>{
            buttonText=e.target.innerText;
            if(buttonText=="C"){
                screenValue="";
                screen.value=screenValue;
            }
            else if(buttonText=="="){
                screen.value=eval(screenValue);
            }
            else{
                screenValue+=buttonText;
                screen.value=screenValue;
            }
        });
    }