In this tutorial, we’ll explore how to create a beautiful Glassy Calculator using HTML, CSS (with Tailwind), and JavaScript. Tailwind CSS Calculator Design, If you are new to building calculators or want to explore the elegance of glassmorphism design, this tutorial will show you exactly how to achieve that. We’ll also cover some cool animation tricks using GSAP (GreenSock Animation Platform). So, if you’re looking to learn how to make a calculator in JavaScript, you’re in the right place!
Learn how to build a sleek calculator with JavaScript and Tailwind CSS. This step-by-step tutorial walks you through creating a fully functional and stylish glassmorphism calculator. Perfect for beginners looking to build a calculator with JavaScript!
Key Technologies for Tailwind CSS Calculator Design
HTML: To structure the calculator.
Tailwind CSS: To style the interface with minimal effort.
JavaScript: To handle the calculator’s logic.
GSAP: To add smooth animations and create an engaging user experience.
Step 1: HTML Structure for JavaScript Calculator Tutorial
The first part of our calculator is the basic HTML structure for JavaScript Calculator Tutorial.
The <head> Section:
Tailwind CSS is being imported via CDN, which will simplify our styling process.
GSAP is loaded to allow for smooth animations later in the project.
The Body and Container Setup:
Here’s a brief breakdown:
- The body is styled with Tailwind CSS to be centered both vertically and horizontally (flex, items-center, justify-center).
- The outermost div provides a semi-transparent dark background.
- The inner div with the class “glass” applies our glassmorphism effect. We’ll cover that more in the CSS section.
Step 2: Creating the Display and Buttons
Calculator Display:
- The div with an id of “result” is where the calculator’s output is displayed.
- Tailwind classes like text-3xl and p-3 style the font size, padding, and text alignment.
- The border and rounded corners add to the sleek glassy look.
Calculator Buttons:
- The buttons are arranged in a grid with 4 columns using the grid grid-cols-4 class.
- Each button is styled with Tailwind CSS for padding, background colors, and hover effects.
- Buttons like “C” (Clear) have specific JavaScript functions tied to them using the onclick event handler.
Step 3: CSS for the Glassmorphism Effect
Background and Glass Effect:
- The body uses a background image that covers the entire screen and centers the content.
- The .glass class applies the glassmorphism effect:
- backdrop-filter: blur(20px) brightness(110%): Creates the frosted glass effect.
- background: rgba(255, 255, 255, 0.1): Gives a semi-transparent white background.
- border-radius: 10px: Adds smooth, rounded corners.
Button Hover Effect:
These rules control the button hover effect, making it more interactive by slightly changing the background color when hovered.
Step 4: JavaScript Logic for Calculator Functionality
Appending Numbers and Operators:
This function adds the clicked number or operator to the display. It ensures that the display doesn’t start with multiple zeroes and calls the animateResult() function to create a smooth transition effect when new values are entered.
Clearing the Display:
The clearDisplay() function resets the calculator display to zero, and like all other interactions, it triggers an animation using GSAP.
Deleting the Last Digit:
This function removes the last digit from the display. If all digits are removed, it ensures that the display returns to 0.
Calculating the Result:
The calculateResult() function evaluates the mathematical expression displayed using JavaScript’s eval(). If the expression is invalid, the display shows an error message.
Note: While using eval() in simple projects like this is fine, it’s generally discouraged for larger applications due to security concerns.
Step 5: Adding Animation with GSAP
To make the calculator even more engaging, we use GSAP animations. Let’s take a look at how these are applied.
Button Animation:
Whenever a button is clicked, it quickly shrinks to 60% of its original size, then grows back to its normal size, creating a satisfying click effect.
Staggered Animation on Page Load:
When the page loads, the entire calculator container fades in and moves slightly upward, creating a smooth entry effect.
Source code
If you like this design, then feel free to use it. Copy the code by clicking on Copy button provided below. First, you have to create two files. One of them is HTML and the other is JS after creating these files, paste the code provided below.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Code by - www.codeinfoweb.com -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Glassy Calculator</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
background-image: url("./bg.jpg");
background-size: cover;
background-position: center;
font-family: "Poppins", sans-serif;
}
.glass {
backdrop-filter: blur(20px) brightness(110%);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 10px;
}
.btn {
transition: all 0.2s;
}
.btn:hover {
background-color: rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body class="flex items-center justify-center h-screen">
<div
class="bg-gray-900 bg-opacity-60 p-4 rounded-xl w-full h-full flex items-center justify-center"
>
<div class="glass p-6 rounded-xl w-80 content-container">
<div
class="text-white text-right text-3xl p-3 h-16 mb-5 border-2 border-white/20 rounded-lg"
id="result"
>
0
</div>
<div class="grid grid-cols-4 gap-4 text-white">
<button
class="btn glass p-4 rounded-lg bg-rose-500 hover:bg-rose-400"
onclick="clearDisplay(); animateButton(this)"
>
C
</button>
<button
class="btn glass p-4 rounded-lg"
onclick="deleteDigit(); animateButton(this)"
>
X
</button>
<button
class="btn glass p-4 rounded-lg"
onclick="appendToDisplay('%'); animateButton(this)"
>
%
</button>
<button
class="btn glass p-4 rounded-lg"
onclick="appendToDisplay('/'); animateButton(this)"
>
/
</button>
<button
class="btn glass p-4 rounded-lg"
onclick="appendToDisplay('7'); animateButton(this)"
>
7
</button>
<button
class="btn glass p-4 rounded-lg"
onclick="appendToDisplay('8'); animateButton(this)"
>
8
</button>
<button
class="btn glass p-4 rounded-lg"
onclick="appendToDisplay('9'); animateButton(this)"
>
9
</button>
<button
class="btn glass p-4 rounded-lg"
onclick="appendToDisplay('*'); animateButton(this)"
>
*
</button>
<button
class="btn glass p-4 rounded-lg"
onclick="appendToDisplay('4'); animateButton(this)"
>
4
</button>
<button
class="btn glass p-4 rounded-lg"
onclick="appendToDisplay('5'); animateButton(this)"
>
5
</button>
<button
class="btn glass p-4 rounded-lg"
onclick="appendToDisplay('6'); animateButton(this)"
>
6
</button>
<button
class="btn glass p-4 rounded-lg"
onclick="appendToDisplay('-'); animateButton(this)"
>
-
</button>
<button
class="btn glass p-4 rounded-lg"
onclick="appendToDisplay('1'); animateButton(this)"
>
1
</button>
<button
class="btn glass p-4 rounded-lg"
onclick="appendToDisplay('2'); animateButton(this)"
>
2
</button>
<button
class="btn glass p-4 rounded-lg"
onclick="appendToDisplay('3'); animateButton(this)"
>
3
</button>
<button
class="btn glass p-4 rounded-lg"
onclick="appendToDisplay('+'); animateButton(this)"
>
+
</button>
<button
class="btn glass p-4 rounded-lg"
onclick="appendToDisplay('0'); animateButton(this)"
colspan="2"
>
0
</button>
<button
class="btn glass p-4 rounded-lg"
onclick="appendToDisplay('.'); animateButton(this)"
>
.
</button>
<button
class="btn glass w-32 p-4 rounded-lg bg-rose-500 hover:bg-rose-400"
onclick="calculateResult(); animateButton(this)"
>
=
</button>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
JavaScript Code
let resultDisplay = document.getElementById("result");
function appendToDisplay(value) {
if (resultDisplay.innerText === "0") {
resultDisplay.innerText = value;
} else {
resultDisplay.innerText += value;
}
animateResult();
}
function clearDisplay() {
resultDisplay.innerText = "0";
animateResult();
}
function deleteDigit() {
resultDisplay.innerText = resultDisplay.innerText.slice(0, -1);
if (resultDisplay.innerText === "") {
resultDisplay.innerText = "0";
}
animateResult();
}
function calculateResult() {
try {
resultDisplay.innerText = eval(resultDisplay.innerText);
} catch {
resultDisplay.innerText = "Error";
}
animateResult();
}
function animateResult() {
gsap.fromTo(
"#result",
{ scale: 1.1, opacity: 0.8 },
{ scale: 1, opacity: 1, duration: 0.3 }
);
}
function animateButton(button) {
gsap.to(button, { scale: 0.6, duration: 0.1 });
gsap.to(button, { scale: 1, duration: 0.2, delay: 0.1 });
}
window.onload = function () {
gsap.from(".content-container", {
opacity: 0,
y: 80,
duration: 2,
ease: "power3.out",
stagger: {
amount: 0.7,
},
});
};
Conclusion
Congratulations! You’ve built a fully functional JavaScript calculator with a modern glassy design and cool animations. This tutorial covers not only the calculator logic but also how to use CSS and Tailwind to create a visually appealing interface. If you’re looking for more tips on how to make a calculator in JavaScript or want to explore advanced designs, feel free to experiment with more styles and features like adding square roots or exponents!
