Introduction
In this tutorial, we will build a Glassmorphism Calculator using HTML, CSS, and JavaScript. Glassmorphism is a modern design trend that gives elements a frosted glass appearance, creating a sleek and elegant UI.
By the end of this tutorial, you’ll have a fully functional calculator with:
- Aesthetic glassmorphism UI
- Basic arithmetic operations
- Keyboard support
- Responsive design
Let’s get started!
1. Setting Up the Project
To begin, create a project folder and inside it, create three files:
index.html– Structure of the calculator.style.css– Styling for the Glassmorphism effect.script.js– Logic for calculations.
2. Writing the HTML Structure
The HTML file contains the structure of our calculator.
📌 Features:
- A display screen to show input and results.
- Buttons for numbers, operations, and functions like
AC,DEL, and=.
🔹 HTML Code (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<div class="display">
<div class="previous-operand"></div>
<div class="current-operand">0</div>
</div>
<div class="buttons">
<button class="clear">AC</button>
<button class="delete">DEL</button>
<button class="operation">%</button>
<button class="operation">÷</button>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operation">×</button>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operation">-</button>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operation">+</button>
<button class="number">0</button>
<button class="number">.</button>
<button class="equals">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
3. Styling with Glassmorphism in CSS
To achieve a frosted glass effect, we use:
backdrop-filter: blur(20px);for the glass effect.- Soft box shadows to enhance depth.
- Smooth hover animations for a sleek UI.
🔹 CSS Code (style.css):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Arial", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(45deg, #2c3e50, #3498db, #2980b9);
overflow: hidden;
}
/* Glassmorphism Effect */
.calculator {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 24px;
padding: 30px;
width: 350px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
/* Display Screen */
.display {
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
padding: 20px;
margin-bottom: 25px;
text-align: right;
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Buttons */
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
button {
border-radius: 16px;
padding: 20px;
font-size: 20px;
cursor: pointer;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(5px);
transition: all 0.3s ease;
}
button:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
button:active {
transform: translateY(0);
}
.equals {
background: rgba(52, 152, 219, 0.3);
grid-column: span 2;
}
.clear, .delete {
background: rgba(231, 76, 60, 0.3);
}
@media (max-width: 360px) {
.calculator {
width: 100%;
margin: 10px;
padding: 20px;
}
}
4. Adding Calculator Functionality with JavaScript
Now, let’s add interactivity to our calculator.
🔹 JavaScript Code (script.js):
class Calculator {
constructor() {
this.previousOperand = "";
this.currentOperand = "0";
this.operation = undefined;
}
clear() {
this.previousOperand = "";
this.currentOperand = "0";
this.operation = undefined;
}
delete() {
this.currentOperand = this.currentOperand.length === 1 ? "0" : this.currentOperand.slice(0, -1);
}
appendNumber(number) {
if (this.currentOperand.includes(".") && number === ".") return;
this.currentOperand = this.currentOperand === "0" ? number : this.currentOperand + number;
}
chooseOperation(operation) {
if (this.currentOperand === "") return;
if (this.previousOperand !== "") this.compute();
this.operation = operation;
this.previousOperand = this.currentOperand;
this.currentOperand = "0";
}
compute() {
let result;
const prev = parseFloat(this.previousOperand);
const current = parseFloat(this.currentOperand);
if (isNaN(prev) || isNaN(current)) return;
switch (this.operation) {
case "+":
result = prev + current;
break;
case "-":
result = prev - current;
break;
case "×":
result = prev * current;
break;
case "÷":
result = current === 0 ? "Error" : prev / current;
break;
case "%":
result = (prev * current) / 100;
break;
default:
return;
}
this.currentOperand = result.toString();
this.previousOperand = "";
this.operation = undefined;
}
updateDisplay() {
document.querySelector(".current-operand").textContent = this.currentOperand;
document.querySelector(".previous-operand").textContent = this.operation ? `${this.previousOperand} ${this.operation}` : "";
}
}
const calculator = new Calculator();
document.querySelectorAll(".number").forEach(button => button.addEventListener("click", () => {
calculator.appendNumber(button.textContent);
calculator.updateDisplay();
}));
document.querySelectorAll(".operation").forEach(button => button.addEventListener("click", () => {
calculator.chooseOperation(button.textContent);
calculator.updateDisplay();
}));
document.querySelector(".equals").addEventListener("click", () => {
calculator.compute();
calculator.updateDisplay();
});
document.querySelector(".clear").addEventListener("click", () => calculator.clear() && calculator.updateDisplay());
document.querySelector(".delete").addEventListener("click", () => calculator.delete() && calculator.updateDisplay());
Conclusion
You’ve successfully built a Glassmorphism Calculator! This calculator is visually appealing, fully functional, and responsive. 🚀 Let me know if you have any questions!
