Calculator App | Free Online Basic Calculator

Calculator App with HTML, CSS & JavaScript

10 DAYS 10 PROJECT CHALLENGE

Day #02

Project Overview

This project is a Calculator App built using HTML, CSS, and JavaScript. It performs basic arithmetic operations such as addition, subtraction, multiplication, and division. The calculator is designed to be simple, modern, and responsive, making it a great beginner-friendly JavaScript project to learn event listeners, DOM manipulation, and JavaScript logic.

Key Features

Basic Arithmetic Operations – Supports addition, subtraction, multiplication, and division.
Clear Functionality – Reset the calculator instantly with a single click.
Responsive Design – Works seamlessly on desktop, tablet, and mobile devices.
User-Friendly Interface – Simple, modern design for easy interaction.
Error Handling – Displays “Error” when invalid operations are performed.

HTML Code

<!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

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

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 = "";
  }
});