An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Some of Our Sources
- Simplebits
- Pearsonified
- Smashing Magazine
- Smashing Apps
- Noupe
- Crazy Leaf Design
- Reencoded
- Android Headlines
- Willems Lab
- TechPowerUp
Help Webnuz
Referal links:
September 28, 2021 07:40 am GMT
Original Link: https://dev.to/technicalvandar885/glass-morphism-calculator-using-pure-html-css-js-49pl
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>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; } }); }Youtube Tutorial
Watch Here
Find Me On:
Original Link: https://dev.to/technicalvandar885/glass-morphism-calculator-using-pure-html-css-js-49pl
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To