Creating Simple Calculator using JavaScript

by

Description:

Your task is to create a basic calculator that’s easy to use and can handle addition, subtraction, multiplication, and division.

1. Design the Calculator:

   Design a simple layout using HTML. Include areas for users to input two numbers, buttons for each operation (addition, subtraction, multiplication, and division), and a space to display the result.

2.Write JavaScript Functions:

   Develop JavaScript functions to manage user interactions and perform calculations.

   – Obtain the numbers entered by the user.

   – Determine the operation based on the selected button.

   – Carry out the chosen operation.

   – Display the result.

3. Test Your Calculator:

   Thoroughly test the calculator with different number combinations and operations to ensure its accuracy and functionality.

Calculator code

<!DOCTYPE html>
<html>
<head>
    <title>Simple Calculator</title>
</head>
<body>
    <h1>Simple Calculator</h1>
    <label for="num1">Enter first number:</label>
    <input type="number" id="num1"><br>
    <label for="num2">Enter second number:</label>
    <input type="number" id="num2"><br>
    <button onclick="calculate('+')">Add</button>
    <button onclick="calculate('-')">Subtract</button>
    <button onclick="calculate('*')">Multiply</button>
    <button onclick="calculate('/')">Divide</button><br>
    <div id="result"></div>

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

            switch (operator) {
                case '+':
                    result = num1 + num2;
                    break;
                case '-':
                    result = num1 - num2;
                    break;
                case '*':
                    result = num1 * num2;
                    break;
                case '/':
                    result = num1 / num2;
                    break;
            }

            document.getElementById('result').textContent = 'Result: ' + result;
        }
    </script>
</body>
</html>
  1. function calculate(operator) { ... }: This line defines a function named calculate that takes one parameter called operator. This function is responsible for performing arithmetic calculations based on the operator selected by the user.
  2. const num1 = parseFloat(document.getElementById('num1').value);: This line retrieves the value entered by the user in the input field with the ID num1 and converts it to a floating-point number using parseFloat(). It stores the converted value in the variable num1.
  3. const num2 = parseFloat(document.getElementById('num2').value);: Similar to the previous line, this line retrieves the value entered by the user in the input field with the ID num2, converts it to a floating-point number, and stores it in the variable num2.
  4. let result;: This line declares a variable named result without assigning it a value. It will be used to store the result of the arithmetic operation.
  5. switch (operator) { ... }: This switch statement evaluates the operator parameter passed to the calculate function and executes a corresponding block of code based on its value.
  6. Inside the switch statement:
    • case '+': result = num1 + num2; break;: If the operator is '+' (addition), it adds num1 and num2 together and assigns the result to the result variable.
    • case '-': result = num1 - num2; break;: If the operator is '-' (subtraction), it subtracts num2 from num1 and assigns the result to the result variable.
    • case '*': result = num1 * num2; break;: If the operator is '*' (multiplication), it multiplies num1 by num2 and assigns the result to the result variable.
    • case '/': result = num1 / num2; break;: If the operator is '/' (division), it divides num1 by num2 and assigns the result to the result variable.
  7. document.getElementById('result').textContent = 'Result: ' + result;: This line updates the content of the element with the ID result to display the calculated result. It concatenates the string 'Result: ' with the value of the result variable and sets it as the text content of the element.

This code creates a simple calculator with HTML input fields for two numbers, buttons for different operations, and a display area for the result. The JavaScript function calculate() is called when a button is clicked, which performs the corresponding mathematical operation based on the operator passed as an argument. The result is then displayed in the designated area.

 <!–more–>

Leave a Comment