Day-11:Building an Age Category Checker using JavaScript If-Else Statements.

Hi Developers!!

Intro:

In web development, JavaScript plays a very important role in making your webpage interactive. One of the most common ways to control the behavior of your code based on different conditions is by using if-else statements.

In this blog, we’ll create a simple Age Category Checker — where the user enters their age, and the web page tells them which category they belong to — such as Child, Teenager, Adult, Senior Citizen, or Healthy Person.

Let’s break this down step by step.

1.Why If-Else Statements?

JavaScript’s if-else statement allows the program to make decisions based on conditions.

For example:

if (condition) {
   // code runs if condition is true
} else {
   // code runs if condition is false
}

• It checks conditions from top to bottom and executes the first true condition.

2.HTML Structure:

Here’s the simple HTML code that takes user input:

<input type="number" id="age" placeholder="Enter your age"><br>
<button onclick="checkage()">Submit</button>
<div id="show"></div>

• The user enters their age in the number box.
• On clicking "Submit", the checkage() function runs.
• The result (category) displays inside the div with id "show".

3.CSS Styling:

We also added some basic CSS to make the design clean and attractive:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #74ebd5, #ACB6E5);
}
.box {
    background-color: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    text-align: center;
}

• This centers the box and gives a soft gradient background.
• Input and button have padding, rounded corners, and hover effect for better UX.

JavaScript If-Else Logic Explained:

This is where the magic happens:

function checkage() {
    let age = document.getElementById("age").value;
    let show = "";

    if (age >= 80) {
        show = "Healthy Person";
    } else if (age >= 60) {
        show = "Senior Citizen";
    } else if (age >= 20) {
        show = "Adult";
    } else if (age >= 12) {
        show = "Teenager";
    } else if (age >= 5) {
        show = "Child";
    } else {
        show = "Too Young";
    }

    let place = document.getElementById("show");
    place.innerHTML = `<p>${show}</p>`;
}

How this works:

1.Get Age: We read the value entered by the user using:

let age = document.getElementById("age").value;

2.Decision Making:

Using if-else if-else ladder:

1.If age is 80 or above → “Healthy Person”

2.If age is 60 to 79 → “Senior Citizen”

3.If age is 20 to 59 → “Adult”

4.If age is 12 to 19 → “Teenager”

5.If age is 5 to 11 → “Child”

6.If below 5 → “Too Young”

3.Output Display:

We update the inner HTML of the result box to show the result:

place.innerHTML = `<p>${show}</p>`;

Output Preview:

When you run this project in the browser:

• Enter any age in the box.
• Click Submit.
• Your category will be displayed immediately!

For example:

Input: 25 → Output: "Adult"

Project Learn:

This small project is a great example of how to:

1.Take user input in HTML
2.Process it using JavaScript if-else conditions
3.Dynamically update the webpage

By understanding this simple Age Category Checker, you’ve learned one of the most important concepts in JavaScript: Decision Making with if-else statements.

Source Code:

[(https://gitlab.com/java2013021/Frontend/-/blob/main/Ageselect.html?ref_type=heads)]

Stay Strong!! Keep Learning!! Happy Coding!!!