Home/Blog/Web Development/How to build a simple HTML CSS JavaScript calculator
Home/Blog/Web Development/How to build a simple HTML CSS JavaScript calculator

How to build a simple HTML CSS JavaScript calculator

9 min read
Feb 27, 2025
content
HTML, CSS, and JavaScript: Essential technologies for a web calculator
Understanding HTML: Structuring your JavaScript calculator
Styling a JavaScript calculator with CSS: Layout, colors, and responsiveness
Adding functionality to your calculator using JavaScript
Building the HTML foundation for a simple calculator
Step 1: Setting up the document structure
Explanation
Step 2: Creating the calculator container
Explanation
CSS styling for a professional and responsive Calculator UI
Step 1: Styling the body
Step 2: Styling the calculator container
Step 3: Styling the input field section
Step 4: Styling the buttons section
Step 5: Adding responsiveness with media query
JavaScript for calculator logic: Handling input and operations
Explanation
Conclusion

Key Takeaways:

  • Building a simple calculator is an ideal beginner project that effectively integrates HTML, CSS, and JavaScript, providing hands-on experience in structuring web content, styling interfaces, and adding interactivity.

  • HTML defines the layout, CSS enhances the visual design, and JavaScript adds functionality, thereby seamlessly collaborating to create user-friendly and interactive applications.

  • It is recommended to follow a structural and incremental approach to developing applications, e.g., calculators. Start by setting up the HTML structure, apply CSS for a responsive and attractive design, and finally implement JavaScript for dynamic operations.

Ever wondered how a simple calculator works behind the scenes? What if you could create your own from scratch using just HTML, CSS, and JavaScript? Building a calculator is a great beginner-friendly project that introduces essential web development concepts while helping you gain hands-on experience structuring, styling, and adding interactivity to a web page.

In this step-by-step tutorial, we’ll guide you through building a fully functional calculator, from designing its interface to making it interactive. You’ll not only learn how these technologies work together but also develop practical coding skills that can be applied to more complex web applications. By the end, you’ll have a sleek, user-friendly calculator that responds to user input just like a real one.

Let’s dive in and start coding!

HTML, CSS, and JavaScript: Essential technologies for a web calculator#

Before we start coding, let’s break down the three essential technologies that power our calculator:

Understanding HTML: Structuring your JavaScript calculator#

HTML (HyperText Markup Language) is the backbone of every web page, defining its structure and content. It uses tags to create elements such as headings, paragraphs, buttons, input fields, and more. Think of HTML as the framework of a building—it provides the skeleton, but without styling or functionality, it remains plain and unappealing.

For our calculator, HTML will define the layout, including:

  • The display screen where results appear.

  • Number and operator buttons.

  • A clear/reset button for deleting inputs.

Each of these elements will be represented using HTML tags, forming the basic structure of our application.

HTML logo
HTML logo

Styling a JavaScript calculator with CSS: Layout, colors, and responsiveness#

CSS (Cascading Style Sheets) is responsible for designing and styling the calculator. Without CSS, a web page would look like a block of plain text. With CSS, we can apply colors, align elements, add spacing, and even make the calculator responsive across different screen sizes.

In our calculator, CSS will be used to:

  • Style the buttons for a modern and interactive feel.

  • Organize the layout with grids or Flexbox for a structured appearance.

  • Add hover effects and smooth transitions to improve user experience.

With just a few lines of CSS, we can transform a basic HTML structure into a visually appealing, user-friendly calculator.

CSS logo
CSS logo

Adding functionality to your calculator using JavaScript#

While HTML provides the structure and CSS enhances the appearance, JavaScript is the magic that makes the calculator interactive. JavaScript is a powerful programming language that allows us to control web page behavior and handle user interactions dynamically.

For our calculator, JavaScript will be responsible for:

  • Detecting button clicks and capturing user input.

  • Performing arithmetic operations like addition, subtraction, multiplication, and division.

  • Displaying results dynamically and handling errors like division by zero.

Without JavaScript, the calculator would just have a static design. By writing a few event listeners and functions, we’ll make it functional, allowing users to perform real calculations effortlessly.

JavaScript logo
JavaScript logo

To understand in-depth concepts of HTML, CSS, and JavaScript, don’t forget to have a look at Educative’s course:

Learn HTML, CSS, and JavaScript from Scratch

Cover
Learn HTML, CSS, and JavaScript from Scratch

This course will teach you the fundamentals of creating web applications, from the basics of creating web pages with HTML, stylizing content with CSS, all the way to building interactivity into a page using JavaScript in the browser. Instead of watching tedious videos and wondering how to translate those videos into real code, you'll be practicing what you learn through interactive, test-based exercises within minutes. Along the way, you'll be able to produce functional modules, including an image carousel and a to-do list application. No prior knowledge is needed.

