Build a Calculator using JavaScript, HTML, and CSS in 2025

Building a calculator using HTML, CSS, and JavaScript is a great way to learn the basics of web development while creating a practical tool. In this tutorial, we will walk through the process of building a functional calculator from scratch, using modern web technologies for the year 2025. 

We’ll explore how to create the structure with HTML, style the user interface with CSS, and implement the logic with JavaScript. This project will give you hands-on experience with handling user input, performing calculations, and designing a clean, responsive layout.

Key Technologies Used:

• HTML: For structuring the calculator layout.
• CSS: For styling and making the calculator responsive.
• JavaScript: For implementing calculator logic and interactivity.

By the end of this guide , you’ll have a fully functional calculator using JavaScript that can perform basic arithmetic operations. Whether you're just starting out or looking to enhance your skills, this project is an excellent way to dive into calculator development using HTML, CSS, and JavaScript.

Step-By-Step Process to Build a Calculator

Before directly going to code in HTML, CSS, and Java, let’s plan, how to build a calculator. It helps define the features, layout, and user experience, ensuring the project is organized and functional. Let’s break down the planning process into two key areas: features and functionality and wireframing and layout design.

Features and Functionality

The first step in planning the calculator is deciding on the core features. Here are the primary functionalities we need to implement for a calculator using JavaScript:

• Basic Arithmetic Operations: The calculator should handle the four basic operations: addition, subtraction, multiplication, and division.
• Clear Button (C): A button to reset the display and clear any input.
• Backspace (←): A button to remove the last character entered, allowing users to correct mistakes.
• Decimal Point (.): Support for floating-point numbers, enabling decimal calculations.
• Equals (=): A button to evaluate the current expression and display the result.
• Responsive Design: The layout should be flexible, working well on both desktop and mobile devices.
• Error Handling: The calculator must manage invalid inputs (e.g., division by zero) and provide appropriate error messages.

These features will give us a fully functional calculator that meets the needs of most users. Once the features are defined, it’s important to design how the calculator will look and how users will interact with it.

Wireframing and Layout Design

Wireframing involves planning the arrangement of elements like buttons and the display screen. The layout of the calculator should be intuitive and easy to use. Typically, the number buttons (0–9) are placed in a grid, with operators and special buttons like C (clear), ← (backspace), and = (equals) positioned logically for ease of use. 

The display should be large enough to show input clearly and should sit at the top for easy visibility. Additionally, the layout should be responsive, ensuring the calculator works well on all screen sizes, especially mobile devices.

Step 1. Setting Up the Project

To begin building a calculator using HTML, CSS, and JavaScript, we need to set up the project structure. This will help keep everything organized and ensure that all components of our calculator function properly together.

Check out Java Free Online Course

 Here’s how to structure your project and link the necessary files.

1. Folder Structure

For a clean and manageable project, use the following folder structure:

/calculator
  ├── index.html
  ├── styles.css
  └── script.js

• index.html: This file will contain the HTML structure for your calculator, including the display area and buttons.
• styles.css: This file will handle all the styling, making sure the calculator looks good and is responsive across devices.
• script.js: This is where you’ll write the logic to handle user input, perform calculations, and update the display.

By organizing the project in this way, we ensure that the calculator using HTML, CSS, and JavaScript is easy to maintain and expand upon in the future.

2. Linking HTML, CSS, and JavaScript Files

Now that we have our folder structure in place, we need to link the HTML, CSS, and JavaScript files together to make the calculator work. Here’s how to do it:

1. Linking the CSS File in HTML: In your index.html file, link the styles.css file in the <head> section:

<link rel="stylesheet" href="styles.css">

2. Linking the JavaScript File: In the <body> section of index.html, add a script tag to link the script.js file:

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

This ensures that your JavaScript calculator will be loaded and executed after the HTML structure is ready.

Final Structure in index.html

Here’s how the basic HTML file should look with both the CSS and JavaScript files linked:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculator</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Calculator layout goes here -->
  <script src="script.js"></script>
</body>
</html>

With the HTML, CSS, and JavaScript files properly linked, you're now ready to start building the actual calculator using JavaScript. This organization ensures that the components interact seamlessly to deliver a smooth user experience.

Learn how to build a calculator using Python 

upGrad’s Exclusive Software and Tech Webinar for you –

SAAS Business – What is So Different?

Step2. Building the HTML Structure

