Exercise: Conditionals – Advanced Web Development

Conditional statements that act based on whether or not a value is true, are an important part of any programming language. So (
IF you are interesting in learning more about conditionals
) {
let’s get started.
}

Create a new html file named conditional.html. Create a js folder and create a conditional.js file.

Connect the two with some starter code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Conditionals Practice</title>
</head>
<body>

    <h1>What is the sum of 14 + 10?</h1>

    <input type="number" id="userInput">
    <button onclick="compare()">Try It</button>

    <p><span id="response">Your feedback will appear here.</span></p>

    <script src="js/conditional.js"></script>
</body>
</html>

Now, let’s get the basic function set up in conditional.js.

function compare() {
    let answer = 24;
    let response = document.querySelector("#response");
    response.innerHTML = "correct";
}

Test in your browser. You should see “correct” appear in the span when you click the button. Change answer to something other than 24 and test again. Nothing changes yet! That’s next.

Create a conditional function.

Replace your current function with a conditional function.

function compare() {
    let answer = document.querySelector("#userInput");
    answer = answer.value;
    answer = Number(answer); // Convert from string to number

    let response = document.querySelector("#response");

    if (answer === 24) {
        response.innerHTML = "Correct!";
    } else {
        response.innerHTML = "Wrong answer!";
    }
}

Now try it: Enter 24 → “Correct!”, Enter any other number → “Wrong answer!”

Let’s offer smarter feedback based on how close the user is. Replace your existing conditional block with:

if (answer === 24) {
    response.innerHTML = "Correct!";
} else if (answer < 10) {
    response.innerHTML = answer + " is way too low.";
} else if (answer < 24) {
    response.innerHTML = answer + " is too low but close.";
} else if (answer > 40) {
    response.innerHTML = answer + " is way too high.";
} else {
    response.innerHTML = answer + " is too high but close.";
}

Try it out with different numbers and watch the feedback change!

Let’s switch it up.

You can replace all those if statements with a cleaner structure using a switch statement.

Try this out in your function:

function compare() {
    let answer = Number(document.querySelector("#userInput").value);
    let response = document.querySelector("#response");

    switch (true) {
        case (answer === 24):
            response.innerHTML = "Correct!";
            break;
        case (answer < 10):
            response.innerHTML = answer + " is way too low.";
            break;
        case (answer < 24):
            response.innerHTML = answer + " is too low but close.";
            break;
        case (answer > 40):
            response.innerHTML = answer + " is way too high.";
            break;
        default:
            response.innerHTML = answer + " is too high but close.";
    }

Convert the input field to a dropdown.

Comment out the current input field in your html.
```

```
Replace it with:
```
<select id="userInput"></select>
```
In your JavaScript, generate dropdown options. At the top of your conditional.js file, add this loop:
```
let dropdown = document.querySelector("#userInput");

for (let i = 0; i <= 100; i++) {
    dropdown.innerHTML += `<option value="${i}">${i}</option>`;
}
```
This dynamically creates 100 options (0–100) in your dropdown.
Let’s automatically run the compare function when a selection is made. Update your html to make the button unnecessary:
```
<select id="userInput" onchange="compare()"></select>
```