A Simple and Working Calculator Using Javascript And Neumorphism CSS
Hi, let’s play around today by creating a Simple and Working Calculator Using Javascript And Neumorphism CSS. If you don’t know to code and you are willing to learn, you can start from scratch.
SOURCE CODE of A Simple and Working Calculator Using Javascript And Neumorphism CSS
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>
CSS
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
body {
background: #e0e0e0;
font-family: 'Montserrat', sans-serif;
}
.container {
width: 320px;
height: 490px;
border-radius: 20px;
border-radius: 18px;
background: #e0e0e0;
box-shadow: 5px 5px 10px #c1c1c1,
-5px -5px 10px #ffffff;
margin: 0 auto;
padding: 32px 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.container .result {
width: 100%;
height: 100px;
border-radius: 10px;
border-radius: 18px;
background: #e0e0e0;
box-shadow: 5px 5px 10px #c1c1c1,
-5px -5px 10px #ffffff;
}
.container .result p {
font-size: 25pt;
overflow-y: auto;
text-align: right;
color: #00000;
padding-right: 10px;
}
.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;
font-size:18px;
height: 60px;
display: grid;
place-content: center;
border-radius: 20px;
border-radius: 18px;
background: #e0e0e0;
box-shadow: 5px 5px 10px #c1c1c1,
-5px -5px 10px #ffffff;
}
.button:hover{
color: #3498db;
border-radius: 20px;
background: #d11a1a;
box-shadow: 5px 5px 10px #a31414,
-5px -5px 10px #ff2020;
}
/* Big Button */
.container .buttons .zero {
grid-column: 1/ 3;
width: 100%;
font-size: 20px;
color: #00000;
border-radius: 10px;
border-radius: 18px;
background: #e0e0e0;
box-shadow: 5px 5px 10px #c1c1c1,
-5px -5px 10px #ffffff;
}
.action-btn {
color: grey;
font-weight: bold;
}
.calc-action-btn{
color: #00000;
font-size: 60px;
font-weight: bold;
}
JAVASCRIPT
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";
})
Have a nice day.
Awesome boss
Thank you.
Great work sir
You are a lives saver. God bless your good will