The first step in building our calculator is to create the HTML structure. HTML provides the skeleton of the calculator, which includes the display for showing results and buttons for user interaction. We'll define the layout and structure of the calculator elements.

Here’s the boilerplate code for the HTML document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator - By Upgrad</title>
    <!-- Link to external CSS file for styling -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- Main container for the calculator -->
    <div class="calculator-container">
      <!-- Display area where numbers and results are shown -->
      <input type="text" id="display" class="display" disabled />

      <!-- Buttons for the calculator -->
      <div class="buttons">
        <button class="btn clear" id="clear">C</button>
        <button class="btn backspace" id="backspace">←</button>
        <button class="btn operator" id="divide">/</button>
        <button class="btn operator" id="multiply">*</button>

        <button class="btn" id="7">7</button>
        <button class="btn" id="8">8</button>
        <button class="btn" id="9">9</button>
        <button class="btn operator" id="subtract">-</button>

        <button class="btn" id="4">4</button>
        <button class="btn" id="5">5</button>
        <button class="btn" id="6">6</button>
        <button class="btn operator" id="add">+</button>

        <button class="btn" id="1">1</button>
        <button class="btn" id="2">2</button>
        <button class="btn" id="3">3</button>
        <button class="btn equals" id="equals">=</button>

        <button class="btn" id="0">0</button>
        <button class="btn" id="decimal">.</button>
      </div>
    </div>
    
    <!-- Link to external JavaScript file for functionality -->
    <script src="script.js"></script>
  </body>
</html>

Explanation of HTML:

• The HTML structure defines the container (div.calculator-container) that holds the display and buttons of the calculator.
• The input field with id="display" is used for showing the numbers or results.
• The div.buttons contains all the buttons of the calculator (numbers, operators, and function buttons).
• We link the CSS file for styling and the JavaScript file for functionality at the end of the body.

Step3. CSS (style.css)

Now, let's add CSS to style our calculator. We'll define the general layout, button styles, and the look of the display. The goal is to make the calculator visually appealing and easy to use.

/* Resetting default margin and padding for a clean slate */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body and overall page styling */
body {
   /* Font for the whole body */
  background-color: #f4f4f4; /* Light gray background for the page */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full viewport height */
  margin: 0;
}

/* Container styling for the calculator */
.calculator-container {
  width: 320px; /* Fixed width for the calculator */
  background-color: #fff; /* White background for the calculator */
  border-radius: 10px; /* Rounded corners for a modern look */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Soft shadow effect */
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* Space between elements */
}

/* Display area styling */
.display {
  width: 100%; /* Full width of the container */
  height: 50px; /* Set height of the display area */
  font-size: 24px; /* Font size for numbers */
  text-align: right; /* Right-align the text in the display */
  padding: 10px;
  background-color: #f9f9f9; /* Light background for the display */
  border: 1px solid #ccc; /* Border around the display */
  border-radius: 5px; /* Rounded corners for the display */
  margin-bottom: 20px; /* Space below the display */
  color: #333; /* Dark text color */
}

/* Button layout in a grid (4 columns for calculator layout) */
.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal-width columns */
  grid-gap: 10px; /* Gap between buttons */
  width: 100%;
}

