12.5 Programming Activity

Programming Activity (20 mins)

Task Instructions:

Task: Write a JavaScript script that checks whether a user is eligible to vote based on their age using both if-else and switch statements for different eligibility criteria.
- Objective: Practice using both if-else and switch statements to evaluate different conditions based on the user's age.
Script Structure:
- Use an if-else statement to check if the user is eligible to vote.
- Use a switch statement to output additional information based on age, such as eligibility to drive or drink alcohol.

Example Code:

Create an HTML file (e.g., age_eligibility.html) that includes a JavaScript script.

HTML & JavaScript Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Eligibility Checker</title>
</head>
<body>
  <h1>Check the Console for Eligibility Results</h1>
  
  <script>
    // Prompt the user to enter their age
    let age = prompt("Please enter your age:");
    age = parseInt(age);

    // 1. If-Else Statement: Check voting eligibility
    if (age >= 18) {
      console.log("You are eligible to vote.");
    } else {
      console.log("You are not eligible to vote.");
    }

    // 2. Switch Statement: Check other age-based criteria
    switch (true) {
      case (age >= 21):
        console.log("You are eligible to drink alcohol.");
        // Fall through to check driving eligibility
      case (age >= 16):
        console.log("You are eligible to drive.");
        break;
      case (age < 16):
        console.log("You are not old enough to drive.");
        break;
      default:
        console.log("Invalid age entered.");
    }
  </script>
</body>
</html>

Explanation of the Code:
- If-Else Statement:
  - The script checks if the user's age is 18 or above, and if so, outputs "You are eligible to vote." If the age is below 18, it outputs "You are not eligible to vote."
- Switch Statement:
  - A switch(true) statement is used to check different criteria. If the user's age is 21 or older, they are eligible to drink and drive.
  - If the user is at least 16 but less than 21, they are eligible to drive but not drink.
  - If the user is younger than 16, the script outputs that they are not old enough to drive.
  - The break statement ensures that once a matching condition is found, no further cases are checked.

Challenge: show the result at <div id="showResult" ></div>

Challenge Instructions:

Objective: Add a new feature to show the conditional result on the webpage document .
Modify the script to show the result at <div id="showResult"></div> in index.html after you provide input using prompt function..

Example Challenge Code:

// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Eligibility Checker</title>
  </head>
  <body>
    <h1>Check the Console for Eligibility Results</h1>
    <div id="showResult"></div>
    <script src="script.js"></script>
  </body>
</html>
```

// script.js
// Prompt the user to enter their age
      let age = prompt("Please enter your age:");
      age = parseInt(age);

      let result = ""; // Initialize a variable to store the result

      // 1. If-Else Statement: Check voting eligibility
      if (age >= 18) {
        result += "You are eligible to vote.<br>"; //Append to result
      } else {
        result += "You are not eligible to vote.<br>"; //Append to result
      }

      // 2. Switch Statement: Check other age-based criteria
      switch (true) {
        case age >= 21:
          result += "You are eligible to drink alcohol.<br>";
          // Fall through to check driving eligibility
        case age >= 16:
          result += "<p style='color:red;'> You are eligible to drive.</p><br>";
          break;
        case age < 16 && age >=0:  // Handle the case where age is less than 16 but non-negative.
          result += "You are not old enough to drive.<br>";
          break;
        default:
          result += "Invalid age entered.<br>";
      }
        //Finally, display result in the div
      document.getElementById("showResult").innerHTML = result;

Activity Steps:
1. Run the code in the browser, input different ages, and observe the results in the console.
2. Modify the script to handle additional criteria for different ages (e.g., working age, senior discounts).

Student Activity (20 mins):

Open the file in a browser:
- Open the HTML file in a browser and use Developer Tools (F12 or right-click and select Inspect > Console) to enter an age and observe the results.
- Input various ages to see how the if-else and switch statements handle different criteria.
Experiment with Different Ages:
- Input various ages such as:
  - 14: Check if the user can work part-time.
  - 16: Check if they can drive.
  - 18: Check voting eligibility.
  - 21: Check alcohol consumption eligibility.
  - 65: Check senior citizen benefits.

Follow-up Questions:

How does the if-else structure handle voting eligibility compared to the switch statement handling other criteria?
Why is it beneficial to use a switch statement when there are multiple conditions for a single variable like age?
What other types of criteria can you add to the switch statement based on age or other inputs?

Expected Outcome:

Students will understand how to use if-else and switch statements to evaluate conditions based on age. They will practice using these control structures to determine eligibility for voting, driving, drinking, and other activities based on user input.

Previous12.4 Break and Continue Statements Next12.6 Homework Assignment

Last updated 11 months ago