Get ready to build a sleek and modern Neumorphism calculator with dynamic dark and light themes! This tutorial will guide you through the process of creating a functional calculator while exploring the captivating world of Neumorphism design.
We’ll use HTML for structure, CSS for styling, and JavaScript for interactive theme switching, making this a perfect project for both beginners and experienced coders.
Neumorphism, with its soft, subtle design mimicking real-world objects, adds a unique touch of depth and visual appeal. Let’s dive in and create a calculator that’s both practical and visually stunning!
Step 1: HTML
This HTML code lays the groundwork for a visually appealing neumorphic calculator. It features buttons for numbers, common arithmetic operations, and a clear function. The calculator’s logic is likely handled by the linked JavaScript file, “script.js”. The design employs the elegant Montserrat font and offers a user-friendly dark/light mode switch for personalized experience.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Defines the character encoding for the document -->
<meta charset="UTF-8">
<!-- The title of the web page, which appears in the browser tab -->
<title>Neumorphism Calculator Dark/Light by Coding Classic</title>
<!-- Link to a Google Font (Montserrat) for styling the text -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap'>
<!-- Link to an external CSS file (style.css) for additional styles -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- Partial HTML content starts here -->
<!-- A div element for a toggle button (likely for switching between dark and light mode) -->
<div class="toggleBtn"></div>
<!-- The main container for the calculator -->
<div class="calculator">
<!-- A container for the calculator buttons and display -->
<div class="buttons">
<!-- A header element to display the current value or calculation result -->
<h2 id="value"></h2>
<!-- The calculator buttons, each represented by a <span> element -->
<!-- The "Clear" button for resetting the calculator -->
<span id="clear">Clear</span>
<!-- Division operator -->
<span>/</span>
<!-- Multiplication operator -->
<span>*</span>
<!-- Number buttons: 7, 8, 9 -->
<span>7</span>
<span>8</span>
<span>9</span>
<!-- Subtraction operator -->
<span>-</span>
<!-- Number buttons: 4, 5, 6 -->
<span>4</span>
<span>5</span>
<span>6</span>
<!-- Addition operator with a unique ID "plus" -->
<span id="plus">+</span>
<!-- Number buttons: 1, 2, 3 -->
<span>1</span>
<span>2</span>
<span>3</span>
<!-- Number buttons: 0, 00, and the decimal point -->
<span>0</span>
<span>00</span>
<span>.</span>
<!-- The equals button for calculating the result, with a unique ID "equal" -->
<span id="equal">=</span>
</div>
</div>
<!-- Partial HTML content ends here -->
<!-- Link to an external JavaScript file (script.js) for calculator functionality -->
<script src="./script.js"></script>
</body>
</html>
Step 2: CSS
This CSS code meticulously crafts the visual aesthetic of a neumorphic calculator. It sets the stage with general styles for font, page layout, and background color. The calculator features a unique neumorphic button design, complete with subtle shadows, and distinct styling for the “Clear,” “Plus,” and “Equals” buttons. A dedicated dark mode is included, featuring adjusted color palettes, and a toggle button nestled in the top right corner allows users to seamlessly switch between light and dark modes.
/* General Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #edf1f4;
}
.calculator {
position: relative;
width: 340px;
padding: 20px;
border-radius: 20px;
box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 20px #fffb;
}
.calculator .buttons {
position: relative;
display: grid;
}
.calculator .buttons #value {
position: relative;
grid-column: span 4;
user-select: none;
overflow: none;
width: 100%;
text-align: end;
color: #5166d6;
height: 100px;
line-height: 100px;
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.1), inset -5px -5px 20px #fff;
border-radius: 10px;
margin-bottom: 12px;
padding: 0 20px;
font-size: 2em;
font-weight: 500;
}
.calculator .buttons span {
position: relative;
padding: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 20px #fff;
margin: 10px;
border-radius: 10px;
cursor: pointer;
user-select: none;
min-width: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
color: #666;
border: 2px solid #edf1f4;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px #fff;
}
.calculator .buttons span:active {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.1), inset -5px -5px 10px #fff;
color: #f44336;
}
.calculator .buttons span#clear {
grid-column: span 2;
background-color: #f44336;
color: #fff;
border: 2px solid #edf1f4;
}
.calculator .buttons span#plus {
grid-row: span 2;
background-color: #31a935;
color: #fff;
border: 2px solid #edf1f4;
}
.calculator .buttons span#equal {
grid-row: span 2;
background-color: #2196f3;
color: #fff;
border: 2px solid #edf1f4;
}
.calculator .buttons span#clear:active,
.calculator .buttons span#plus:active,
.calculator .buttons span#equal:active {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px #fff,
inset 5px 5px 10px rgba(0, 0, 0, 0.1);
}
.toggleBtn {
position: fixed;
top: 20px;
right: 20px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #555;
cursor: pointer;
border: 2px solid #edf1f4;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px #fff;
}
.dark {
background: #282c2f;
}
.dark .calculator {
background: #33393e;
box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.25),
-15px -15px 20px rgba(255, 255, 255, 0.1);
}
.dark .calculator .buttons #value {
background: #33393e;
color: #eee;
box-shadow: inset 15px 15px 20px rgba(0, 0, 0, 0.5),
inset -15px -15px 20px rgba(255, 255, 255, 0.1);
}
.dark .calculator .buttons span {
color: #eee;
border: 2px solid #333;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25),
-5px -5px 10px rgba(255, 255, 255, 0.1);
}
.dark .calculator .buttons span:active {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.25),
inset -5px -5px 10px rgba(255, 255, 255, 0.1);
}
.dark .calculator .buttons span#clear,
.dark .calculator .buttons span#plus,
.dark .calculator .buttons span#equal {
border: solid 2px #333;
}
.dark .calculator .buttons span#clear:active,
.dark .calculator .buttons span#plus:active,
.dark .calculator .buttons span#equal:active {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.1);
}
.dark .toggleBtn {
background: #edf1f4;
border: 2px solid #333;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25),
-5px -5px 10px rgba(255, 255, 255, 0.25);
}JavaScript:
This JavaScript code brings the neumorphic calculator to life by adding interactive functionality. It carefully selects the calculator buttons, individual button elements, the display area, and the dark mode toggle button. Each button is assigned a click event listener. When the “Equals” button is pressed, the code evaluates the mathematical expression displayed. Clicking “Clear” resets the display. For all other buttons, their values are appended to the display.
The code also cleverly manages the dark mode toggle. When the toggle button is clicked, it dynamically adds or removes the “dark” class from the body element, instantly switching between light and dark themes.
// Select the main container for all calculator buttons
let buttons = document.querySelector(".buttons");
// Select all the <span> elements inside the buttons container (these are the calculator buttons)
let btn = document.querySelectorAll("span");
// Select the <h2> element where the calculator's current value or result is displayed
let value = document.getElementById("value");
// Select the toggle button (likely for switching between light and dark mode)
let toggleBtn = document.querySelector(".toggleBtn");
// Select the <body> element of the document
let body = document.querySelector("body");
// Loop through each button (span element)
for (let i = 0; i < btn.length; i++) {
// Add a click event listener to each button
btn[i].addEventListener("click", function () {
// If the "=" button is clicked
if (this.innerHTML == "=") {
// Evaluate the current expression in the value element and display the result
value.innerHTML = eval(value.innerHTML);
} else {
// If the "Clear" button is clicked
if (this.innerHTML == "Clear") {
// Clear the display by setting the value element's content to an empty string
value.innerHTML = "";
} else {
// For any other button, append its content to the current display value
value.innerHTML += this.innerHTML;
}
}
});
}
// Add a click event listener to the toggle button
toggleBtn.onclick = function () {
// Toggle the "dark" class on the body element to switch between dark and light modes
body.classList.toggle("dark");
};
Conclusion
Congratulations! You’ve successfully built a functional calculator with a sleek dark/light theme. You can now perform basic arithmetic operations and switch between themes with a single click. This project demonstrates the power of HTML, CSS, and JavaScript to create interactive and visually appealing web applications.