How to Make a Calculator Using HTML, CSS, and JavaScript

Alizeh Codes January 26, 2025

Creating Calculator Using HTML, CSS, and JavaScript

Creating a simple calculator is one of the best beginner projects to understand the basics of web development. In this blog, we will walk through building a functional calculator using HTML, CSS, and JavaScript. By the end of this tutorial, you’ll have your own calculator that can perform basic arithmetic operations. Let's get started!

How to Make a Calculator Using HTML, CSS, and JavaScript

Watch Full Tutorial 

Step 1: HTML Structure

The first step is to define the structure of the calculator using HTML. This involves creating a container for the calculator and its buttons.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Calculator</title>
</head>
<body>
    <div class="calculator">
        <input type="text" placeholder="0" id="inputBox" readonly>
        <div>
            <button class="operator">AC</button>
            <button class="operator">DEL</button>
            <button class="operator">%</button>
            <button class="operator">/</button>
        </div>
        <div>
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button class="operator">*</button>
        </div>
        <div>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button class="operator">-</button>
        </div>
        <div>
            <button>3</button>
            <button>2</button>
            <button>1</button>
            <button class="operator">+</button>
        </div>
        <div>
            <button>00</button>
            <button>0</button>
            <button>.</button>
            <button class="equalBtn">=</button>
        </div>
    </div>

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

In this code, we’ve created an input field to display the result and a series of buttons for numbers and operations.

Step 2: Styling with CSS

Now, let's make the calculator visually appealing with CSS. Create a separate styles.css file and add the following styles:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    height: 100vh;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.calculator{
    border: 1px solid silver;
    padding: 24px;
    border-radius: 16px;
    background: transparent;
    box-shadow: 2px 3px 15px rgba(115, 113, 119, 0.5);
}
input{
    width: 320px;
    padding: 24px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 40px;
    text-align: right;
    color: #ffffff;
    box-shadow: 2px 3px 15px rgba(115, 113, 119, 0.2);
    cursor: pointer;
    margin-bottom: 10px;
}
input::placeholder{
    color: #ffffff;
}
button{
    width: 60px;
    height: 60px;
    margin: 10px;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    color: #ffffff;
    background: transparent;
    box-shadow: -8px -5px 15px rgba(115, 113, 119, 0.2);
    cursor: pointer;
}
.equalBtn{
    background: rgb(226, 152, 14);
}
.operator{
    color: rgb(31, 199, 31);
}

This CSS adds a clean and responsive design to the calculator, making it user-friendly and visually appealing.

Step 3: Adding Functionality with JavaScript

The final step is to add interactivity using JavaScript. Create a file named script.js and add the following code:

let input = document.getElementById('inputBox');
let buttons = document.querySelectorAll('button');

let string = "";
let arr = Array.from(buttons);
arr.forEach(button => {
    button.addEventListener('click', (e) => {
        if(e.target.innerHTML == '='){
            string = eval(string);
            input.value = string;
        }
        else if(e.target.innerHTML == 'AC'){
            string = "";
            input.value = string;
        }
        else if(e.target.innerHTML == 'DEL'){
            string = string.substring(0, string.length-1);
            input.value = string;
        }
        else{
            string += e.target.innerHTML;
            input.value = string;
        }
    })
})

How to Run the Calculator

  1. Create three files:

    • index.html (HTML code)

    • styles.css (CSS code)

    • script.js (JavaScript code)

  2. Link the CSS and JavaScript files to your HTML file as shown above.

  3. Open the index.html file in any modern web browser.

Enhancements to Try

Once you have the basic calculator working, consider adding these features:

  • Keyboard Support: Allow users to input values using the keyboard.

  • Advanced Functions: Add operations like square root, percentage, or memory functions.

  • Dark Mode: Create a toggle for light and dark themes.

  • Watch Full Tutorial Video on YouTube

Conclusion

Building a calculator is a fantastic way to practice your HTML, CSS, and JavaScript skills. It helps you understand how these technologies work together to create a functional web application. With some creativity, you can further enhance your calculator and make it unique. Happy coding! 😊

Click Here 

Tags:

Post a Comment

0 Comments