Зачем нужен JavaScript и что он делает на сайте
HTML задаёт структуру, CSS оформляет, а JavaScript меняет поведение страницы: реагирует на действия, обновляет данные и связывает интерфейс с сервером. Сегодня язык работает не только в браузере.

Роль JavaScript в браузере
MDN называет JavaScript языком сценариев, который позволяет реализовать сложные возможности веб-страниц. Код работает с Document Object Model, событиями, сетью, хранилищем и другими браузерными API. Он может показать подсказку, проверить форму, загрузить список товаров или обновить корзину без перезагрузки всей страницы.
Часть интерфейса должна оставаться доступной и без лишнего кода: ссылка обязана быть ссылкой, форма - отправляться предсказуемо, текст - появляться в DOM. JavaScript усиливает страницу, но не оправдывает экран, который пять секунд показывает пустоту ради красивой анимации.
Если нужна системная практика, сравните программы по python.

JavaScript также лежит в основе множества сборщиков, тестовых систем, десктопных оболочек и мобильных решений.
Добавьте сохранение выбранного в localStorage, обработайте неверные данные и сделайте управление с клавиатуры.
Не тяните библиотеку ради смены одного класса, если задача решается несколькими ясными строками.
JavaScript за пределами страницы
Серверные среды позволяют использовать язык для API, фоновых задач и инструментов. JavaScript также лежит в основе множества сборщиков, тестовых систем, десктопных оболочек и мобильных решений. Экосистема огромна, поэтому новичок легко начинает учить названия библиотек вместо языка.
Начните с типов, функций, объектов, массивов, областей видимости, модулей, промисов и async/await. Затем изучите DOM и сеть. Фреймворк полезен, когда вы понимаете проблему, которую он решает; раньше он становится дорогой декорацией.

Что написать первым
Добавьте сохранение выбранного в localStorage, обработайте неверные данные и сделайте управление с клавиатуры. Проект небольшой, но показывает события, состояние, функции и DOM.
Не копируйте готовое приложение целиком. Сначала нарисуйте поток данных и напишите одну функцию, результат которой можно проверить.
- структура HTML остаётся семантичной;
- обработчики не дублируются по всему файлу;
- ошибка сети видна пользователю;
- клавиатурная навигация работает;
- в README описаны запуск и принятые решения.

Когда JavaScript не нужен
Для статичного текста, обычной ссылки или базового раскрытия иногда достаточно HTML и CSS. Чем меньше код, тем меньше ошибок, загрузки и поддержки. Не тяните библиотеку ради смены одного класса, если задача решается несколькими ясными строками.
Но сложное состояние, обмен данными и интерактивные сценарии требуют программной логики. Решение оценивают по доступности, производительности и поддерживаемости, а не по количеству модных зависимостей.

Вывод KGAM. Сначала зафиксируйте нужный результат и ограничение, затем соберите минимальный черновик и проверьте его на реальной задаче. Такой порядок быстро показывает, где инструмент действительно помогает, а где только создаёт видимость бурной работы.