Web Design Tutorials

How to Build a Functional Calculator with HTML, CSS, and JavaScript

In this tutorial, we’ll guide you through building a fully functional calculator using HTML, CSS, and JavaScript. Whether you’re new to web development or looking to sharpen your skills, this project offers a great way to practice key concepts in front-end development.

You can find all the code used in this tutorial freely available in the video description.

Project Setup

Before we dive in, ensure that your project folder is set up with a background image and the necessary files. You’ll need:

  • index.html
  • style.css
  • script.js

Step 1: Setting Up HTML

Start by creating the index.html file. Inside the <head> element, add a title for the project, link the CSS file, and also link the JavaScript file:

Step 1: Setting Up HTML

Start by creating the index.html file. Inside the <head> element, add a title for the project, link the CSS file, and also link the JavaScript file:

<head>
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>

Once your files are linked, open the project in a browser to check that everything is connected properly (you should see a blank page for now).

Step 2: Applying Basic CSS

Next, head over to style.css and reset the default browser margins and paddings. Apply the Outfit font from Google Fonts for a clean, modern look:

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

body {
    font-family: 'Outfit', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: url('bg.jpg') no-repeat center center;
    background-size: cover;
}

Step 3: Building the HTML Structure

Within the <body> tag of index.html, create a container for the calculator. Inside this, you’ll have two main sections: the display and the buttons.

<div class="wrapper">
    <div class="calculator">
        <div class="display">
            <input type="text" id="calculator-display" disabled>
        </div>
        <div class="buttons">
            <!-- Calculator buttons will go here -->
        </div>
    </div>
</div>

Step 4: Styling the Calculator

Let’s now style the calculator container and display:

.wrapper {
    border: 2px solid rgba(255, 255, 255, 0.2);
    width: 420px;
    padding: 30px 40px;
    backdrop-filter: blur(9px);
    border-radius: 12px;
    color: white;
}

.display input {
    width: 100%;
    height: 50px;
    font-size: 2em;
    text-align: right;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

Step 5: Adding Buttons

Inside the calculator’s buttons div, create individual buttons for each function (C, Delete, division, multiplication, etc.). Each button should trigger a specific action using the onclick event:

<div class="buttons">
    <button class="btn" onclick="clearDisplay()">C</button>
    <button class="btn" onclick="deleteCharacter()">←</button>
    <button class="btn" onclick="appendToDisplay('/')">÷</button>
    <button class="btn" onclick="appendToDisplay('*')">×</button>
    <!-- Add more buttons for numbers and operations -->
</div>

Step 6: Styling Buttons

In style.css, use CSS Grid to arrange the buttons neatly in a grid layout:

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

.btn {
    padding: 20px;
    font-size: 1.5em;
    border: none;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

Step 7: Implementing JavaScript Functionality

Now, move on to script.js. You’ll implement the key functions to handle user input and perform calculations.

  1. Append to Display: Adds characters (numbers or operators) to the display.
javascriptCopy codefunction appendToDisplay(value) {
    const display = document.getElementById('calculator-display');
    display.value += value;
}
  1. Clear Display: Clears the calculator’s display.
clearDisplay() {
    const display = document.getElementById('calculator-display');
    display.value = '';
}
  1. Delete Last Character: Removes the last character from the display.
deleteCharacter() {
    const display = document.getElementById('calculator-display');
    display.value = display.value.slice(0, -1);
}
  1. Calculate Result: Evaluates the mathematical expression entered and displays the result.
calculateResult() {
    const display = document.getElementById('calculator-display');
    try {
        display.value = eval(display.value);
    } catch {
        display.value = 'Error';
    }
}

Final Thoughts

By the end of this tutorial, you’ve built a fully functional calculator using basic HTML, CSS, and JavaScript. This project is a great way to practice your front-end development skills while learning how to implement basic functionality with JavaScript. You can further enhance this project by adding features like keyboard support or improving the design.

If you found this tutorial helpful, please like the video, and feel free to ask questions.