JavaScript Conditions Examples: if, switch and ??

Time to combine what you learned. Three small, realistic pieces.

1. A discount calculator

script.js

function priceAfterDiscount(price, customerType, coupon) {
  let discount = 0;

  switch (customerType) {
    case "member":
      discount = 0.1;
      break;
    case "vip":
      discount = 0.2;
      break;
  }

  if (coupon === "SAVE5") {
    discount += 0.05;
  }

  return price * (1 - discount);
}

console.log(priceAfterDiscount(100, "member", ""));      // → 90
console.log(priceAfterDiscount(100, "vip", "SAVE5"));    // → 75
console.log(priceAfterDiscount(100, "guest", ""));       // → 100

2. Choosing a message

script.js

function statusMessage(count) {
  if (count === 0) return "No messages";
  if (count === 1) return "1 message";
  if (count > 99) return "99+ messages";
  return `${count} messages`;
}

console.log(statusMessage(0));   // → No messages
console.log(statusMessage(1));   // → 1 message
console.log(statusMessage(250)); // → 99+ messages
console.log(statusMessage(8));   // → 8 messages

3. Showing and hiding on the page

index.html

HTML

<label><input type="checkbox" id="agree"> I agree to the terms</label>
<button id="go" disabled>Continue</button>
<p id="note">Please accept the terms.</p>
<script>
  const agree = document.querySelector("#agree");
  const go = document.querySelector("#go");
  const note = document.querySelector("#note");

  agree.addEventListener("change", () => {
    go.disabled = !agree.checked;
    note.textContent = agree.checked ? "Ready to continue." : "Please accept the terms.";
  });
</script>

Exercise: leap years

A year is a leap year if it is divisible by 4, except years divisible by 100, unless they are also divisible by 400. Write isLeapYear(year).

Show a possible solution

script.js

function isLeapYear(year) {
  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}
console.log(isLeapYear(2024)); // → true
console.log(isLeapYear(1900)); // → false
console.log(isLeapYear(2000)); // → true