How to Create a Simple Calculator Using HTML, CSS, and JavaScript - Complete Tutorial

Beginner 10 views Nov 28, 2026
A modern calculator interface built with HTML, CSS, and JavaScript showing basic arithmetic operations

How to Create a Simple Calculator Using HTML, CSS, and JavaScript

Introduction

A calculator is a perfect beginner project to learn how HTML, CSS, and JavaScript work together. You'll build an interactive tool that can perform addition, subtraction, multiplication, and division, complete with functional buttons like Clear (C), Delete (DEL), and Equals (=).

This lightweight project uses only vanilla technologies—no heavy libraries or frameworks required. Let's build it step by step.

Part 1: HTML Structure

The HTML file sets up the layout of our calculator. It includes a text entry box to act as the display and a grid container for the buttons.

index.html

HTML
HTML 
<!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="style.css">
</head>

<body>
    <div class="calculator"> <input type="text" id="display" placeholder="0" readonly>
        <div class="buttons"> <button onclick="clearDisplay()">C</button> <button onclick="deleteLast()">DEL</button>
            <button onclick="appendValue('%')">%</button>
            <button onclick="appendValue('/')">÷</button>
            <button onclick="appendValue('7')">7</button>
            <button onclick="appendValue('8')">8</button>
            <button onclick="appendValue('9')">9</button>
            <button onclick="appendValue('*')">×</button>
            <button onclick="appendValue('4')">4</button>
            <button onclick="appendValue('5')">5</button>
            <button onclick="appendValue('6')">6</button>
            <button onclick="appendValue('-')">−</button>
            <button onclick="appendValue('1')">1</button>
            <button onclick="appendValue('2')">2</button>
            <button onclick="appendValue('3')">3</button>
            <button onclick="appendValue('+')">+</button>
            <button onclick="appendValue('0')" class="zero">0</button>
            <button onclick="appendValue('.')">.</button>
            <button onclick="calculate()">=</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

Key Points:

  • Display (#display): An tag with a readonly attribute ensures users can only interact with it using our on-screen buttons.
  • Interactivity (onclick): Every button calls a specific JavaScript function directly from the template.
  • Layout Classes: The zero class is added to help us style the "0" button differently later.

Part 2: CSS Styling

The CSS centers the calculator on the page, transforms the buttons into a neat 4-column layout using CSS Grid, and adds sleek hover and click states.

style.css

CSS
CSS 
/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", Arial, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #f4f6f9;
}

/* Calculator Container */
.calculator {
    width: 340px;
    background: #ffffff;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Display Screen */
#display {
    width: 100%;
    height: 65px;
    margin-bottom: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 32px;
    text-align: right;
    padding: 12px;
    background: #f8fafc;
    color: #1e293b;
    outline: none;
}

/* Button Layout Grid */
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

button {
    height: 60px;
    border: none;
    border-radius: 12px;
    background: #3498db;
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Interaction Effects */
button:hover {
    background: #2980b9;
}

button:active {
    transform: scale(0.95);
}

/* Make the "0" button span two columns */
.zero {
    grid-column: span 2;
}

Key Points:

  • Flexbox Centering: display: flex on the body effortlessly positions the app perfectly in the center of the user's browser.
  • CSS Grid: grid-template-columns: repeat(4, 1fr) builds an even 4-column matrix.
  • grid-column: span 2: Dynamically stretches the "0" button to fill two grid spaces seamlessly.

Part 3: JavaScript Functionality

This script reads button presses, dynamically updates the input display text, and evaluates the mathematical strings.

script.js

JavaScript
JAVASCRIPT 
// Target the calculator display screen
const display = document.getElementById("display");

/**
 * Appends a digit or math operator to the current display text
 */
function appendValue(value) {
    display.value += value;
}

/**
 * Completely clears out the display screen
 */
function clearDisplay() {
    display.value = "";
}

/**
 * Deletes the single last character on the display
 */
function deleteLast() {
    display.value = display.value.slice(0, -1);
}

/**
 * Computes the string math formula using eval()
 */
function calculate() {
    try {
        if (display.value.trim() !== "") {
            display.value = eval(display.value);
        }
    } catch (error) {
        display.value = "Error";
    }
}

Key Points:

  • appendValue(): Concatenates characters directly to the input string.
  • slice(0, -1): Efficiently trims the final character off a string (our delete operation).
  • try...catch: Protects the app from crashing if a user types a broken math formula (like 5++3); it displays "Error" instead.

Complete Project Structure

Ensure all files are inside the exact same folder layout so they link correctly:

TEXT 
calculator/
├── index.html
├── style.css
└── script.js

How to Use

  1. Open your code editor, save these three files inside a single folder, and double-click index.html to run it in your browser.
  2. Click the numbers to build your math expression.
  3. Use the math operators (+, -, ×, ÷) to structure calculations.
  4. Hit = to display your final calculation result.
  5. Hit C to reset the calculator back to zero.

Conclusion

Congratulations! You've just built a fully modular, stylish Web Calculator. This beginner project effectively highlights the core roles of front-end development:

  • HTML handles structural skeletons and binds event triggers.
  • CSS manages responsive grids, spacings, alignment, and animations.
  • JavaScript rules logic, user actions, and data mutation.

Technologies Used

HTML CSS JavaScript

Live Output

See the project in action below. This is the live preview of the code you just learned.

Output Preview

Similar Projects

Digital Clock Using HTML CSS and JavaScript with Animated Circular Progress Bars
Build a Real-Time Digital Clock using HTML, CSS, and JavaScript
Beginner View Project
Project Info
Difficulty: Beginner
Tech Stack: HTML, CSS, JavaScript
Created: November 28, 2026
Total Views: 10
Tags
calculator tutorial html calculator css calculator javascript calculator beginner web development build a calculator frontend project coding for beginners html css javascript project calculator code
Share This Project