Build a Calculator using HTML, CSS & JavaScript

Build a Calculator using HTML, CSS & JavaScript

 


In this tutorial, I will show you how to make a simple JavaScript calculator. The calculator app we’ll develop in this tutorial is a very simple one. It is more or less in the manner of those calculators found at grocery stores. The layout of the app was crafted with HTML, CSS, and Javascript.

This tutorial assumes that you have a basic knowledge of JavaScript. I’m going to break down each step as best as I can so it should be easy to follow even if you have no prior experience with building applications in the browser.

Digital Calculator in JavaScript [Source Codes]

To create this program [Calculator]. First, you need to create three files, HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your files. You can also download the source code files of the Digital Clock from the given download buttom.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javacript Calculator</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="calculator">
        <div class="calculator-screen">
            <div id="display"></div>
        </div>
        <div class="calculator-body">
            <div class="grid">
                <div class="btn btn-c">c</div>
                <div class="btn btn-num">&larr;</div>
                <div class="btn btn-operator">+</div>
            </div>
            <div class="grid-body">
                <div class="btn btn-num">7</div>
                <div class="btn btn-num">8</div>
                <div class="btn btn-num">9</div>
                <div class="btn btn-operator">*</div>
                <div class="btn btn-num">4</div>
                <div class="btn btn-num">5</div>
                <div class="btn btn-num">6</div>
                <div class="btn btn-operator">/</div>
                <div class="btn btn-num">1</div>
                <div class="btn btn-num">2</div>
                <div class="btn btn-num">3</div>
                <div class="btn btn-operator">-</div>
                <div class="btn btn-num">0</div>
                <div class="btn btn-num">.</div>
                <div class="btn btn-equals">=</div>
                
            </div>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

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

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

body {
    min-height: 100vh;
    font-family: 'Orbitron', sans-serif;
    background: #141519;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calculator {
    position: relative;
    width: 350px;
}

.calculator-screen {
    min-height: 166px;
    background: #0c0c14;
    border-top: 2px solid #fff;
    padding: 30px;
    font-size: 46px;
    color: #fff;
    text-shadow: 0px 0px 6px 
                rgba(255, 255, 255, 0.5);
}

.calculator-screen #display {
    overflow: hidden;
    text-align: right;
}

.calculator-body {
    background: #0c0c14;
    padding-left: 15px;
}

.grid {
    display: grid;
    grid-template-columns: 160px 80px 80px;
}

.grid-body {
    display: grid;
    grid-template-columns: 80px 80px 80px 80px;
}

.btn {
    color: #fff;
    font-size: 24px;
    margin: 8px;
    padding: 25px 10px 10px 10px;
}

.btn:hover {
    cursor: pointer;
}

.btn:active {
    background: #fffefc;
    color: #4e4848;
    box-shadow: 0px 0px 11px 2px
                rgba(755, 254, 752, 0.5);
}

.btn-num {
    background: #4e4848;
    text-align: center;
    border-top: 2px solid #fff;
}

.btn-c {
    background: #ff6340;
    border-top: 2px solid #fff;
}

.btn-operator {
    background: #452c6d;
    border-top: 2px solid #fff;
}

.btn-equals {
    background: #40ff69;
    border-top: 2px solid #fff;
    width: 145px;
}

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

let display = document.getElementById('display');
let buttons = Array.from(document.getElementsByClassName('btn'));

buttons.map(button => {
    button.addEventListener('click', (e) => {
        switch (e.target.innerText) {
            case 'c':
                display.innerText = '';
                break;
                case '←':
                    if (display.innerText) {
                        display.innerText = display.innerText.slice(0, -1);
                    }
                    break;
            case '=':
                try {
                    display.innerText = eval(display.innerText);
                } catch {
                    display.innerText = "Error";
                }
                
                break;
            default:
                display.innerText += e.target.innerText;
        }
    })
})

Download Source Code: Build a Calculator using HTML, CSS & JavaScript

That’s all, now you’ve successfully Create a Calculator In HTML, CSS, Javascript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Here are a few helpful posts you might want to read, too:

Why learning code? 7 Essential Benefits From Learning Programming

6 Things To Know Before Learning Programming

How to Teach Yourself to Learn Code

If you enjoyed this post about the Calculator in HTML, CSS, javascript just drop me a line in the comments below!

P.S. If you found this post helpful, please share it with others! Thanks for your support!