14.3 Programming Activity (20 mins)

Task:

  1. Create create a simple arithmetic calculator and returns the result.

  2. Challenge: Write a function that takes two numbers and returns the result in the document page of +, -, *, / calculation.

Step-by-Step Activity:

  1. Create an HTML file (e.g., aithmeticCalc.html) and write JavaScript code that demonstrates the use of functions to calculate the square of a number and the area of a rectangle.

  2. Step 1: Create the HTML Structure

    1. Open a code editor and create a new HTML file (e.g., arithmeticCalc.html).

    2. Define the basic structure of the HTML page using the following code:

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Arithmetic Calculator</title>
</head>
<body>
  <!-- Content will be added here -->
</body>
</html>

    Step 2: Add the Calculator Layout

    1. Inside the <body> tag, add the following elements:

      • Two input fields for the numbers.

      • Four buttons for the operations (Add, Subtract, Multiply, Divide).

      • A section to display the result.

    2. The updated code looks like this:

      <h1>Simple Arithmetic Calculator</h1>
<div>
  <input type="number" id="num1" placeholder="Enter Number 1">
  <input type="number" id="num2" placeholder="Enter Number 2">
</div>
<div>
  <button id="addButton">Add</button>
  <button id="subtractButton">Subtract</button>
  <button id="multiplyButton">Multiply</button>
  <button id="divideButton">Divide</button>
</div>
<div id="result">Result: </div>

    Step 3: Style the Page

    1. Add a <style> block inside the <head> tag to style the calculator elements.

    2. Example CSS:

      <style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
  }
  input {
    margin: 10px;
    padding: 10px;
    width: 100px;
    font-size: 16px;
  }
  button {
    margin: 5px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }
  #result {
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
  }
</style>

    Step 4: Add JavaScript for Interactivity

    1. Add a <script> tag at the end of the <body> tag.

    2. Write JavaScript to handle button click events and perform calculations.

    3. The JavaScript should:

      • Get input values from the fields.

      • Perform the arithmetic operation when a button is clicked.

      • Display the result in the Result section.

    4. Example JavaScript Code:

      <script>
  // Function to get input values
  function getInputValues() {
    const num1 = parseFloat(document.getElementById("num1").value);
    const num2 = parseFloat(document.getElementById("num2").value);
    return { num1, num2 };
  }

  // Add event listeners for each button
  document.getElementById("addButton").addEventListener("click", function() {
    const { num1, num2 } = getInputValues();
    if (!isNaN(num1) && !isNaN(num2)) {
      document.getElementById("result").innerText = `Result: ${num1 + num2}`;
    } else {
      document.getElementById("result").innerText = "Please enter valid numbers!";
    }
  });

  document.getElementById("subtractButton").addEventListener("click", function() {
    const { num1, num2 } = getInputValues();
    if (!isNaN(num1) && !isNaN(num2)) {
      document.getElementById("result").innerText = `Result: ${num1 - num2}`;
    } else {
      document.getElementById("result").innerText = "Please enter valid numbers!";
    }
  });

  document.getElementById("multiplyButton").addEventListener("click", function() {
    const { num1, num2 } = getInputValues();
    if (!isNaN(num1) && !isNaN(num2)) {
      document.getElementById("result").innerText = `Result: ${num1 * num2}`;
    } else {
      document.getElementById("result").innerText = "Please enter valid numbers!";
    }
  });

  document.getElementById("divideButton").addEventListener("click", function() {
    const { num1, num2 } = getInputValues();
    if (!isNaN(num1) && !isNaN(num2)) {
      if (num2 !== 0) {
        document.getElementById("result").innerText = `Result: ${num1 / num2}`;
      } else {
        document.getElementById("result").innerText = "Division by zero is not allowed!";
      }
    } else {
      document.getElementById("result").innerText = "Please enter valid numbers!";
    }
  });
</script>

    Step 5: Test the Calculator

    1. Save the file as calculator.html.

    2. Open the file in a web browser.

    3. Enter two numbers in the input fields and click each button to test the operations:

      • Add: Displays the sum.

      • Subtract: Displays the difference.

      • Multiply: Displays the product.

      • Divide: Displays the quotient or an error if dividing by zero.

    Expected Behavior:

    1. The calculator performs correct arithmetic calculations for valid inputs.

    2. Displays appropriate error messages for invalid inputs or division by zero.

    3. Results are dynamically updated in the Result section.

    This step-by-step procedure ensures the creation of a fully functional arithmetic calculator with basic interactivity using HTML, CSS, and JavaScript.

Previous14.2 Function Parameters and Return Values (20 mins)Next14.4 Anonymous Functions and Arrow Functions (15 mins)

Last updated