Codeflix

Posted on Oct 26, 2021 • Updated on Nov 17, 2021

How to make a Calculator (Working and Animated)

#programming #javascript #tutorial #css

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 friend's 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 (7)

Codeflix • Oct 26 '21 • Edited

Hi , Guys hope you like this content please visit my site it is under construction - Currently unavalible
I will be posting more content soon.

Hi guys I will be posting a new video in 1 to 3 days , My channel's link -youtu.be/S44SDUwWHIQ
Please subscribe.
Join my classroom - classroom.google.com/c/NDE5MDU2MDY...

Christian Sirolli • Oct 27 '21

One concern. I can type any JavaScript into the input element, click = and the calculator will run that JavaScript. This is because of the eval in the = button's onclick. Avoid using eval as much as possible, and prefer to validate the input instead. This makes it much more complicated, but avoids a security issue.