How to make a calculator using html css and javascript in 2021

  • Share this:
How to make a calculator using html css and javascript in 2021

  

A calculator is essential to program in our life. It creates any high-level programming language. Now we create a Calculator with Html, CSS, and JavaScript. You need three files to create it, remember all files should have in one folder.

Rather than making a beeline for the code immediately, you need to figure out how to handle another undertaking. You have two things prepared for you: the rationale and an essential comprehension of the front-end advancements, for example, JavaScript, HTML, and CSS. Before you start fabricating your mini-computer utilizing JavaScript, you need the accompanying: 

  1. An Integrated Development Environment that will help you fabricate your venture utilizing each of the three advancements. 
  2. A nearby worker will help you test your codes and eliminate the bugs. Thus, you will actually want to dispatch the application quicker and with more noteworthy spryness.

 

First, you create an Html file which name is "index.html", then open this file with your editor and write below the code.

index.html

<!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">
    <title>How to make a calculator using html css and javascript</title>
    <!-- external css file -->
    <link rel="stylesheet" href="./style.css">
</head>
<body>

    <div class="wrapper">
        <div class="calculator">
            <input type="text" placeholder="0" id="viewScreen">
            <button onclick="Clear()">C</button>
            <button onclick="del()">DEL</button>
            <button onclick="display('%')">%</button>
            <button onclick="display('/')">/</button>
            <button onclick="display('7')">7</button>
            <button onclick="display('8')">8</button>
            <button onclick="display('9')">9</button>
            <button onclick="display('*')">*</button>
            <button onclick="display('4')">4</button>
            <button onclick="display('5')">5</button>
            <button onclick="display('6')">6</button>
            <button onclick="display('-')">-</button>
            <button onclick="display('1')">1</button>
            <button onclick="display('2')">2</button>
            <button onclick="display('3')">3</button>
            <button onclick="display('+')">+</button>
            <button onclick="display('.')">.</button>
            <button onclick="display('0')">0</button>
            <button class="equal" onclick="calculate()">=</button>
        </div>
    </div>


    <!-- external js file -->
    <script src="./main.js"></script>

</body>
</html>

 

Now, you create a css file which name is "styel.css", then open this file with your editor and write below the code.

style.css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-color: #ecf0f3;
    font-family: sans-serif;
    outline: none;
}

.wrapper{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calculator{
    background-color: #ecf0f3;
    padding: 15px;
    border-radius: 30px;
    box-shadow: inset 5px 5px 12px #fff, 5px 5px 12px rgba(0, 0, 0, 0.15);
    display: grid;
    grid-template-columns: repeat(4, 64px);
}

input{
    grid-column: span 4;
    height: 70px;
    width: 260px;
    background-color: #ecf0f3;
    box-shadow: inset -4px -6px 12px #fbfbfb91, inset 5px 5px 12px rgba(0, 0, 0, 0.15);
    border: none;
    border-radius: 30px;
    color: rgba(70, 70, 70);
    font-size: 50px;
    text-align: end;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 30px;
    padding: 20px;
}

button{
    height: 48px;
    transition: 0.3s;
    width: 48px;
    background-color: #ecf0f3;
    box-shadow: -2px -2px 12px #fff, 5px 5px 12px rgb(0, 0, 0, 0.15);
    border: none;
    cursor: pointer;
    border-radius: 50%;
    margin: 8px;
    font-size: 16px;
}
button:hover{
    background-color: red;
    color: #fff;
}
.equal{
    width: 115px;
    border-radius: 40px;
    background-color: #ecf0f3;
    box-shadow: -1px -1px 12px #fff, 5px 5px 12px rgb(0, 0, 0, 0.15);
}

 

Last step, you create a javascript file which name is "main.js", then open this file with your editor and write below the code.

main.js

let outputScreen = document.getElementById('viewScreen');

function display(num)
{
    outputScreen.value += num 
}

function calculate()
{
    try{
        outputScreen.value = eval(outputScreen.value);
    }catch(err){
        alert('Invalid')
    }
}

function Clear()
{
    outputScreen.value = "";
}

function del()
{
    outputScreen.value = outputScreen.value.slice(0, -1);
}

 

Now, open index.html file with your browser. Finally We build a calculator using html, css and javascript. Let's try your for improve your skill and make a calculator.

 

Tutor: Rakib Alom

Preview of Coding
How to make a calculator using html css and javascript

About author
I am a professional web developer. I love programming and coding, and reading books. I am the founder and CEO of StorialTech.
Comments (2)
storialtech-user-avatar

Nice Post

Rimon Nahid 1 month ago
storialtech-user-avatar

great info thank you ! online training --> https://www.igmguru.com/

DINESH KUMAR 3 weeks ago