JavaScript Program to Implement a Basic Calculator

Author:

Introduction

A basic calculator allows the user to perform basic arithmetic operations such as addition, subtraction, multiplication, and division. In JavaScript, you can easily create a calculator that accepts two numbers and performs the desired operation based on user input. This guide will walk you through writing a JavaScript program to implement a basic calculator.

Problem Statement

Create a JavaScript program that:

  • Accepts two numbers and an operator from the user.
  • Performs the arithmetic operation (addition, subtraction, multiplication, division) based on the operator.
  • Displays the result of the operation.

Example:

  • Input: 5 + 3

  • Output: 8

  • Input: 10 / 2

  • Output: 5

Solution Steps

  1. Initialize the Numbers and Operator: Accept two numbers and an operator (+, -, *, /) from the user.
  2. Perform the Operation:
    • Based on the operator, perform the arithmetic operation (addition, subtraction, multiplication, division).
  3. Display the Result: Output the result of the operation.

JavaScript Program

// JavaScript Program to Implement a Basic Calculator
// Author: https://www.rameshfadatare.com/

function calculator(num1, num2, operator) {
    let result;

    // Step 2: Perform the arithmetic operation based on the operator
    switch (operator) {
        case '+':
            result = num1 + num2;
            break;
        case '-':
            result = num1 - num2;
            break;
        case '*':
            result = num1 * num2;
            break;
        case '/':
            if (num2 === 0) {
                console.log("Error: Division by zero is not allowed.");
                return;
            }
            result = num1 / num2;
            break;
        default:
            console.log("Error: Invalid operator");
            return;
    }

    // Step 3: Display the result
    console.log(`Result: ${num1} ${operator} ${num2} = ${result}`);
}

// Example usage
const num1 = 10;
const num2 = 5;
const operator = '*';
calculator(num1, num2, operator);

Explanation

Step 1: Accept the Numbers and Operator

  • The program accepts two numbers num1 and num2 and an operator (e.g., +, -, *, /) from the user.

Step 2: Perform the Arithmetic Operation

  • The switch statement is used to check the operator and perform the appropriate arithmetic operation. The four operations handled are:
    • + for addition
    • - for subtraction
    • * for multiplication
    • / for division (with a check to avoid division by zero)

Step 3: Display the Result

  • The result of the operation is displayed using console.log().

Output Example

Result: 10 * 5 = 50

Example with Different Input

const num1 = 20;
const num2 = 4;
const operator = '/';
calculator(num1, num2, operator);

Output:

Result: 20 / 4 = 5

Handling Division by Zero

In case of division by zero, the program will display an error message:

Error: Division by zero is not allowed.

Basic Calculator with User Input in HTML

You can also create a simple calculator that accepts input from the user via an HTML form.

HTML and JavaScript Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Calculator</title>
</head>
<body>
    <h1>Basic Calculator</h1>
    <input type="number" id="num1" placeholder="Enter first number">
    <input type="number" id="num2" placeholder="Enter second number">
    <select id="operator">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <button onclick="calculate()">Calculate</button>
    <p id="result"></p>

    <script>
        function calculate() {
            const num1 = parseFloat(document.getElementById("num1").value);
            const num2 = parseFloat(document.getElementById("num2").value);
            const operator = document.getElementById("operator").value;
            let result;

            switch (operator) {
                case '+':
                    result = num1 + num2;
                    break;
                case '-':
                    result = num1 - num2;
                    break;
                case '*':
                    result = num1 * num2;
                    break;
                case '/':
                    if (num2 === 0) {
                        document.getElementById("result").textContent = "Error: Division by zero";
                        return;
                    }
                    result = num1 / num2;
                    break;
                default:
                    document.getElementById("result").textContent = "Invalid operator";
                    return;
            }

            document.getElementById("result").textContent = `Result: ${num1} ${operator} ${num2} = ${result}`;
        }
    </script>
</body>
</html>

Explanation of HTML Example

  • The user can input two numbers and select an operator using a dropdown menu.
  • When the "Calculate" button is clicked, the calculate() function is called, which performs the arithmetic operation and displays the result on the webpage.

Output in Browser

The result will be displayed in the <p> element when the user clicks the "Calculate" button.

Conclusion

This JavaScript program implements a basic calculator that performs addition, subtraction, multiplication, and division operations. The example can be further enhanced by adding more features like handling edge cases or creating a graphical user interface using HTML and JavaScript for user interaction.

Related JavaScript Programs:

JavaScript: Add Two Numbers JavaScript: Subtract Two Numbers JavaScript: Multiply Two Numbers JavaScript: Divide Two Numbers JavaScript: Find the Remainder of Two Numbers JavaScript: Check if a Number is Even or Odd JavaScript: Find the Largest Among Three Numbers JavaScript: Find the Smallest Among Three Numbers JavaScript: Check if a Number is Prime JavaScript: Find the Factorial of a Number JavaScript: Print the Fibonacci Series JavaScript: Reverse a String JavaScript: Check if a String is a Palindrome JavaScript: Convert Celsius to Fahrenheit JavaScript: Convert Fahrenheit to Celsius JavaScript: Find the Area of a Circle JavaScript: Find the Perimeter of a Rectangle JavaScript: Sort an Array JavaScript: Find the Maximum and Minimum Element in an Array JavaScript: Find the Sum of Elements in an Array JavaScript: Merge Two Arrays JavaScript: Remove Duplicates from an Array JavaScript: Count the Occurrences of an Element in an Array JavaScript: Search for an Element in an Array JavaScript: Implement the Bubble Sort Algorithm JavaScript: Implement the Quick Sort Algorithm JavaScript: Implement the Insertion Sort Algorithm JavaScript: Check if a String Contains Another String JavaScript: Split a String into an Array of Words JavaScript: Join an Array of Words into a String JavaScript: Check if Two Strings are Anagrams JavaScript: Implement a Basic Calculator JavaScript: Get the Current Date and Time JavaScript: Implement a Countdown Timer JavaScript: Validate an Email Address JavaScript: Validate a Phone Number JavaScript: Swap Two Variables JavaScript: Count the Number of Words in a String JavaScript: Implement a Stack using Arrays / Objects JavaScript: Implement a Queue using Arrays / Objects JavaScript: Depth-First Search (DFS) on a Graph JavaScript: Breadth-First Search (BFS) on a Graph JavaScript: Implement a Binary Search Tree JavaScript: Detect a Cycle in a Linked List JavaScript: Implement the Tower of Hanoi Algorithm JavaScript: Search for an Element in a Binary Search Tree JavaScript: Implement a Priority Queue JavaScript: Implement an AVL Tree JavaScript: Implement a Circular Queue using Arrays JavaScript: Implement a Doubly Linked List JavaScript Function: Sum of Two Numbers JavaScript: Convert a String to Title Case JavaScript: Reverse a String without Built-in reverse() Function JavaScript: Reverse the Words in a Sentence without Built-in Function

Comments

Post a Comment

Leave Comment