Paramwebinfo Academy | Website & Digital Marketing Training

Tutorials Details

JavaScript if, if...else, and else Explained with Real-Life Examples

December 18, 2024

What are Conditional Statements?

Conditional statements allow you to execute a block of code only if a specified condition is true. JavaScript provides the following basic conditionals:

if
if...else
else

Explanation with Syntax and Examples

1. if Statement

The if statement checks a condition. If the condition evaluates to true, the block of code inside if is executed.

Syntax:

if (condition) { // Code to run if the condition is true }

2. if...else Statement

When the condition is false, the code inside the else block runs.

Syntax:

if (condition) {
// Code to run if the condition is true
} else {
// Code to run if the condition is false
}

3. else Statement

It is the fallback condition when none of the above conditions are true.

Syntax:

if (condition1) {
// Code for condition1
} else if (condition2) {
// Code for condition2
} else {
// Code if neither condition1 nor condition2 is true
}

HTML, CSS, and JavaScript Program Example

Let's create a program where the user inputs their age and the program tells whether they are eligible to vote or not.

HTML:(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conditional Methods</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Voting Eligibility Checker</h1>
<label for="age">Enter Your Age:</label>
<input type="number" id="age" placeholder="Enter your age" />
<button id="check">Check Eligibility</button>
<p id="result"></p>
</div>
<script src="script.js"></script>
</body>
</html>

CSS (style.css):

body {
font-family: Arial, sans-serif;
background-color: #f3f4f6;
text-align: center;
padding: 20px;
}

.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
max-width: 400px;
margin: auto;
}

h1 {
color: #333;
}

label {
font-size: 1.2em;
margin-bottom: 10px;
display: block;
}

input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
background: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
}

button:hover {
background: #0056b3;
}

p {
font-size: 1.2em;
margin-top: 10px;
}
JavaScript (script.js):

document.getElementById('check').addEventListener('click', function() {
const age = document.getElementById('age').value;
const result = document.getElementById('result');

if (age === "") {
result.textContent = "Please enter your age.";
result.style.color = "red";
} else if (age >= 18) {
result.textContent = "You are eligible to vote. ????";
result.style.color = "green";
} else {
result.textContent = "You are not eligible to vote. ????";
result.style.color = "orange";
}
});

How This Program Works:

User enters their age in the input box.
On clicking the "Check Eligibility" button:
- If the input is empty, a warning is shown.
- If the age is 18 or above, the user is declared eligible to vote.
- Otherwise, the user is informed that they are not eligible.