JavaScript Conditionals (if/else) — JavaScript Tutorial

Making Decisions in Code

Conditional statements allow your code to make decisions and execute different code based on conditions.

The if/else statement is the most common way to control program flow.

Example

// Basic if Statement
let age = 18;
if (age >= 18) {
  console.log('You are an adult');
}

// if-else Statement
if (age >= 18) {
  console.log('You can vote');
} else {
  console.log('You cannot vote yet');
}

// if-else if-else
let score = 85;
if (score >= 90) {
  console.log('Grade: A');
} else if (score >= 80) {
  console.log('Grade: B');
} else if (score >= 70) {
  console.log('Grade: C');
} else {
  console.log('Grade: F');
}

// Ternary Operator (shorthand)
let message = age >= 18 ? 'Adult' : 'Minor';

// Multiple Conditions
let isWeekend = true;
let isHoliday = false;

if (isWeekend || isHoliday) {
  console.log('No work today!');
}

if (age >= 18 && hasLicense) {
  console.log('Can drive');
}

if - Execute code if condition is true
else - Execute code if condition is false
else if - Check multiple conditions
Ternary operator - Shorthand if/else
&& - AND operator (both must be true)
|| - OR operator (one must be true)
! - NOT operator (negates condition)

Try Conditionals

HTML

<div class="conditional-demo">
  <h3>Age Checker</h3>
  <input type="number" id="ageInput" placeholder="Enter your age">
  <button onclick="checkAge()">Check</button>
  <div id="ageResult"></div>
  
  <hr style="margin: 20px 0;">
  
  <h3>Grade Calculator</h3>
  <input type="number" id="scoreInput" placeholder="Enter score (0-100)" min="0" max="100">
  <button onclick="calculateGrade()">Calculate Grade</button>
  <div id="gradeResult"></div>
</div>

CSS

.conditional-demo { padding: 20px; background: #f0f0f0; border-radius: 8px; }
input { padding: 10px; margin: 5px; border: 1px solid #ddd; border-radius: 4px; width: 250px; }
button { padding: 10px 20px; background: #d1039e; color: white; border: none; border-radius: 5px; cursor: pointer; margin: 5px; }
#ageResult, #gradeResult { margin-top: 15px; padding: 15px; background: white; border-radius: 5px; font-weight: bold; min-height: 20px; }

JavaScript

function checkAge() {
  const age = parseInt(document.getElementById('ageInput').value);
  const result = document.getElementById('ageResult');
  
  if (isNaN(age)) {
    result.innerHTML = '⚠️ Please enter a valid age';
    result.style.color = '#ff6600';
  } else if (age < 0) {
    result.innerHTML = '❌ Age cannot be negative';
    result.style.color = '#ff0000';
  } else if (age < 13) {
    result.innerHTML = '👶 You are a child';
    result.style.color = '#3498db';
  } else if (age < 18) {
    result.innerHTML = '🎮 You are a teenager';
    result.style.color = '#9b59b6';
  } else if (age < 65) {
    result.innerHTML = '👔 You are an adult';
    result.style.color = '#2ecc71';
  } else {
    result.innerHTML = '👴 You are a senior';
    result.style.color = '#e74c3c';
  }
}

function calculateGrade() {
  const score = parseInt(document.getElementById('scoreInput').value);
  const result = document.getElementById('gradeResult');
  
  if (isNaN(score) || score < 0 || score > 100) {
    result.innerHTML = '⚠️ Please enter a score between 0 and 100';
    result.style.color = '#ff6600';
  } else if (score >= 90) {
    result.innerHTML = `🌟 Grade: A (${score}%) - Excellent!`;
    result.style.color = '#2ecc71';
  } else if (score >= 80) {
    result.innerHTML = `⭐ Grade: B (${score}%) - Good job!`;
    result.style.color = '#3498db';
  } else if (score >= 70) {
    result.innerHTML = `✓ Grade: C (${score}%) - Fair`;
    result.style.color = '#f39c12';
  } else if (score >= 60) {
    result.innerHTML = `⚠️ Grade: D (${score}%) - Needs improvement`;
    result.style.color = '#e67e22';
  } else {
    result.innerHTML = `❌ Grade: F (${score}%) - Failed`;
    result.style.color = '#e74c3c';
  }
}

Notes

Use conditionals to make your programs interactive and responsive to different inputs!