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)