/* General button styling */
.btn {
  background-color: #f0f0f0; /* Light gray background */
  border: 1px solid #ccc; /* Border around each button */
  border-radius: 5px; /* Rounded corners for buttons */
  font-size: 18px; /* Font size for button text */
  padding: 20px; /* Padding inside the buttons */
  text-align: center; /* Center-align the text inside buttons */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover effect for buttons */
.btn:hover {
  background-color: #ddd; /* Darker gray on hover */
}

/* Active state for buttons (when clicked) */
.btn:active {
  background-color: #bbb; /* Even darker on click */
}

/* Styling for operator buttons (addition, subtraction, etc.) */
.btn.operator {
  background-color: #f9a825; /* Yellow background for operators */
  color: white; /* White text */
}

.btn.operator:hover {
  background-color: #f57f17; /* Darker yellow on hover */
}

.btn.operator:active {
  background-color: #ff6f00; /* Even darker on click */
}

/* Styling for the 'C' (Clear) and 'Backspace' buttons */
.btn.clear {
  background-color: #d32f2f; /* Red background for clear */
  color: white; /* White text */
}

.btn.clear:hover {
  background-color: #c62828; /* Darker red on hover */
}

.btn.clear:active {
  background-color: #b71c1c; /* Even darker red on click */
}

/* Styling for the 'Equals' button */
.btn.equals {
  background-color: #388e3c; /* Green background for equals */
  color: white; /* White text */
}

.btn.equals:hover {
  background-color: #2c6b2f; /* Darker green on hover */
}

.btn.equals:active {
  background-color: #1b5e20; /* Even darker green on click */
}

Explanation of CSS:

• Global Reset: The * selector ensures that all elements have no margin or padding by default, providing a clean slate for styling.
• Body Styling: We use flex to center the calculator container on the screen both vertically and horizontally. The background color is set to a light gray, and the height takes up the full viewport (100vh).
• Calculator Container: We set a fixed width for the calculator, applied a white background, rounded corners, and added a subtle shadow for a modern look.
• Buttons: Buttons are displayed in a grid layout with 4 columns. Hover and active states are defined to provide interactivity.
• Operator and Special Buttons: Operators (+, -, *, /), clear (C), and equals (=) buttons have distinct colors to make them visually stand out from the number buttons

Step4.  JavaScript (script.js)

Now, we will add JavaScript to bring the calculator to life. The JavaScript will handle user interactions like clicking buttons, performing calculations, and updating the display based on user input.

// Get the display element and all button elements
const display = document.getElementById('display');
const buttons = document.querySelectorAll('.btn');

// Initialize a variable to store the current calculation input
let currentInput = '';

// Add event listeners for each button
buttons.forEach(button => {
  button.addEventListener('click', (e) => {
    const value = e.target.textContent; // Get the value of the clicked button

    if (value === 'C') {
      // If 'C' is clicked, clear the display and reset the input
      currentInput = '';
      display.value = '';
    } else if (value === '←') {
      // If '←' is clicked, remove the last character from input
      currentInput = currentInput.slice(0, -1);
      display.value = currentInput;
    } else if (value === '=') {
      // If '=' is clicked, evaluate the expression and show the result
      try {
        currentInput = eval(currentInput).toString(); // Use eval() to evaluate the math expression
        display.value = currentInput;
      } catch (error) {
        // If the expression is invalid, display 'Error'
        display.value = 'Error';
        currentInput = '';
      }
    } else {
      // For other buttons (numbers and operators), append the value to the current input
      currentInput += value;
      display.value = currentInput; // Update the display with the current input
    }
  });
});

Explanation of JavaScript:

• Getting Elements: The display element is selected to update the screen, and buttons are selected to add event listeners.
• Event Listeners: Each button triggers an event when clicked. The value of the button is used to update the currentInput and the display.
• Handling Special Buttons:
  • The Clear button (C) resets the input.
  • The Backspace button (←) removes the last character from the input.
  • The Equals button (=) evaluates the mathematical expression entered by the user using JavaScript's built-in eval() function. If the expression is invalid, it shows "Error".
• Default Behavior: For number and operator buttons, the clicked value is added to the current input, and the display is updated.

If you're interested in learning how to build a calculator in C, we invite you to explore our detailed tutorial. This step-by-step guide will walk you through the process of creating a functional calculator program using C.

Conclusion:

You now have a complete and functional calculator using HTML, CSS, and JavaScript. The comments in the code explain each part of the project, and the explanations at the end of each section provide context for what each part of the code does. This should help you or any reader understand how the calculator works and how each technology contributes to the final result.

If you enjoyed building this calculator and are eager to dive deeper into web development, JavaScript, or full-stack programming, UpGrad offers industry-leading courses designed to help you master these skills and advance your career.

• Master Web Development with hands-on projects and expert mentorship.
• Learn JavaScript in-depth and become proficient in building interactive web applications.
• Expand Your Knowledge with courses on Frontend and Backend technologies.

Join UpGrad today and start building your future as a web developer. Don't wait—your journey to becoming an expert developer begins now! Feel free to test the code by copying and pasting it into an online code editor to see the result in action!

Enhance your expertise with our Software Development Free Courses. Explore the programs below to find your perfect fit.

Elevate your expertise with our range of Popular Software Engineering Courses. Browse the programs below to discover your ideal fit.

Advance your in-demand software development skills with our top programs. Discover the right course for you below.

Explore popular articles related to software to enhance your knowledge. Browse the programs below to find your ideal match.