This content originally appeared on DEV Community and was authored by Codeflix
Hello Readers, welcome to my new blog, today in this blog I'm going to make a calculator using HTML CSS & JavaScript. Earlier I have shared, How To Make a Responsive Website With HTML & CSS, that website was in glassmorphism UI, and now this calculator design is also in glass morphism UI.
As we know, a Calculator is a mechanical device that is used to calculate numerical numbers. There are various types and designs of calculators that we can found but the main motive of the calculator is calculation.
As you can see on the given image of this program [Glasss Morphism Calculator], on the webpage. There is one calculator design in glassmorphism UI. All essential buttons are available there like addition, subtraction, multiplication, divide, and so on. These all buttons worked perfectly. Those different sizes of small boxes around that calculator make this glassmorphism design of the calculator really awesome. These all small boxes move upward direction continuously.
If you want the real animation of these small boxes and the code behind making this calculator, you can watch the full video tutorial of this program [Animated Glass Morphism Calculator].
Tutorial of Calculator using HTML CSS & JavaScript
Glassorphism Calculator Preview
STEPS
STEP 1
Make a file named index.html and write the following code.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!--- <title> Glassmorphism Calculator| Codeflix </title>--->
<link rel="stylesheet" href="style.css">
</head>
<body>
STEP 2
This is the animation part (Do it carefully). Each lot contains 7 bubbles.
<div class="bubbles">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
<span class="four"></span>
<span class="five"></span>
<span class="six"></span>
<span class="seven"></span>
<span class="seven"></span>
</div>
<div class="bubbles">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
<span class="four"></span>
<span class="five"></span>
<span class="six"></span>
<span class="seven"></span>
<span class="seven"></span>
</div>
<div class="bubbles">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
<span class="four"></span>
<span class="five"></span>
<span class="six"></span>
<span class="seven"></span>
<span class="seven"></span>
</div>
<div class="bubbles">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
<span class="four"></span>
<span class="five"></span>
<span class="six"></span>
<span class="seven"></span>
<span class="seven"></span>
</div>
STEP 3
This code will make the container of the calculator.
<div class="container">
<form action="#" name="forms">
<input type="text" name="answer">
<div class="buttons">
<input type="button" value="AC" onclick="forms.answer.value = ''">
<input type="button" value="DEL" onclick="forms.answer.value = forms.answer.value.substr(0 , forms.answer.value.length -1)">
<input type="button" value="%" onclick="forms.answer.value += '%'">
<input type="button" value="/" onclick="forms.answer.value += '/'">
</div>
STEP 4
This code represents how buttons should function and their size and all other content.
<div class="buttons">
<input type="button" value="7" onclick="forms.answer.value += '7'">
<input type="button" value="8" onclick="forms.answer.value += '8'">
<input type="button" value="9" onclick="forms.answer.value += '9'">
<input type="button" value="*" onclick="forms.answer.value += '*'">
</div>
<div class="buttons">
<input type="button" value="4" onclick="forms.answer.value += '4'">
<input type="button" value="5" onclick="forms.answer.value += '5'">
<input type="button" value="6" onclick="forms.answer.value += '6'">
<input type="button" value="-" onclick="forms.answer.value += '-'">
</div>
<div class="buttons">
<input type="button" value="1" onclick="forms.answer.value += '1'">
<input type="button" value="2" onclick="forms.answer.value += '2'">
<input type="button" value="3" onclick="forms.answer.value += '3'">
<input type="button" value="+" onclick="forms.answer.value += '+'">
</div>
<div class="buttons">
<input type="button" value="0" onclick="forms.answer.value += '0'">
<input type="button" value="00" onclick="forms.answer.value += '00'">
<input type="button" value="." onclick="forms.answer.value += '.'">
<input type="button" value="=" onclick="forms.answer.value = eval(forms.answer.value)">
</div>
</form>
</div>
</body>
</html>
Css
CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file which reduces complexity and repetition in the structural content as well as enabling the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.
Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.
Css codes in this project
Css plays an important role in this project and Css codes are also available below.
Css codes
Now we will make a file named style.css and write paste the following code.
STEP 1
This code represents Fonts, Container, Background Colour
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
height: 100vh;
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(#2196f3 , #e91e63);
}
STEP 2
This Css code is used to add animation,Colour to the bubbles.
Each lot contains 7 bubbles.
.bubbles{
position: absolute;
bottom: -120px;
display: flex;
flex-wrap: wrap;
margin-top: 70px;
width: 100%;
justify-content: space-around;
}
.bubbles span{
height: 60px;
width: 60px;
background: rgba(255, 255, 255, 0.1);
animation: move 10s linear infinite;
position: relative;
overflow: hidden;
}
@keyframes move {
100%{
transform: translateY(-100vh);
}
}
.bubbles span.one{
animation-delay: 2.2s;
transform: scale(2.15)
}
.bubbles span.two{
animation-delay: 3.5s;
transform: scale(1.55)
}
.bubbles span.three{
animation-delay: 0.2s;
transform: scale(0.35)
}
.bubbles span.four{
animation-delay: 6s;
transform: scale(2.15)
}
.bubbles span.five{
animation-delay: 7s;
transform: scale(0.5)
}
.bubbles span.six{
animation-delay: 4s;
transform: scale(2.5)
}
.bubbles span.seven{
animation-delay: 3
transform: scale(1.5)
}
.bubbles span:before{
content: '';
position: absolute;
left: 0;
top: 0;
height: 60px;
width: 40%;
transform: skew(45deg) translateX(150px);
background: rgba(255, 255, 255, 0.15);
animation: mirror 3s linear infinite;
}
@keyframes mirror {
100%{
transform: translateX(-450px);
}
}
.bubbles span.one:before{
animation-delay: 1.5s;
}
.bubbles span.two:before{
animation-delay: 3.5s;
}
.bubbles span.three:before{
animation-delay: 2.5s;
}
.bubbles span.four:before{
animation-delay: 7.5s;
}
.bubbles span.five:before{
animation-delay: 4.5s;
}
.bubbles span.six:before{
animation-delay: 0.5s;
}
.bubbles span.seven:before{
animation-delay: 6s;
}
STEP 3
This code represents container's colour, Text input in the container , Colour Of the buttons.
z-index: 12;
width: 360px;
padding: 15px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.5);
}
.container input[type="text"]{
width: 100%;
height: 100px;
margin: 0 3px;
outline: none;
border: none;
color: #fff;
font-size: 20px;
text-align: right;
padding-right: 10px;
pointer-events: none;
background: transparent;
}
.container input[type="button"]{
height: 65px;
color: #fff;
width: calc(100% / 4 - 5px);
background: transparent;
border-radius: 12px;
margin-top: 15px;
outline: none;
border: none;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.container input[type="button"]:hover{
background: rgba(255, 255, 255, 0.1);
}```
This content originally appeared on DEV Community and was authored by Codeflix
Codeflix | Sciencx (2021-10-26T08:30:15+00:00) How to make a Glassorphism Calculator. Retrieved from https://www.scien.cx/2021/10/26/how-to-make-a-glassorphism-calculator/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.