<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Neumorphism calculator design</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<div class="result">
<p id="result-box">0</p>
</div>
<div class="buttons">
<div class="button action-btn" id="clear"> AC </div>
<div class="button action-btn"> MC</div>
<div class="button num-button action-btn"> %</div>
<div class="button num-button calc-action-btn"> /</div>
<div class="button num-button seven">7</div>
<div class="button num-button eight">8</div>
<div class="button num-button nine">9</div>
<div class="button num-button calc-action-btn">*</div>
<div class="button num-button four">4</div>
<div class="button num-button five">5</div>
<div class="button num-button six">6</div>
<div class="button num-button calc-action-btn">-</div>
<div class="button num-button one">1</div>
<div class="button num-button two">2</div>
<div class="button num-button three">3</div>
<div class="button num-button calc-action-btn">+</div>
<div class="button num-button zero">0</div>
<div class="button num-button point">.</div>
<div class="button calc-action-btn" id="total">=</div>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js'></script>
<script src="./script.js"></script>
</body>
</html>@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
body {
background: #FF6F61;
font-family: 'Montserrat', sans-serif;
}
.container {
background: #EEEEEE;
width: 320px;
height: 550px;
border-radius: .5em;
box-shadow: 4px 4px 10px 0 rgba(0,0,2,.3);
margin: 0 auto;
padding: 32px 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.container .result {
width: 100%;
height: 150px;
}
.container .result p {
font-size: 45pt;
overflow-y: auto;
text-align: right;
}
.container .buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1em;
}
.container .buttons .button, .container .buttons .num-button {
cursor: grab;
text-align: center;
width: 60px;
height: 60px;
display: grid;
place-content: center;
border-radius: 50%;
box-shadow: 6px 6px 16px 0 rgba(209, 205, 199, .5),
-6px -6px 16px 0 rgba(255, 255, 255, .5);
}
/* UTILITIES*/
.container .buttons .zero {
grid-column: 1/ 3;
width: 100%;
border-radius: 10px;
box-shadow: 6px 6px 16px 0 rgba(209, 205, 199, .5),
-6px -6px 16px 0 rgba(255, 255, 255, .5);
}
.action-btn {
color: grey;
font-weight: bold;
}
.calc-action-btn{
color: orange;
font-weight: bold;
}gsap.from('.container', {duration: 2, opacity: 0, stagger: 0.5, y: 500});
let btns = document.querySelectorAll(".num-button");
let allBtns = document.querySelectorAll(".button");
let resultBox = document.querySelector("#result-box");
let clearBtn = document.querySelector('#clear');
let total = document.querySelector("#total");
let btnSpread = [...btns];
let allBtnSpread = [...allBtns];
// For Number Inputs
btnSpread.forEach((button, i) => {
button.addEventListener("click", () => {
// Inner Values for calculator
if (resultBox.innerHTML == "0") {
resultBox.innerHTML = "";
}
let value = btns[i].innerHTML;
resultBox.innerHTML += value;
});
});
// Function to evalute Strings
function evaluate(fn) {
return new Function('return ' + fn)();
}
// To calculate All Input
total.addEventListener('click', ()=> {
let allInputs = resultBox.innerHTML;
resultBox.innerHTML = evaluate(allInputs);
console.log(evaluate(allInputs));
})
// Clear all Inputs
clearBtn.addEventListener('click', ()=> {
resultBox.innerHTML = "0";
})
// Add Css Style Animation
allBtnSpread.forEach((button, i)=> {
button.addEventListener('click', ()=> {
let element = allBtns[i];
element.style.boxShadow ='inset -6px -6px 16px 0 rgba(255, 255, 255, .5), inset 6px 6px 16px 0 rgba(209, 205, 199, .5)';
setTimeout(function(){
element.style.boxShadow = " 6px 6px 16px 0 rgba(209, 205, 199, .5),-6px -6px 16px 0 rgba(255, 255, 255, .5)"
}, 0300);
})
})
External CSS
This Pen doesn't use any external CSS resources.