14.3 Programming Activity (20 mins)

Task:

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

Step-by-Step Activity:

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.

Step 1: Create the HTML Structure

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

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

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.

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

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

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

Add a <script> tag at the end of the <body> tag.
Write JavaScript to handle button click events and perform calculations.
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.

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

Save the file as calculator.html.
Open the file in a web browser.
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:

The calculator performs correct arithmetic calculations for valid inputs.
Displays appropriate error messages for invalid inputs or division by zero.
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 1 year ago

hashtagStep-by-Step Activity:

hashtagStep 1: Create the HTML Structure

hashtagStep 2: Add the Calculator Layout

hashtagStep 3: Style the Page

hashtagStep 4: Add JavaScript for Interactivity

hashtagStep 5: Test the Calculator

hashtagExpected Behavior: