Hello, Readers welcome to my new blog and today I am going to tell you how to Make a Calculator. This Calculator has some features that make it different from a normal calculator. Those features are- I have added animation ,Made the calculator transparent.
As you know, calculator is a machine which allows people to do math operations more easily.
For Example - Most calculator will add, substract, multiply, divide these are the basic functions of a calculator. Scientific calculator, Special purpose calculators financial calculators etc.
Some also do square roots, and more complex calculators can help with calculus and draw function graphs.
This Calculator's bubble or box animation make it look even more beautiful and it is also transparent making it more ausome
If you want the real animation of these small boxes and the code behind making this calculator, you can read this whole blog and watch the preview of the calculator using the link given below.
Tutorial of Calculator using HTML CSS & JavaScript
Calculator Preview
And please visit my site it is under construction - Currently unavalible
Please subscribe my second channel- Relaxing sounds and music
My second channel Relaxing sounds and music
Html
The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as and directly introduce content into the page. Other tags such as
surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.
Source Code
The Source Code is given below
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);
}```
Top comments (3)
Creating a working and animated calculator involves designing an intuitive interface and implementing dynamic functionality that reacts to user input. Start by sketching a layout with buttons for numbers, operations, and utility functions (e.g., clear, equals). Use a programming language like JavaScript with HTML and CSS for the front-end. HTML structures the calculator, CSS adds styling and animations (e.g., button presses), and JavaScript handles logic. Assign each button an event listener to update the display or perform calculations when clicked dotscalculator.online/. To add animations, use CSS transitions or JavaScript to create effects like glowing borders or button depressions. Testing ensures calculations are accurate and animations respond smoothly to user actions.
Arche Rechner Foe is a powerful tool designed to enhance your gaming experience by providing strategic insights and calculations. Optimize your gameplay and make informed decisions to outmaneuver your opponents effectively.
That sounds like a fun project! I love the idea of combining animations with a transparent design. It's like creating a unique tool, similar to how an APS Score Calculator simplifies calculations. Can't wait to check out your blog for the code and details on creating it!