Пошаговое руководство по созданию генератора случайных цветов с помощью JavaScript.

Если вы новичок в JavaScript, вы, вероятно, многое узнали о том, как работают типы данных, логика, функции и т. д. Это хорошо; Чтобы когда-нибудь использовать JS в более сложных проектах, вам нужно начать с основ. Однако, в зависимости от вашего внимания, вы можете вскоре почувствовать сильное желание применить свои навыки JS на реальном веб-сайте. Это может быть немного сложно (но не так сложно, как регулярные выражения, amirite), но одним из самых простых способов, с которого вы можете начать, является, как вы уже догадались, генератор случайных цветов. В этой статье я проведу вас через шаги, которые я использовал, чтобы построить его самостоятельно.

1. Добавьте шаблонный HTML

Если вы используете VS Code, вы можете ввести ! в пустой HTML-документ, а затем нажать Enter, чтобы добавить эту часть (не уверен в других текстовых редакторах), если вы этого не сделали. не знаю, что уже. Под шаблоном я добавил ссылки на документы CSS, которые использовал для этого проекта. Я рекомендую хранить ваш CSS в отдельном файле, чтобы ваш HTML-файл не стал слишком большим и сложным. Поскольку JavaScript, который мы будем писать, не очень длинный, я добавлю его прямо в файл HTML внутри тега <script>, который вы увидите на шаге 3. Если вы хотите иметь отдельный файл JS и связать его в свой HTML-файл, вы можете сделать это:

2. Создайте «скелет» HTML

Теперь, когда мы добавили шаблон HTML и связали наши документы CSS в <head>, давайте добавим тело и создадим наш HTML. Как видите, функция getNewColor() будет выполняться всякий раз, когда загружается страница. Подробнее об этой функции в следующих шагах.

На картинке выше я добавляю <div>, который содержит пару заголовков, сообщая пользователю, где он находится и что делать. Затем я добавляю еще один <div>, который содержит тег <span>, который в конечном итоге будет заполнен шестнадцатеричным кодом и будет отображаться как текст на странице. Затем я вставляю кнопку, которую пользователь нажимает для создания нового HEX-кода. Это делается с помощью функции getNewColor(), которую я скоро объясню.

3. Добавьте JavaScript!

Теперь мы находимся в точке, где начинает происходить настоящее волшебство. Вы взволнованы? Я могу сказать. Вот как это сделать:

Для относительно простой программы, подобной этой, мы можем выполнить то, что нам нужно, с помощью только одной функции, вышеупомянутой функции getNewColor(). Для этого генератора давайте использовать коды HEX для определения цвета, но также возможно использование значений RGB.

Давайте сначала поместим все возможные HEX-символы (целые числа 0–9 и буквы A-F) в виде строки в переменную с именем symbols.

Затем давайте инициализируем переменную color с помощью хеш-метки в виде строки. Эта переменная будет изменена в цикле, описанном ниже.

Давайте теперь создадим цикл, который выполняется 6 раз, так как в шестнадцатеричном коде 6 значений. Для каждой итерации цикла одно случайное значение из строки symbols добавляется к переменной color, которая, если вы помните, начинается с # в строковой форме. В этот момент всякий раз, когда мы вызываем getNewColor(), мы получаем новый HEX-код. Теперь давайте применим этот код к нашей HTML-странице.

По моему опыту, лучше всего поместить <script>tag в конец <body>tag. Некоторые яростно возражают против этого, и они могут быть правы, но я не буду обсуждать это в этой статье. Пожалуйста, устройте войну с клавиатурой в разделе комментариев ниже, если вы чувствуете себя склонным, так как это хорошо для вовлечения.

4. Примените JS к файлу HTML

Круто, теперь у нас есть функция, которая дает нам случайный HEX-код. Однако это бесполезно, если мы не применим его к нашему HTML. В этом случае было бы неплохо изменить фон всей страницы, чтобы у пользователя был предварительный просмотр случайного цвета, и поместить шестнадцатеричный код в текстовом формате, чтобы он мог его скопировать. Сначала нам нужно определить эти поведения в нашей функции:

Все еще работая внутри функции getNewColor(), мы можем получить доступ к свойству стиля background с помощью первой строки кода, которую вы видите на фотографии выше. Мы могли бы также использовать backgroundColor, что, кстати, переводится в CSS как background-color. На этом шаге мы устанавливаем переменнуюcolor, которую мы случайно определили в цикле, в качестве цвета фона страницы.

Во второй строке кода мы получаем доступ к ранее определенному тегу <span> по его идентификатору «hex». Чтобы добавить переменную color в текстовую форму, мы можем использовать метод .textContent, который я использовал здесь, или метод .innerHTML, чтобы добавить color к тегу <span>. См. ссылку в конце этой статьи, чтобы узнать больше о разнице между ними. Таким образом, как мы разместили наш HTML-код выше, этот текст будет отображаться непосредственно над кнопкой, чтобы пользователь мог видеть точный отображаемый цвет и копировать его, если он хочет.

В целом наш JS выглядит так:

5. Сообщите программе, когда запускать функцию

Нет смысла создавать функцию, если мы никогда ее не запустим, поэтому давайте теперь сообщим нашей программе, когда должна вызываться наша getNewColor() функция. В этом случае давайте запускать getNewColor() всякий раз, когда загружается страница и когда нажимается кнопка «Получить новый цвет!». Вот как мы это делаем:

6. Добавьте стиль

Вы можете сделать эту часть по своему желанию или не делать вообще, но вот стиль, который я использовал в этом проекте, с style.css слева и responsive.css справа:

7. Давайте проверим это!

Если вы правильно выполнили описанные выше шаги, это должно происходить при открытии файла в браузере:

Спасибо, что дочитали до этого места! Я надеюсь, что вы нашли это полезным. Помните, иногда можно читать статьи и следовать руководствам, но вы должны делать это только для изучения концепций. Как только вы решите, что усвоили концепции, попробуйте создавать программы самостоятельно. Нет, вы, вероятно, не получите все правильно с первого раза, но столкнувшись с проблемой и выяснив, как решить ее самостоятельно, используя концепции, которые вы изучили, вы станете лучшим программистом.

Если вы нашли эту статью полезной, я был бы признателен за хороший комментарий или несколько аплодисментов, чтобы я мог знать, какой контент люди считают полезным, и чтобы я мог сосредоточиться на написании этого контента в будущем.

Как всегда, удачного кодирования!

Посмотреть этот проект в действии

Ссылка на репозиторий этого проекта на GitHub

Ссылка на статью о различиях между .innerHTML и .textContent

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.