Neumorphic calculator is a 3D calculator made with Html,CSS and JAVASCRIPT it is made by Coding Vlogs youtube Channel. you can download the source code or copy source code and use it for free. if you have not subscribe our youtube channel so subscribe now we are creating beautiful coding project and provide source code for free. For Download Source Code Scroll Down ↓
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/styles.css" />
<title>Coding Vlogs®</title>
</head>
<body>
<main>
<input type="number" value="0" />
<div class="keys">
<button class="op__key" op="clear">c</button>
<button class="op__key" op="negate">+/-</button>
<button class="op__key" op="percent">%</button>
<button class="op__key" op="divide">/</button>
<button class="num__key">7</button>
<button class="num__key">8</button>
<button class="num__key">9</button>
<button class="op__key" op="multiply">x</button>
<button class="num__key">4</button>
<button class="num__key">5</button>
<button class="num__key">6</button>
<button class="op__key" op="subtract">-</button>
<button class="num__key">1</button>
<button class="num__key">2</button>
<button class="num__key">3</button>
<button class="op__key" op="add">+</button>
<span></span>
<button class="num__key">0</button>
<button class="num__key">.</button>
<button class="eq__key">=</button>
</div>
</main>
</body>
</html>
Style (CSS)
@import url("https://fonts.googleapis.com/css?family=Fira+Mono&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background: #e9e9e9;
font-family: "Fira Mono", monospace, sans-serif;
font-size: 20px;
}
body {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
main {
box-shadow: -6px -6px 9px #fff, 6px 6px 9px rgba(0, 0, 0, 0.4);
padding: 2rem;
border-radius: 30px;
}
main input, main button {
outline: none;
}
main input::-webkit-outer-spin-button,
main input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
main input[type=number] {
-moz-appearance: textfield;
}
main input {
box-shadow: inset -6px -6px 9px #fff, inset 6px 6px 9px rgba(0, 0, 0, 0.4);
width: 320px;
height: 60px;
padding: 16px 32px;
text-align: right;
border: none;
border-radius: 30px;
text-shadow: -1px -1px 2px #fff, 2px 2px 2px rgba(0, 0, 0, 0.4);
}
main .keys {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 0.8rem;
margin-top: 20px;
}
main button {
box-shadow: -6px -6px 9px #fff, 6px 6px 9px rgba(0, 0, 0, 0.4);
width: 60px;
height: 60px;
border: none;
border-radius: 30px;
cursor: pointer;
background: e9e9e9;
}
main button:hover, main button:active {
background: #ccc;
}
main button:active {
box-shadow: inset -6px -6px 9px #fff, inset 6px 6px 9px rgba(0, 0, 0, 0.4);
}
main .op__key {
color: #ff652f;
}
main .eq__key {
color: #ff652f;
}
JavaScript
const $input = document.querySelector("input");
document.querySelectorAll(".num__key").forEach(el => {
el.onclick = () =>
($input.value =
$input.value !== "0" ? $input.value + el.innerText : el.innerText);
});
const buffer = [];
const opCallback = opName => () => {
let currentVal = parseFloat($input.value);
if (opName === "percent") {
currentVal *= 0.01;
$input.value = currentVal;
} else {
if (buffer && buffer.length) {
buffer.push({ value: currentVal });
const result = evaluate(buffer);
buffer.push({ value: result });
buffer.push({ value: opName });
$input.value = "";
} else {
buffer.push({ value: currentVal });
buffer.push({ value: opName });
$input.value = "";
}
}
};
const evaluate = buffer => {
const secondOPerand = buffer.pop().value;
const operator = buffer.pop().value;
const firstOPerand = buffer.pop().value;
switch (operator) {
case "add":
return firstOPerand + secondOPerand;
break;
case "subtract":
return firstOPerand - secondOPerand;
break;
case "multiply":
return firstOPerand * secondOPerand;
break;
case "divide":
return firstOPerand / secondOPerand;
break;
default:
return secondOPerand;
}
};
for (const opName of ["add", "subtract", "multiply", "divide", "percent"]) {
document.querySelector(`.op__key[op=${opName}]`).onclick = opCallback(opName);
}
document.querySelector(".eq__key").onclick = () => {
if (buffer && buffer.length) {
buffer.push({ value: parseFloat($input.value) });
$input.value = evaluate(buffer);
}
};
document.querySelector(".op__key[op=clear]").onclick = () => {
$input.value = 0;
buffer.length = 0;
};
document.querySelector(".op__key[op=negate]").onclick = () =>
($input.value = -parseFloat($input.value));