Как создать конвертер дней недели на JavaScript - практика switch | JS практика
Topchiy Dev | Frontend с нуля
0:00 / 0:00
Как создать конвертер дней недели на JavaScript - практика switch | JS практика
285 просмотров · 7 дней назад
Topchiy Dev | Frontend с нуля
7,49 тыс. подписчиков
285 просмотров · 7 дней назад
В этом видео создаём конвертер дней недели на JavaScript через оператор switch. Вводите число от 1 до 7 - получаете название дня, тип Weekday или Weekend и подсветку нужной кнопки. Используем switch с семью case, default для чисел вне диапазона, classList для подсветки кнопок и Number для преобразования строки в число.
⏱ ТАЙМКОДЫ
0:00 - Демонстрация - вводим число, получаем день и подсветку кнопки
1:05 - Разбор разметки - атрибут oninput="convert", кнопки btn1-btn7
2:44 - Объявляем функцию convert()
3:00 - Константа num через Number, getElementById и .value
4:35 - Константы result и resultType через getElementById
5:35 - Убираем класс active со всех семи кнопок через classList.remove
7:02 - let day и let type - почему let а не const
7:55 - switch(num) - семь case для каждого дня недели
9:00 - Monday - Weekday, Tuesday - Weekday... Saturday и Sunday - Weekend
10:27 - default - знак вопроса если число вне диапазона 1-7
11:30 - if: если число в диапазоне - подсвечиваем нужную кнопку через classList.add
12:58 - Выводим day и type через textContent
13:27 - Финальная проверка - все дни работают корректно
🔗 ИСХОДНЫЙ КОД
/ 169215968
📚 ПЛЕЙЛИСТЫ И КУРСЫ
📚 Полный курс JavaScript с нуля:
👉 • JavaScript уроки для начинающих с нуля: По...
🚀 JS Практика - проекты с нуля:
👉 • JavaScript для начинающих: Практические за...
📚 Полный курс HTML с нуля:
👉 • HTML уроки для начинающих с нуля: Полный курс
📚 Полный курс CSS с нуля:
👉 • Полный курс CSS с нуля | Основы CSS для на...
🟦 Полный курс Flexbox CSS:
👉 / 1320002
🌐 Уроки по хостингу - запуск сайта:
👉 • Бесплатный хостинг и публикация сайтов
📦 Исходники кода (Patreon):
👉 / membership
💬 СОЦИАЛЬНЫЕ СЕТИ
💬 Telegram:
👉 https://t.me/TopchiyDev
🎓 Patreon:
👉 / topchiydev
#javascript #switch #jsпрактика #jsдлябегиннеров #webdev #frontend #программирование #конвертер