Crafting a calculator can be quite the challenge, but it’s a goal many web developers aim to achieve on their journey. Fortunately, with HTML, CSS, and JavaScript, creating a functional calculator is totally doable.
In today’s blog, you’re in for a treat! We’ll walk you through creating a Responsive Calculator using HTML, CSS, and JavaScript. This calculator won’t just cover the basics – it’ll handle division, multiplication, addition, subtraction, and more, making it a versatile tool for various calculations.
HTML :
This below HTML code creates a neumorphic calculator with light/dark themes. It includes a toggle switch for theme selection and uses buttons with neumorphic design. The calculator layout organizes digits, operations, and a display. The JavaScript file "script.js" is linked for functionality.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Neumorphic Calculator Light/Dark Themed</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class='calculator' id='calc'>
<div class='toggle'>
<div class='theme-switch-wrapper'>
<label class='theme-switch' for='checkbox'>
<input id='checkbox' type='checkbox'>
<div class='slider round'></div>
</label>
</div>
</div>
<div class='display'></div>
<button class='neumorphic c'>C</button>
<button class='neumorphic signed'>+/-</button>
<button class='neumorphic percent'>%</button>
<button class='neumorphic divide'>÷</button>
<button class='neumorphic seven'>7</button>
<button class='neumorphic eight'>8</button>
<button class='neumorphic nine'>9</button>
<button class='neumorphic times'>x</button>
<button class='neumorphic four'>4</button>
<button class='neumorphic five'>5</button>
<button class='neumorphic six'>6</button>
<button class='neumorphic minus'>-</button>
<button class='neumorphic one'>1</button>
<button class='neumorphic two'>2</button>
<button class='neumorphic three'>3</button>
<button class='neumorphic plus'>+</button>
<button class='neumorphic zero'>0</button>
<button class='neumorphic decimal'>.</button>
<button class='neumorphic equals'>=</button>
</div>
<script src="./script.js"></script>
</body>
</html>
CSS :
This Below CSS code styles a neumorphic calculator with a grid layout and supports a dark theme. It uses custom properties for colors and defines neumorphic design elements for the display, buttons, and theme switcher. The grid layout organizes the calculator buttons, and a toggle switch smoothly transitions between light and dark themes. The styling ensures a polished appearance with rounded elements and proper spacing.
@import url("https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap");
:root {
--body-bg-color: #e0e5ec;
--bg-color: #e0e5ec;
--primary-font-color: rgba(144, 152, 168, 1);
--secondary-font-color: rgba(51, 64, 89, 1);
--soft-high-light: rgba(255, 255, 255, 0.43);
--dark-high-light: rgba(217, 210, 200, 0.51);
}
[data-theme="dark"] {
--bg-color: #131419;
--primary-font-color: #c7c7c7;
--secondary-font-color: #03a9f4;
--soft-high-light: rgba(255, 255, 255, 0.05);
--dark-high-light: rgba(0, 0, 0, 0.51);
}
* {
box-sizing: border-box;
}
body {
background: var(--body-bg-color);
color: var(--primary-font-color);
}
.calculator {
background: var(--bg-color);
color: var(--primary-font-color);
}
.display {
box-shadow: 6px 6px 16px 0 var(--dark-high-light),
-6px -6px 16px 0 var(--soft-high-light),
inset 6px 6px 5px 0 var(--dark-high-light),
inset -6px -6px 5px 0 var(--soft-high-light);
border: 5px solid var(--soft-high-light);
color: var(--secondary-font-color);
}
.neumorphic {
box-shadow: 6px 6px 16px 0 var(--dark-high-light),
-6px -6px 16px 0 var(--soft-high-light);
border-radius: 50%;
transition: 0.1s all ease-in-out;
border: 1px solid var(--soft-high-light);
}
.neumorphic:hover {
box-shadow: inset 6px 6px 5px 0 var(--dark-high-light),
inset -6px -6px 5px 0 var(--soft-high-light);
color: var(--secondary-font-color);
}
/*
GRID LAYOUT & NON NEUMORPHIC
*/
body {
display: grid;
width: 100vw;
height: 100vh;
align-items: center;
justify-items: center;
font-family: "Odibee Sans";
font-size: 16px;
}
.display {
border-radius: 12px;
transition: 0.1s all ease-in-out;
height: 65px;
line-height: 60px;
text-align: right;
padding-right: 20px;
width: 100%;
font-size: 32px;
letter-spacing: 4px;
}
.calculator {
box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas: "toggle toggle toggle toggle" "display display display display" "c signed percent divide" "seven eight nine times" "four five six minus" "one two three plus" "zero zero decimal equals";
align-items: center;
justify-items: center;
grid-row-gap: 25px;
grid-column-gap: 25px;
border-radius: 20px;
padding: 50px 40px 40px 40px;
}
.c,
.signed,
.percent,
.divide,
.seven,
.eight,
.nine,
.times,
.four,
.five,
.six,
.minus,
.one,
.two,
.three,
.plus,
.zero,
.decimal,
.equals {
text-align: center;
height: 60px;
width: 60px;
line-height: 60px;
cursor: pointer;
}
.zero {
width: 100%;
border-radius: 12px;
}
.toggle {
grid-area: toggle;
}
.display {
grid-area: display;
}
.c {
grid-area: c;
}
.signed {
grid-area: signed;
}
.percent {
grid-area: percent;
}
.divide {
grid-area: divide;
}
.seven {
grid-area: seven;
}
.eight {
grid-area: eight;
}
.nine {
grid-area: nine;
}
.times {
grid-area: times;
}
.four {
grid-area: four;
}
.five {
grid-area: five;
}
.six {
grid-area: six;
}
.minus {
grid-area: minus;
}
.one {
grid-area: one;
}
.two {
grid-area: two;
}
.three {
grid-area: three;
}
.plus {
grid-area: plus;
}
.zero {
grid-area: zero;
}
.decimal {
grid-area: decimal;
}
.equals {
grid-area: equals;
}
.toggle {
width: 100%;
}
.theme-switch-wrapper {
display: block;
float: right;
align-items: center;
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input {
display: none;
}
.slider {
box-shadow: 6px 6px 16px 0 var(--dark-high-light),
-6px -6px 16px 0 var(--soft-high-light),
inset 6px 6px 5px 0 var(--dark-high-light),
inset -6px -6px 5px 0 var(--soft-high-light);
background-color: inherit;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: 0.4s;
border: 2px solid rgba(255, 255, 255, 0.2);
}
.slider:before {
background-color: var(--bg-color);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
bottom: 4px;
content: "";
height: 22px;
left: 4px;
position: absolute;
transition: 0.4s;
width: 22px;
}
input:checked + .slider {
background-color: var(--bg-color);
box-shadow: 6px 6px 16px 0 var(--dark-high-light),
-6px -6px 16px 0 var(--soft-high-light),
inset 6px 6px 5px 0 var(--dark-high-light),
inset -6px -6px 5px 0 var(--soft-high-light);
}
input:checked + .slider:before {
background-color: var(--secondary-font-color);
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
bottom: 0.29rem;
}
JavaScript :
This JavaScript code handles the functionality of a calculator and a theme switcher. It captures button clicks, updates the display accordingly, and evaluates expressions when the “=” button is clicked. The calculator supports basic arithmetic operations, decimal points, and clearing. Additionally, it includes a theme switcher using a checkbox, toggling between “dark” and “light” themes by updating the data-theme attribute on the html element.
var keys = document.querySelectorAll("#calc span");
var operators = ["+", "-", "x", "÷"];
var decimalAdded = false;
for (var i = 0; i < keys.length; i++) {
keys[i].onclick = function (e) {
var input = document.querySelector(".display");
var inputVal = input.innerHTML;
var btnVal = this.innerHTML;
if (btnVal == "C") {
input.innerHTML = "";
decimalAdded = false;
} else if (btnVal == "=") {
var equation = inputVal;
var lastChar = equation[equation.length - 1];
equation = equation.replace(/x/g, "*").replace(/÷/g, "/");
if (operators.indexOf(lastChar) > -1 || lastChar == ".")
equation = equation.replace(/.$/, "");
if (equation) input.innerHTML = eval(equation);
decimalAdded = false;
} else if (operators.indexOf(btnVal) > -1) {
var lastChar = inputVal[inputVal.length - 1];
if (inputVal != "" && operators.indexOf(lastChar) == -1)
input.innerHTML += btnVal;
else if (inputVal == "" && btnVal == "-") input.innerHTML += btnVal;
if (operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
input.innerHTML = inputVal.replace(/.$/, btnVal);
}
decimalAdded = false;
} else if (btnVal == ".") {
if (!decimalAdded) {
input.innerHTML += btnVal;
decimalAdded = true;
}
} else {
input.innerHTML += btnVal;
}
// prevent page jumps
e.preventDefault();
};
}
const toggleSwitch = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute("data-theme", "dark");
} else {
document.documentElement.setAttribute("data-theme", "light");
}
}
toggleSwitch.addEventListener("change", switchTheme, false);
Awesome work, everyone! We’ve just wrapped up creating a Neumorphic Calculator featuring both Light and Dark themes using HTML, CSS, and a touch of JavaScript. Whether you’re a coding pro or just starting out, you now have a sleek and versatile calculator at your fingertips. Kudos on completing the project! Keep coding, stay curious, and enjoy the satisfaction of building something cool. Great job!
Facing challenges in your project? No problem! The source code is available for you. Simply hit Download and begin your coding journey. May your coding be filled with joy!