10hrs
Beginner
41 Challenges
19 Quizzes

Now that we’ve covered the core technologies behind the calculator, it’s time to start coding.

Building the HTML foundation for a simple calculator#

We will start with a simple structure for the calculator. Let’s follow a step-by-step approach to this.

Step 1: Setting up the document structure#

We start by giving the calculator a name in the <title> tag, which appears in the browser tab.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Educative’s Calculator</title>
  <link rel="stylesheet" href="styles.css">
</head>
Setting up the document structure

Explanation#

  • Line 1: We declare the document as an HTML5 document.

  • Line 2: We set the language to English, which aids accessibility and SEO.

  • Lines 3–8: We define the head that contains metadata.

    • Line 6: We give our calculator a name called “Educative’s Calculator” within the <title> tag.

    • Line 7: We link our stylesheet styles.css to the main HTML file.

Step 2: Creating the calculator container#

This is where the actual fun begins! We use a div with a class name calculator as the main container for the entire calculator.

<body>
  <div class="calculator">
    <div class="display">
      <input type="text" id="result" disabled>
    </div>
    <div class="buttons">
      <button>7</button>
      <button>8</button>
      <button>9</button>
      <button>/</button>
      <button>4</button>
      <button>5</button>
      <button>6</button>
      <button>*</button>
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>-</button>
      <button>0</button>
      <button>.</button>
      <button>=</button>
      <button>+</button>
      <button>C</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>
Creating the calculator container

Explanation#

  • Line 2: The <div class="calculator"> acts as the parent div for all calculator elements.

  • Lines 3–5: We define an <input> element for displaying the user input and results. The disabled attribute ensures users cannot type manually.

  • Lines 6–24: We define a section that contains the buttons for numbers (0–9), operators (+, -, *, /), the decimal point (.), the equal sign (=), and a clear button (C). Each <button> element represents a clickable calculator button.

Let’s look at the HTML structure that we have created so far:

CSS styling for a professional and responsive Calculator UI#

CSS transforms the plain HTML structure into a visually pleasing and user-friendly calculator. Let’s follow a step-by-step approach to this.

Step 1: Styling the body#

The application body is styled to center the calculator and apply a background color. 

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

In the code above, we do the following to style the body:

  • Line 2: We use font-family to set sans-serif font for all text.

  • Line 3: We use background-color to set a light gray background.

  • Line 4: We use Flexbox (display: flex) to center the calculator horizontally and vertically.

Step 2: Styling the calculator container#

The main calculator div is styled with a shadow, rounded corners, and a fixed width.

.calculator {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  width: 90%; /* Adjusted to be relative for smaller screens */
  max-width: 300px; /* Restricts it from growing too wide */
  padding: 10px 10px 0px 10px; /* Added padding to create space inside the calculator */
}
Styling the calculator container

In the code above, we do the following to style the calculator container:

  • Line 2: We use background to set the calculator background to white.

  • Line 3: We use border-radius to create rounded corners for the container.

  • Line 4: We use box-shadow to add a shadow for depth.

Step 3: Styling the input field section#

The input field section is styled to look like a traditional calculator screen.

.display input {
  width: 100%;
  height: 60px;
  border: none;
  text-align: right;
  font-size: 24px;
  padding: 10px;
  box-sizing: border-box;
  border-bottom: 2px solid #ccc;
}
Styling the input field section

In the code above, we do the following to style the input field section:

  • Line 2: We use width: 100% to ensure the display spans the width of the calculator.

  • Line 5: We use text-align: right to align numbers and results to the right, like a standard calculator.

  • Line 6: We use font-size: 24px to make text easily readable.

Step 4: Styling the buttons section#

The buttons are arranged in a grid layout for symmetry.

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 10px 0;  /* Added padding top and bottom */
}
button {
  height: 60px;
  border: none;
  font-size: 20px;
  cursor: pointer;
  background-color: #f1f1f1;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #ddd;
}
button:nth-child(17) {
  background-color: #f76c6c;
  color: white;
}
Styling the buttons section

In the code above, we do the following to style the buttons section:

  • Line 3: We use grid-template-columns: repeat(4, 1fr) to create a 4-column grid for buttons.

  • Line 4: We use gap: 5px to add spacing between buttons.

  • Lines 18–20: We use hover effect on buttons to add interactivity with a color change.

  • Lines 22–25: The “C” button (nth-child(17)) is styled in red to indicate its importance.

Step 5: Adding responsiveness with media query#

