Как сделать Dark Mode на JavaScript - переключатель темы через тернарный оператор | JS практика
В этом видео практикуем тернарный оператор на реальном примере - переключатель тёмной и светлой темы. При клике на кнопку меняется фон через classList.add и remove, иконка луна или солнце, название Dark Mode или Light Mode, описание и текст кнопки - всё через тернарный оператор. ⏱ ТАЙМКОДЫ 0:00 - Демонстрация проекта - переключение тёмной и светлой темы 0:53 - Разбор разметки - ID body, атрибут onclick="toggle", CSS переменные 4:00 - Открываем script.js - let isDark = true, почему let а не const 4:59 - Объявляем функцию toggle() 5:22 - isDark = !isDark - переворачиваем флаг на противоположный 6:14 - Константы body, icon, themeName, description, status, btn через getElementById 9:26 - Тернарный: isDark ? body.classList.remove("light") : body.classList.add("light") 10:35 - Проверка - фон переключается 10:50 - Тернарный для иконки - луна если true, солнце если false 12:27 - Тернарный для названия - Dark Mode или Light Mode 13:27 - Тернарный для описания - разный текст для каждой темы 14:36 - Тернарный для статуса и текста кнопки 15:55 - Финальная проверка - всё переключается корректно 🔗 ИСХОДНЫЙ КОД https://www.patreon.com/TopchiyDev 📚 ПЛЕЙЛИСТЫ И КУРСЫ 📚 Полный курс JavaScript с нуля: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9UyvBaTS0blaMBQYJb5GLaMXB 🚀 JS Практика - проекты с нуля: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9Uyv9Xo2A-WCT0D8c1Ret6bVu 📚 Полный курс HTML с нуля: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9UytoWbG_xrleyom6NfiRLBDE 📚 Полный курс CSS с нуля: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9UyuznEWwwMmvjpG9V2GxG1DQ 🟦 Полный курс Flexbox CSS: 👉 https://www.patreon.com/collection/1320002 🌐 Уроки по хостингу - запуск сайта: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9UyvrhTE4KC5sJK_NoeUX8ZMU 📦 Исходники кода (Patreon): 👉 https://www.patreon.com/c/topchiydev/membership 💬 СОЦИАЛЬНЫЕ СЕТИ 💬 Telegram: 👉 https://t.me/TopchiyDev 🎓 Patreon: 👉 https://www.patreon.com/TopchiyDev #javascript #themeswitcher #тернарный #jsпрактика #jsдлябегиннеров #webdev #frontend #программирование
Название:
Как сделать Dark Mode на JavaScript - переключатель темы через тернарный оператор | JS практика
Категория:
Разное