Calculator App with HTML, CSS & JavaScript

10 DAYS 10 PROJECT CHALLENGE

Day #02

Project Overview

The Calculator App is a simple beginner-friendly project built using HTML, CSS, and JavaScript. It allows users to perform basic arithmetic operations such as addition, subtraction, multiplication, and division. The calculator has a clean and simple interface with buttons for numbers, operators, clearing the input, and calculating the final result.

This project is designed to help beginners practice important frontend development concepts. By creating this calculator app, you can learn how JavaScript handles button clicks, updates HTML elements, stores user input, and performs calculations. It is also a great way to understand how HTML, CSS, and JavaScript work together to create an interactive web application.

Live Preview

Key Features

  • Basic Arithmetic Operations: The Calculator app allows users to perform basic mathematical calculations such as addition, subtraction, multiplication, and division.
  • Number and Operator Buttons: Users can enter numbers and select different arithmetic operators using the available buttons.
  • Clear Functionality: The clear button removes the current input from the calculator display and allows users to start a new calculation.
  • Calculation Result: The equals button appears when users need to input an equals sign to get their calculation results.
  • Error Handling: If user make an error while performing their calculations, the calculator will display an ‘Error’ message instead of allowing them to proceed to the next calculation step with incorrect data.
  • Clean and Simple UI: The calculator uses a straightforward layout with clearly arranged buttons, making it easy to use.
  • Responsive Design: The calculator is centered on the page and can be viewed across different screen sizes.

What You’ll Learn

  • Understand how to select HTML elements using JavaScript.
  • Learn how to add click events to multiple buttons.
  • Learn how to update an input field dynamically using JavaScript.
  • Understand how to store and update user input.
  • Practice performing arithmetic calculations with JavaScript.
  • Learn how try…catch can be used for basic error handling.
  • Understand how HTML, CSS, and JavaScript work together to create an interactive project.
  • Practice using CSS Grid to arrange calculator buttons.

HTML Code

The given HTML code below represents the basic structure of the Calculator App. Firstly, by linking the style.css file inside the <head> section, so that CSS can control the appearance and layout of the calculator. The calculator content is placed inside the <div> with the calculator class.

Inside this container, the <input> element with the id=”display” is used to input and display the numbers, operations, and results. The buttons are placed inside the buttons container with the buttons class. Each button represents a number or an operation. The operator class styles the operators. The clear and equals buttons have their own ids, which will be used in the script.js file. Finally, the script.js file is linked at the end of the tag to add functionality to the calculator.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculator App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="calculator">
    <input type="text" id="display" disabled>
    <div class="buttons">
      <button class="btn">7</button>
      <button class="btn">8</button>
      <button class="btn">9</button>
      <button class="btn operator">/</button>

      <button class="btn">4</button>
      <button class="btn">5</button>
      <button class="btn">6</button>
      <button class="btn operator">*</button>

      <button class="btn">1</button>
      <button class="btn">2</button>
      <button class="btn">3</button>
      <button class="btn operator">-</button>

      <button class="btn">0</button>
      <button class="btn">.</button>
      <button id="clear">C</button>
      <button class="btn operator">+</button>

      <button id="equals">=</button>
    </div>
  </div>

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

CSS Code

The CSS code below is responsible for controlling the appearance and layout of the Calculator App. The body utilizes the Flexbox layout to center the calculator in the browser’s viewport. It also sets the background color of the page to dark blue. The .calculator class also sets the background color of the calculator to black, adds some padding, rounds the edges, and creates a drop shadow.

The #display selector is responsible for the styling of the calculator’s display, which shows the calculation. The .buttons class sets the CSS Grid layout to the 4-column structure you see in the app. The button selector itself specifies the button’s size, font, border-radius, and hover effect. Finally, several classes and IDs are used to style the operators, clear button, and equals button to have different colors and effects than the default ones.

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

.calculator {
  background: black;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  width: 260px;
}

#display {
  width: 92%;
  height: 50px;
  font-size: 1.5rem;
  text-align: right;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

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

button {
  height: 50px;
  font-size: 1.2rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}

button:hover {
  background: #ebaa25;
}

.operator {
  background: #007bff;
  color: white;
}

#equals {
  grid-column: span 4;
  background: #28a745;
  color: white;
}

#display{
  color:white;
}
#clear {
  background: #dc3545;
  color: white;
}

Javascript Code

