DEV Community

Cover image for Glass morphism Calculator Using Pure HTML, CSS & JS.
Technical Vandar
Technical Vandar

Posted on

7 2

Glass morphism Calculator Using Pure HTML, CSS & JS.

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
            }
        });
    }
Enter fullscreen mode Exit fullscreen mode

Youtube Tutorial

Watch Here




Find Me On:

Facebook
Youtube
Github

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more