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; } }); } 
Top comments (0)