The JavaScript code adds the interactive functionality to the Calculator App. Initially, the code accesses the display and calculator buttons using the HTML built-in function getElementById() and querySelectorAll(). The code then declares a variable named currentInput and stores the numbers and operators clicked by the user.

Next, a click event is added to each calculator button, and a value that can be added to the display. The clear button clears the display and the stored value of the current input. Furthermore, the code adds an operator click event to the calculator button. When the equals button is clicked, the expression is evaluated and displayed on the screen. The try…catch block evaluates invalid expressions and displays an error message and resets the current input value.

const display = document.getElementById("display");
const buttons = document.querySelectorAll(".btn");
const clearBtn = document.getElementById("clear");
const equalsBtn = document.getElementById("equals");

let currentInput = "";

// Add number/operator to input
buttons.forEach(button => {
  button.addEventListener("click", () => {
    currentInput += button.textContent;
    display.value = currentInput;
  });
});

// Clear display
clearBtn.addEventListener("click", () => {
  currentInput = "";
  display.value = "";
});

// Calculate result
equalsBtn.addEventListener("click", () => {
  try {
    currentInput = eval(currentInput); // evaluate expression
    display.value = currentInput;
  } catch {
    display.value = "Error";
    currentInput = "";
  }
});
Live Preview
Download Project
Previous
Next Project

Your Task

Create a similar project on your own and share your CodePen link in the comments.
I’ll review your work and share my feedback as a reply!

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Hassan Javed

https://hassanjaved17.github.io/Neon-Calculator/

1
Reply
mangesh chavhan

<!DOCTYPE html>
<html lang=“en”>

<head>
    <meta charset=“UTF-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
    <title>Calculator-App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
            background: #002252;
        }

        .container {
            background: black;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            width: 260px;
        }

        #display {
            color: white;
        }

        #display {
            width: 92%;
            height: 50px;
            font-size: 1.5rem;
            text-align: right;
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 8px;
            background: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
        }

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

        button {
            height: 50px;
            font-size: 1.2rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: 0.2s;
        }

        button:hover {
            background: #ebaa25;
        }

        .operator {
            background: #007bff;
            color: white;
        }

        #equals {
            grid-column: 4 span ;
            background: #28a745;
            color: white;
        }

        #display {
            color: white;
        }

        .clear {
            background: #dc3545;
            color: white;
        }
    </style>
</head>

<body>
    <div class=“container”>

        <div>
            <input type=“text” id=“display” disabled>
        </div>

        <div class=“grid”>
            <button class=“btn”>7</button>
            <button class=“btn”>8</button>
            <button class=“btn”>9</button>
            <button class=“btn operator”>/</button>
            <button class=“btn”>4</button>
            <button class=“btn”>5</button>
            <button class=“btn”>6</button>
            <button class=“btn operator”>*</button>
            <button class=“btn”>1</button>
            <button class=“btn”>2</button>
            <button class=“btn”>3</button>
            <button class=“btn operator”>–</button>
            <button class=“btn”>0</button>
            <button class=“btn”>.</button>
            <button class=“btn clear”>C</button>
            <button class=“btn operator”>+</button>
            <button class=“calBtn” id=“equals”> = </button>
        </div>

            <!– <button class=”calBtn” id=”equals”> = </button> –>
     

    </div>
    <script>

        const display = document.querySelector(“input”);
        const btns = document.querySelectorAll(“.btn”);
        const clearBtn = document.querySelector(“.clear”);
        const calBtn = document.querySelector(“.calBtn”);
        let currentVal = “”;

        btns.forEach((btn) => {
            btn.addEventListener(“click”, () => {
                currentVal += btn.textContent;
                display.value = currentVal;
            });
        });

        clearBtn.addEventListener(“click”, () => {
            currentVal = ”;
            display.value = currentVal;
        });

        calBtn.addEventListener(“click”, (e) => {
            try {
                display.value = eval(currentVal);
            } catch (err) {
                display.value = “Error”;
                currentVal = “”;
            }
        });

    </script>
</body>

</html>

0
Reply

Related Projects

Day 4 : Image Slider / Carousel

A slider that automatically or manually slides through images.

Concepts: CSS transitions, DOM traversal.

View Details

Day 5 : Quiz App

A multiple-choice quiz with score tracking.

Concepts: Loops, conditionals.

View Details

Day 6 : Random Quote Generator

Displays a random quote on button click or from an API.

Concepts: Math.random(), API fetch.

View Details