Introduction

A calculator is a fundamental tool in any computing environment, used for performing arithmetic operations, converting between different number systems, and often providing additional functions like trigonometric calculations and scientific notation. This tutorial will delve into JavaScript, focusing on creating mini-projects that demonstrate basic calculator functionality. We’ll build a simple calculator that can perform addition, subtraction, multiplication, and division, all within a user-friendly interface. This project will provide a solid foundation for further exploration of JavaScript and its capabilities.

This calculator can perform:

Addition (+)
Subtraction (−)
Multiplication (×)
Division (÷)

It helps you learn event handling, DOM manipulation, and basic logic building.

Project Setup

You only need:

A browser
A code editor

No installation required.

Code Implementation

📁 index.html

<!DOCTYPE html>
<html>
<head>
  <title>Simple Calculator</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      text-align: center;
      margin-top: 50px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
    }

    h1 {
      color: white;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
      margin-bottom: 30px;
    }

    .calculator {
      display: inline-block;
      padding: 25px;
      background: #2c3e50;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }

    input {
      width: 220px;
      height: 60px;
      font-size: 28px;
      text-align: right;
      margin-bottom: 15px;
      padding: 10px;
      border: none;
      border-radius: 10px;
      background: #ecf0f1;
      color: #2c3e50;
      font-weight: bold;
    }

    button {
      width: 50px;
      height: 50px;
      margin: 5px;
      font-size: 20px;
      cursor: pointer;
      border: none;
      border-radius: 10px;
      background: #ecf0f1;
      color: #2c3e50;
      font-weight: bold;
      transition: all 0.2s ease;
    }

    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    button:active {
      transform: translateY(0);
    }

    .operator {
      background: #3498db;
      color: white;
    }

    .equals {
      background: #27ae60;
      color: white;
    }

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

  <h1>Calculator</h1>

  <div class="calculator">
    <input type="text" id="display" disabled>

    <br>

    <button onclick="appendNumber('7')">7</button>
    <button onclick="appendNumber('8')">8</button>
    <button onclick="appendNumber('9')">9</button>
    <button class="operator" onclick="setOperator('/')">÷</button>

    <br>

    <button onclick="appendNumber('4')">4</button>
    <button onclick="appendNumber('5')">5</button>
    <button onclick="appendNumber('6')">6</button>
    <button class="operator" onclick="setOperator('*')">×</button>

    <br>

    <button onclick="appendNumber('1')">1</button>
    <button onclick="appendNumber('2')">2</button>
    <button onclick="appendNumber('3')">3</button>
    <button class="operator" onclick="setOperator('-')">−</button>

    <br>

    <button onclick="appendNumber('0')">0</button>
    <button class="clear" onclick="clearDisplay()">C</button>
    <button class="equals" onclick="calculate()">=</button>
    <button class="operator" onclick="setOperator('+')">+</button>
  </div>

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

</body>
</html>

📁 script.js

let currentInput = "";
let operator = "";
let firstNumber = "";

// Display element
const display = document.getElementById("display");

// Add number
function appendNumber(num) {
  currentInput += num;
  if (operator) {
    display.value = firstNumber + " " + operator + " " + currentInput;
  } else {
    display.value = currentInput;
  }
}

// Set operator
function setOperator(op) {
  if (currentInput === "") return; // Don't set operator if no number entered
  operator = op;
  firstNumber = currentInput;
  currentInput = "";
  display.value = firstNumber + " " + op + " ";
}

// Clear display
function clearDisplay() {
  currentInput = "";
  operator = "";
  firstNumber = "";
  display.value = "";
}

// Calculate result
function calculate() {
  let secondNumber = currentInput;
  let result = 0;

  let num1 = parseFloat(firstNumber);
  let num2 = parseFloat(secondNumber);

  if (operator === "+") {
    result = num1 + num2;
  } else if (operator === "-") {
    result = num1 - num2;
  } else if (operator === "*") {
    result = num1 * num2;
  } else if (operator === "/") {
    if (num2 === 0) {
      display.value = "Error";
      return;
    }
    result = num1 / num2;
  }

  display.value = result;
  currentInput = result.toString();
}

How to Run

Create a folder
Add index.html and script.js
Open index.html in your browser

These mini-projects provide a foundation for building more sophisticated calculators. Experiment with different operators, error handling, and user input to expand your skills and understanding of JavaScript.

Calculator