Генератор случайных цветов на JavaScript - HEX и RGB с нуля | JS Практика

В этом видео вы создадите генератор случайных цветов на JavaScript с нуля. При клике на кнопку генерируются случайные значения RGB каналов через Math.random и Math.floor, конвертируются в HEX формат через toString(16) и padStart, и выводятся на страницу через getElementById. ⏱ ТАЙМКОДЫ 0:00 - Демонстрация готового проекта - генерация цвета, HEX формат и RGB каналы 1:40 - Разбор готовой разметки и кнопки с атрибутом onclick="generate" 2:50 - Пишем функцию generate() и создаём константы R, G, B через Math.floor и Math.random * 256 5:28 - Разбор шестнадцатиричной системы: цифры 0-9 и буквы A-F, как рассчитывается HEX 11:48 - Почему может выпасть один символ и зачем нужен padStart 12:27 - Создаём rHex, gHex, bHex через toString(16) и padStart(2, "0") 14:54 - Создаём константу hex - склеиваем "#" + rHex + gHex + bHex и применяем toUpperCase() 15:54 - Выводим цвет на блок preview через getElementById и style.backgroundColor 16:54 - Выводим HEX формат через getElementById("hex-display") и textContent 17:41 - Выводим значения R, G, B каналов через getElementById и textContent 18:29 - Вызываем generate() сразу при загрузке страницы 18:54 - Проверка результата - цвет генерируется и меняется по кнопке 19:26 - Проверяем соответствие RGB значений и HEX формата на примере числа 74 = 4A 🔗 ИСХОДНЫЙ КОД 🔗 Исходный код: 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 #генераторцветов #randomcolor #jsпрактика #jsдлябегиннеров #webdev #frontend #программирование