Мы сказали JavaScript покрасить полоску в красный цвет, если пароль слишком короткий. Если пароль средней длины, полоска должна стать жёлтой.

Что значит «средней длины»? Это значит, что пароль должен быть больше 5 символов И при этом меньше 10. Чтобы создать двойное условие, используем оператор логическое И:

passLength > 5 && passLength < 10

Но где нам указать это условие? Используем конструкцию else if. Она позволяет добавить в условную конструкцию альтернативную ветку c условием:

if (passLength <= 5) {
  // Инструкции выполнятся, если истинно первое условие
} else if (passLength > 5 && passLength < 10) {
  // Инструкции выполнятся, если истинно второе условие
}

После else if в круглых скобках указывают условие, а в фигурных — инструкции, которые должны выполниться, если это условие вернёт true.

Представим, что пользователь ввёл пароль длиной 6 символов. Сначала JavaScript проверит первое условие: длина пароля меньше или равна 5 символам? Нет. Значит, идём дальше. Следующее условие: длина пароля больше 5 символов, но меньше 10? Да. Значит, выполняем инструкции из второй ветки.

Веток else if в условной конструкции может быть сколько угодно. Но чем их больше, тем запутаннее получается код.

Добавим в нашу условную конструкцию ветку else if и скажем JavaScript покрасить полоску в жёлтый цвет, если пароль длиннее 5 символов, но короче 10.

В роли «жёлтого» цвета — золотой. Потому что дизайнер так видит.