Build a Simple and Stylish Calculator with HTML, CSS, and JavaScript

Creating a functional calculator with a sleek design is a great way to sharpen your front-end development skills. In this blog post, we’ll walk you through building a simple calculator using HTML, CSS, and JavaScript. By the end, you’ll have a fully operational calculator that performs basic arithmetic and looks modern and professional.

Why Build a Calculator?

Building a calculator helps you practice essential development concepts such as:

Working with DOM elements in JavaScript
Styling with modern CSS techniques
Structuring a responsive layout using HTML

Project Overview

The calculator we’ll build includes the following:

Buttons for numbers, basic arithmetic operators, and functions (clear, delete, equals).
A responsive design that looks great on any device.
Clean and readable code with error handling.

The Code

HTML Structure

We’ll start with the HTML structure. This includes the input field for displaying results and buttons for calculator operations.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="result" disabled>
        <div class="buttons">
            <button onclick="clearResult()">C</button>
            <button onclick="deleteLast()">DEL</button>
            <button onclick="appendCharacter('/')">/</button>
            <button onclick="appendCharacter('*')">*</button>
            <button onclick="appendCharacter('7')">7</button>
            <button onclick="appendCharacter('8')">8</button>
            <button onclick="appendCharacter('9')">9</button>
            <button onclick="appendCharacter('-')">-</button>
            <button onclick="appendCharacter('4')">4</button>
            <button onclick="appendCharacter('5')">5</button>
            <button onclick="appendCharacter('6')">6</button>
            <button onclick="appendCharacter('+')">+</button>
            <button onclick="appendCharacter('1')">1</button>
            <button onclick="appendCharacter('2')">2</button>
            <button onclick="appendCharacter('3')">3</button>
            <button onclick="calculateResult()">=</button>
            <button onclick="appendCharacter('0')">0</button>
            <button onclick="appendCharacter('.')">.</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS Styling

Next, we add styles to make the calculator visually appealing and responsive.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

.calculator {
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    background-color: #fff;
}

#result {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    text-align: right;
    font-size: 18px;
    padding: 5px;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

button {
    height: 40px;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    cursor: pointer;
}

button:hover {
    background-color: #e0e0e0;
}

JavaScript Functionality

Finally, we’ll write JavaScript to handle calculator operations, including:

Appending characters to the input field.
Clearing the result field.
Deleting the last character.
Evaluating the expression with error handling.

function appendCharacter(character) {
    document.getElementById('result').value += character;
}

function clearResult() {
    document.getElementById('result').value = '';
}

function deleteLast() {
    let currentValue = document.getElementById('result').value;
    document.getElementById('result').value = currentValue.slice(0, -1);
}

function calculateResult() {
    let expression = document.getElementById('result').value;
    try {
        document.getElementById('result').value = eval(expression);
    } catch {
        document.getElementById('result').value = 'Error';
    }
}

How It Works

HTML provides the structure of the calculator, including buttons and an input field for results.
CSS styles the calculator for a clean, user-friendly interface.
JavaScript adds interactivity, allowing users to perform calculations.

Conclusion

This simple calculator project demonstrates the power of combining HTML, CSS, and JavaScript. It’s a great way to learn how these technologies work together to create interactive and visually appealing web applications. Try building it yourself and customize it further with advanced features like scientific functions or a history log!

Don’t forget to share your results and improvements in the comments below!