To ensure the calculator works well on smaller screens, we use a media query to adjust the layout and element sizes for devices with a screen width of 480px or less.

/* Media query for smaller screens (e.g., mobile devices) */
@media (max-width: 480px) {
  .calculator {
    width: 100%; /* Expands to full width on very small screens */
    margin: 10px; /* Adds some breathing space */
    padding: 10px; /* Slightly reduced padding for mobile */
  }
  button {
    height: 50px; /* Reduces button height for smaller screens */
    font-size: 18px; /* Adjusts font size for readability */
  }
  .display input {
    height: 50px; /* Shrinks the input height slightly */
    font-size: 20px; /* Adjusts font size for smaller screens */
  }
  .buttons {
    gap: 3px; /* Reduces the gap between buttons */
    padding: 10px 0; /* Slightly reduced padding for mobile */
  }
}
Making the styling responsive for different screens

In the code above, the following adjustments are made to enhance the calculator’s usability on small screens:

  • Lines 3–7: We create a .calculator function.

    • Line 4: We use .calculator { width: 100%; } to ensure the calculator spans the full width of smaller devices, making it easier to use.

    • Line 5: We have added a margin around the calculator .calculator { margin: 10px; } for breathing space and better aesthetics.

  • Lines 9–12: We use button { height: 50px; font-size: 18px; } to reduce the button height and font size, ensuring they fit comfortably on smaller screens while remaining functional.

  • Lines 14–17: We use .display input { height: 50px; font-size: 20px; }: to adjust the display field’s height and font size to maintain readability without wasting space.

  • Lines 19–22: Lastly, we have reduced the spacing between buttons using .buttons { gap: 3px; } to optimize space usage while maintaining a clean layout.

By incorporating this media query, the calculator layout becomes fully responsive, ensuring a seamless experience on devices of all sizes, including mobile phones.

Let’s now integrate the CSS styles with the HTML structure that we have created.

The CSS styles created above ensure a responsive, professional design that adapts to different screen sizes.

Looking to design a personalized digital resume? Try this project, “Creating an Online CV with HTML and CSS,” to learn how to craft an interactive online CV using HTML for a polished and unique presentation.

JavaScript for calculator logic: Handling input and operations#

JavaScript powers the calculator by handling user input and processing calculations.

const resultInput = document.getElementById("result");
let currentInput = "";
document.querySelectorAll(".buttons button").forEach(button => {
  button.addEventListener("click", () => {
    const value = button.textContent;
    if (value === "C") {
      currentInput = ""; // Clear input
    } else if (value === "=") {
      try {
        currentInput = eval(currentInput).toString(); // Evaluate expression
      } catch {
        currentInput = "Error"; // Handle invalid expressions
      }
    } else {
      currentInput += value; // Append button value to input
    }
    
    resultInput.value = currentInput; // Update display
  });
});
Adding interactivity with JavaScript

Explanation#

  • Line 1: We get a reference of the <input> field where results are displayed.

  • Line 2: We store the user’s input as a string for processing.

  • Lines 4–6: We capture button clicks and retrieve the button’s text content.

  • Lines 8–9: If “C” is pressed, we clear the input.

  • Lines 10–15: If “=” is pressed, we evaluate the mathematical expression using the eval() method. If the input contains invalid characters or an incomplete expression, an error is displayed.

eval() is convenient but insecure. For example, it could execute malicious input if a user enters JavaScript code instead of a mathematical expression. A safer alternative is to use a math parser library like math.js.

  • Lines 16–18: For other buttons, we append their value to the input string.

  • Line 20: We update the value of the referenced <input> field with the new evaluated value.

Let’s integrate this JavaScript script to make our static calculator interactive.

Congratulations, we have finally created a calculator using only HTML, CSS, and JavaScript.

Want to build an SEO-friendly real-world application with HTML? Try this project: Build a Microblogging App Using PHP, HTML, JavaScript, and CSS.

Conclusion#

Building a calculator using HTML, CSS, and JavaScript is a foundational project for aspiring web developers. It introduces you to the essential concepts of structuring web content, styling interfaces, and creating interactive applications. By following this guide, you’ve not only created a working calculator but also gained valuable experience in debugging, testing, and enhancing web projects.

Frequently Asked Questions

Can I use a JavaScript library to build the calculator?

Yes, libraries like React or Vue can simplify the process, especially for larger projects. However, building a calculator without libraries helps you understand the core concepts.

What is the purpose of the eval() function in JavaScript, and is it safe?

What is the difference between disabled and readonly for the input field?

How do I deploy an HTML, CSS, or JavaScript app?

How to put HTML, CSS, and JavaScript together?