How To Make A Calculator In JavaScript

0

Want to learn how to make a calculator in Javascript? In this article, you will learn all the basics of HTML, CSS, and JavaScript coding so that you can create your calculator!

If you’ve ever wanted to create a calculator using JavaScript, you’re in luck! In this article, we’ll show you how to make a calculator using JavaScript.

How To Make A Calculator In JavaScript

We’ll walk you through the process of creating the calculator, step by step. By the end of this article, you’ll have a working calculator that you can use on your own web page.

Why Would Someone Make a Calculator?

There are many reasons someone might want to make a calculator. Maybe they need a tool to help them with their math homework.

Maybe they are a budding programmer who wants to learn how to code. Whatever the reason, making a calculator is a great way to learn about programming.

The Limitations of A Calculator

A calculator is a great tool for doing simple math, but it has its limitations. For one, a calculator can only do basic operations like addition, subtraction, multiplication, and division.

more complex operations like square roots or exponentiation can’t be done with a calculator. Additionally, a calculator can only operate on numbers- it can’t understand words or expressions.

This means that if you’re trying to solve a word problem, you’ll need to do some translating before you can enter it into a calculator.

Another limitation of a calculator is that it can only hold a limited amount of information. This means that if you’re trying to solve a long or difficult problem, you’ll need to break it down into smaller pieces that the calculator can handle.

Additionally, calculators usually only have a few buttons or keys, so they can’t perform every operation that you might need. If you’re looking for more complex functionality, you’ll need to use something other than a calculator.

Despite these limitations, calculators are still useful for quickly doing simple math. If you understand their limitations, you can use them effectively to solve problems.

What is JavaScript?

JavaScript is a programming language that enables you to create interactive web pages. You can use JavaScript to add special effects to your web pages, such as flashing text or animated graphics.

In this tutorial, you will learn how to make a calculator in Javascript. You will learn how to take user input, perform calculations, and display the results.

How to Make A Calculator Using JavaScript

If you want to create a calculator using JavaScript, there are a few things that you will need to do. First of All, you need to design a calculator that is help you to display data on your web page.

I’ve used HTML, and CSS to design the calculator, you can use Bootstrap to design the calculator If you have knowledge of Bootstrap. So, Let’s see the code of the HTML Page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Calculator in JavaScript</title>
  </head>
  <body>
    <div id="calculator">
      <div class="screen">
        <h1 id="result"></h1>
      </div>
      <div class="cal-btn">
        <ul id="btns">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li id="clr">C</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>+</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>-</li>
          <li>0</li>
          <li>*</li>
          <li>.</li>
          <li>/</li>
          <li id="equals">=</li>
        </ul>
      </div>
    </div>

    <script src="js/main.js"></script>
  </body>
</html>

The index.html page has a basic HTML structure and some HTML tags to display the data on the web page. Also inside the page have linked CSS and JavaScript links.

So, Once you do that, then you need to style it with the help of CSS, I’ve mentioned the code below, you can check it out Now.


@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #ddd;
    font-family: 'Poppins';
}

#calculator{
    width: 100%;
    max-width: 350px;
    margin: 100px auto;
    border-radius: 10;
    overflow: hidden;
    box-shadow: 0 0 05px #f4f4f4;
}

.screen{
    background-color: white;
    width: 100%;
    min-height: 100px;
    text-align: right;
    font-size: 22px;
    padding-top: 24px;
    padding-right: 05px;
    border-bottom: 1px solid #ddd;
}

.cal-btn{
    background: rgb(33, 47, 61);
    padding: 05px;
}

ul#btns{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

ul#btns li{
    font-size: 20px;
    color: rgb(33, 33, 33);
    width: 20%;
    margin: 1px;
    padding-top: 11px;
    height: 50px;
    border-radius: 03%;
    cursor: pointer;
    text-align: center;
    color: #fff;
    transition: all 0.3s;
}

ul li{
    border: 1px solid rgb(40, 55, 71)
}

#clr{
    background: rgb(231, 76, 60);
}

ul#btns li:hover{
    background-color: rgb(29, 131, 72);
}

li#equals{
    width: 100%  !important;
    background-color: rgb(52, 152, 219);
}

Once you do that, then you are able to see Basic Calculator designed using HTML and Also CSS3. Then the next thing you need to add functionality to perform the operations such as Addition, Subtraction, Multiplication, and also Division.

So, you need to use JavaScript to add the functionalities, So, Let’s see the JavaScript code to perform the operations.

let btns = document.getElementById('btns');
let num = btns.querySelectorAll('li');
let result = document.getElementById('result');

for(let i=0; i<num.length;i++){
    num[i].addEventListener('click',function(){
        
       if(this.innerHTML=='='){
        result.innerHTML = eval(result.innerHTML);
       }
       else{

        if(num[i].innerHTML=='C'){
            result.innerHTML= "";
        }
        else{
            result.innerHTML += this.innerHTML;
        }

       }

    })    
}

Once you followed the above process, then you are able to see the calculator.

How To Make A Calculator In JavaScript

Hey Guys, I’ve shared each code that is used to make a calculator in JavaScript. I also made a video tutorial on this topic, So, You can watch it. I’ve explained everything steps by step practically.

So, Once you watched the complete tutorial, then I hope you will get ideas on how to make a project using HTML, CSS3, and also JavaScript.

Conclusion

In this article, we looked at how to make a calculator in JavaScript. We started by creating the basic structure of our calculator using HTML and CSS.

You May Also Like:

Then, we added interactivity to our calculator using JavaScript. Finally, we added some basic math functionality to our calculator. So, I hope this tutorial is helpful and beneficial for you. please share it with your friends on the social sharing websites.

Previous articlePhp Generate PDF From HTML
Next articleBest Online Courses For Web Design in 2022
I'm Programmer, Digital Marketer, and Blogger, I have been working on the web for 04 years. Basically, I have been sharing personal expertise on my website.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.