Animated Glassmorphism Calculator Using HTML, CSS, and JavaScript
By Bytewebster - February 10, 2024
In this web development project, we will teach you how to create an animated glassmorphism calculator using the help of HTML, CSS, and JavaScript. We will first explain its HTML structure, then the CSS part, and finally, we will explain JavaScript.
Working:
This is a calculator built in JavaScript, and with the help of CSS, we have designed this calculator. In this calculator, we can perform almost all basic calculations, such as addition, subtraction, multiplication, and division. Additionally, we have provided a clear option in this calculator. In addition, we have added several more features to this JavaScript calculator to enhance its capabilities for performing calculations.
Detailed Overview of Project
Though this calculator helps you learn JavaScript, it also lets you pick up CSS skills. In this project, we used the Glassmorphism design style for the calculator's appearance.
If you don't know what glassmorphism designs are in CSS, basically, glassmorphism is a type of user interface. It involves creating a glass-like effect in design. Now, let's begin by explaining the HTML structure of this Animated JavaScript calculator.
HTML Structure
The HTML structure of this animated calculator is enclosed in a container box. and inside the box, there are six squares, which are arranged in a row. These are basically just design elements, and they don't affect the calculator's actual function.
Within the container, there is a calculator area with a special design effect (tilt effect). and in the calculator area, there is a form that holds the interactive elements.
On the top of this calculator, there's a display screen (a text input) where the numbers and calculations are shown. It's set to read-only so users can't type directly.
<div class="box">
<div class="square" style="--i:0;"></div>
<div class="square" style="--i:1;"></div>
<div class="square" style="--i:2;"></div>
<div class="square" style="--i:3;"></div>
<div class="square" style="--i:4;"></div>
<div class="square" style="--i:5;"></div>
<div class="container" data-tilt data-tilt-full-page-listening data-tilt-axis="x">
<form class="calculator" name="calc">
<input type="text" readonly class="value" name="txt"/>
<span class="num clear" onclick="calc.txt.value = ''">c</span>
<span class="num" onclick="document.calc.txt.value += '/'">/</span>
<span class="num" onclick="document.calc.txt.value += '*'">*</span>
<span class="num" onclick="document.calc.txt.value += '7'">7</span>
<span class="num" onclick="document.calc.txt.value += '8'">8</span>
<span class="num" onclick="document.calc.txt.value += '9'">9</span>
<span class="num" onclick="document.calc.txt.value += '-'">-</span>
<span class="num" onclick="document.calc.txt.value += '4'">4</span>
<span class="num" onclick="document.calc.txt.value += '5'">5</span>
<span class="num" onclick="document.calc.txt.value += '6'">6</span>
<span class="num plus" onclick="document.calc.txt.value += '+'">+</span>
<span class="num" onclick="document.calc.txt.value += '1'">1</span>
<span class="num" onclick="document.calc.txt.value += '2'">2</span>
<span class="num" onclick="document.calc.txt.value += '3'">3</span>
<span class="num" onclick="document.calc.txt.value += '0'">0</span>
<span class="num" onclick="document.calc.txt.value += '00'">00</span>
<span class="num" onclick="document.calc.txt.value += '.'">.</span>
<span class="num equal" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span>
</form>
</div>
</div> And below the screen, there are buttons for numbers 0 to 9. By clicking these buttons, the respective numbers are appended to the display screen, and there are also the operation buttons. Those operation buttons are for basic operations like addition (+), subtraction (-), multiplication (*), and division (/).
Finally, there's a 'C' button that clears the display screen when clicked. and there's also a '=' button. It evaluates the expression on the display screen using JavaScript's eval function and shows the result. Now let's move on to the CSS part.
Styling With CSS
This is the designing part of our calculator project, which we have done using CSS. As we mentioned earlier, the design of this calculator was created using glassmorphism. For this animated calculator, every element on the page will have a basic font, no margins, no padding, and a box-sizing rule for consistent sizing.
And the page body is set up to be centred both horizontally and vertically, with a gradient background that smoothly transitions between colours. and there are also a decorative animated squares that are placed around the calculator. They move up and down to add a dynamic look.
* {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #87ff31, #39f02c);
background-size: 400% 400%;
-webkit-animation: gradient 10s ease infinite;
animation: gradient 10s ease infinite;
}
@-webkit-keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
body .box {
position: relative;
}
body .box .square {
position: absolute;
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
-webkit-animation: square 10s linear infinite;
animation: square 10s linear infinite;
-webkit-animation-delay: calc(-1s * var(--i));
animation-delay: calc(-1s * var(--i));
}
@-webkit-keyframes square {
0%, 100% {
transform: translateY(-20px);
}
50% {
transform: translateY(20px);
}
}
@keyframes square {
0%, 100% {
transform: translateY(-20px);
}
50% {
transform: translateY(20px);
}
}
body .box .square:nth-child(1) {
width: 100px;
height: 100px;
top: -15px;
right: -45px;
}
body .box .square:nth-child(2) {
width: 150px;
height: 150px;
top: 105px;
left: -125px;
z-index: 2;
}
body .box .square:nth-child(3) {
width: 60px;
height: 60px;
bottom: 85px;
right: -45px;
z-index: 2;
}
body .box .square:nth-child(4) {
width: 50px;
height: 50px;
bottom: 35px;
left: -95px;
}
body .box .square:nth-child(5) {
width: 50px;
height: 50px;
top: -15px;
left: -25px;
}
body .box .square:nth-child(6) {
width: 85px;
height: 85px;
top: 165px;
right: -155px;
z-index: 2;
}
.container {
position: relative;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
overflow: hidden;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-left: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
}
.container .calculator {
position: relative;
display: grid;
}
.container .calculator .value {
grid-column: span 4;
height: 140px;
width: 300px;
text-align: right;
border: none;
outline: none;
padding: 10px;
font-size: 30px;
background: transparent;
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.container .calculator span {
display: grid;
align-items: center;
justify-items: center;
height: 75px;
width: 75px;
color: #fff;
font-weight: 400;
cursor: pointer;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(255, 255, 255, 0.05);
transition: 0.5s;
}
.container .calculator span:hover {
transition: 0s;
background: rgba(255, 255, 255, 0.05);
}
.container .calculator span:active {
background: #ff860e;
color: #192f00;
font-size: 24px;
font-weight: 500;
}
.container .calculator .clear {
grid-column: span 2;
width: 150px;
background: rgba(255, 255, 255, 0.05);
}
.container .calculator .plus {
grid-row: span 2;
height: 150px;
}
.container .calculator .equal {
background: rgba(255, 255, 255, 0.05);
}
@media (max-width: 768px) {
body::before {
max-width: 75vw;
max-height: 75vh;
}
} Our calculator is placed inside a styled container. It has a backdrop filter for a blurred effect, borders, and a subtle shadow. and the screen where numbers appear has a white text on a transparent background.
Next, the number and operation buttons are styled for a clean appearance. When hovered over, they get a subtle background change.
Finally, the clear button spans two columns, and the equal button has a specific background style. For some smaller screens (less than 768 pixels wide), the page is set to adjust its size.
JavaScript Explanation
Finally, in our last part of this project, which is the JavaScript part, we import and use a JavaScript library called "VanillaTilt" to add a tilt effect to the calculator.
First, we imports the "vanilla-tilt" library using the import statement. This library is responsible for adding a tilt effect to elements.
import * as vanillaTilt from "https://cdn.skypack.dev/vanilla-tilt@1.7.0";
VanillaTilt.init(document.querySelector(".container"), {
max: 25,
speed: 300,
glare: true,
"max-glare": 0.2,
}); In our javascript code, the VanillaTilt.init function initialises the tilt effect on the container with the class "container." This means that the entire calculator container will have tilting behaviour.
If you have any issues related to this project or want to know anything about it, you can contact us directly, and we will be available to help you.
Thanks for reading this. We hope you liked the project and learned something from it.
Video of the Project
Download Source Code File
From here You can download the source code files of this JavaScript Animated Glassmorphism Calculator.
If you are new to web development, these code snippets can be helpful. If you find our blog posts valuable, we would be grateful if you could share them with others who are also interested in this topic.