Attractive Glassomorphic Calculator Design Using HTML CSS & JavaScript

Yogesh Bisht June 10, 2021

Hey friends, today in this blog you’ll learn how to create Glassomorphic Calculator using HTML CSS & JavaScript. I’m going to create a program or Calculator that allowed users to enter one or more integer and mathematical operation regarding those number and attractive glassomorphisam calculator will return the calculated value of the given numbers. 

In this program for the UI view there is a input field which will show the operation and result on the screen. Input field is intialized with Zero Value and prevented for inserting value using pointer-event:none; property. Apart from it there are few operational buttons which are used to enter the number and operation symbols. First and last child of the operation buttons are given specific glassomorphic design that gives outstanding look to the calculator. 

In the logic section(JavaScript) functionality of calculator is developed using functions of modern javascript ES6(EcmaScript) such as querySelector, addEventListener and Arrow function (=>), eval() function is used for calculation of the equation enterd by the user.


Video Preview of Glassomorphic Calculator


In the video, you have seen the demo of this design or program and how I created glassomorphic calculator. As you know, I used JavaScript to make the Calculator calculation logic and I believe these few lines of JavaScript were not much difficult to understand for you even if you’re a beginner. Except this all other parts including two circle in the background, chaning the design of button on hover and Glassormorphic effect of calculator is developed using pure HTML & CSS.

Glassomorphic Calculator Design Using CSS & JavaScript [Source Code]

To create this program [Glassomorphic Calculator Design]. First, you need to create three Files one HTML File ,one CSS file and another one is JAVASCRIPT File. After creating these files just paste the following codes into your file. You can also download the source code files of this Glassomorphic Calculator Design from the below download button.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--stylesheet -->
  <link rel="stylesheet" href="css/index.css">
  <title>Calculator</title>
</head>
<body>
	<section>
		<div class="calculator-container">
			<!--input and output screen to see the operation -->
			<div class="input-field">
				<input type="text" value="0" id="input-value">
			</div>
			<!--input operation button to get the desired result -->
			<div class="operation-btn">
				<span class="btn value">AC</span>
				<span class="btn value">(</span>
				<span class="btn value">)</span>
				<span class="btn value">+</span>
				<span class="btn value">7</span>
				<span class="btn value">8</span>
				<span class="btn value">9</span>
				<span class="btn symbol">-</span>
				<span class="btn value">4</span>
				<span class="btn value">5</span>
				<span class="btn value">6</span>
				<span class="btn symbol">x</span>
				<span class="btn value">1</span>
				<span class="btn value">2</span>
				<span class="btn value">3</span>
				<span class="btn symbol">/</span>
				<span class="btn symbol">0</span>
				<span class="btn value">00</span>
				<span class="btn symbol">.</span>
				<span class="btn symbol">=</span>
			</div>
		</div>
	</section>
	
	<!--Javascript file-->
	 <script src="js/index.js"></script>
</body>
</html>

Second, create a CSS file with the name of style.css inside a folder named as css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

CSS CODE

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
	margin:0;
	padding:0;
}
body{
	box-sizing:border-box;
	font-family: 'Poppins', sans-serif;
}
section, .calculator-container, .operation-btn .btn{
	display: flex;
	justify-content: center;
	align-items: center;
}
section{
	height :100vh;
	background:linear-gradient(#ed11f5,#4baef5);
	position :relative;
}
.calculator-container{
	flex-direction:column;
	height:60vh;
	width:70vw;
	padding:15px; 
	z-index:1;
}
section::before, section::after{
	position :absolute;
	content :"";
	width:120px;
	height:120px;
	border-radius :100%;
}
section::before{
	top:11%;
	left:0%;
	background-color :#0db2f4;
}
section::after{
	bottom:11%;
	right:0%;
	background-color :#f534e7;
}
.input-field{
	width:100%;
}
.input-field input{
	width:100%;
	border:none;
	outline:none;
	height:12vh;
	background :transparent;
	color:#f1f1f1; 
	font-size:27px;
	font-family: 'Poppins', sans-serif;
	text-align:right;
	pointer-events: none;
}
.input-field input:focus{
	outline:none;
}
.operation-btn{
	width:100%;
	display: flex;
	justify-content: space-between;
	align-items:center;
	flex-wrap:wrap;
}
.operation-btn .btn{
	width:15vw;
	height:8vh;
	margin:5px 0;
	font-size:20px;
	color:#f1f1f1;
	user-select: none;
}
/* glassomorphisam effect */

.calculator-container, .operation-btn .btn:hover, .operation-btn .btn:first-child, .operation-btn .btn:last-child{
	background:rgba( 255, 255, 255, 0.15 );
	box-shadow:0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
	backdrop-filter:blur( 4px );
	-webkit-backdrop-filter:blur( 3.5px );
	border-radius:10px;
	border:1px solid rgba( 255, 255, 255, 0.18 );
}

/* Responsive view */

@media(min-width:768px){
	section::before, section:after{
		height:350px;
		width:350px;
	}
	.operation-btn .btn{
		font-size:40px;
	}
	input{
		font-size:45px;
	}
}

Second, create a CSS file with the name of index.js inside a folder named as js and paste the given codes in your CSS file. 

JAVASCRIPT CODE

let operationBtn = document.querySelectorAll('.btn');
let inputText= document.querySelector("#input-value");
operationBtn.forEach((btn)=>{
	btn.addEventListener('click', (e)=>{
		var inputValue = e.target.innerHTML;
		//changing the intial value (0)  of Caclculator
		if(inputText.value=="0" && inputValue!="AC"){
			inputText.value =inputValue;
		}
		//chaning the x into *(estrick);
		else if(inputValue == "x"){
			inputValue = "*";
			inputText.value += inputValue;
		}
		else if(inputValue == "AC"){
			inputText.value = "0";
		}
		else if(inputValue == "="){
			inputText.value = eval(inputText.value);
		}
		else{
			inputText.value += inputValue;
		}
	});
});

That’s all, now you’ve successfully created a Attractive Glassomorphic Calculator using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. 

download attractive glassomorphic calculator design

It’s free and a .zip file will be downloaded then you’ve to extract it. Now run the index.html file on your browser (recommended Chrome).
Yogesh Bisht

Posted by Yogesh Bisht

Computer Application graduate with a passion for developing scalable web applications and working across the full stack. I’ve built many web application from the scratch using Django, React, and PostgreSQL. Dedicated and efficient full stack developer with 1.5 years experience in application layers, presentation layers, and databases.

Post a Comment

0 Comments

If you have any doubt, Let me Know

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)