Генератор случайного кода цвета. JavaScript генератор рандомного цвета

В новой записи мы будем практиковаться в написании кода на JavaScript. Сегодня я вам покажу как сделать генератор случайного цвета на javascript. Мы с вами напишем функцию которая будет создавать строку кода для цвета. Полученную строку мы передадим в качестве значения для цвета заднего фона указанного блока.

HTML

Элемент с классом code_color выводит код цвета который вы генерируете. Кнопка меняет цвет после каждого нажатия, для этого я прописал атрибут onclick который реагирует на событие нажатия мыши на элемент. В качестве параметра я передаю элемент у которого мы будем менять задний фон.

<div class="code_color">#ffffff</div>
<button onclick="randColor('.example')">Нажми</button>

CSS

Стили указанные ниже не как не влияют на создание данного эффекта. Стили добавлять не обязательно

.example {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
button {
   background: #1e1e1e;
   border: none;
   color: #fafafa;
   font-family: Roboto sans-serif;
   width: 150px;
   font-size: 16px;
   text-align: center;
   padding: 5px 0;
   display: block;
}
.code_color {
   text-transform: uppercase;
   font-size: 35px;
   font-family: Roboto;
   color: #1e1e1e;
   font-weight: bold;
}

JavaScript

Прописываем функцию которая в качестве параметра получает элемент у которого будет изменяться задний фон. После мы создаем основные переменные. Описание всех переменных представлено в коде.

function randColor(elem) {
/*СОЗДАЕМ ПЕРЕМЕННЫЕ
elem - элемент которому будем менять задний фон
code_color - получаем элемент в который будет выводить код цвета
r,g,b - отвечают за кодировку и вместе выводят цвет
color - в нее записываем полную строку значения цвета
*/
            var element = document.querySelector(elem),
                code_color = document.querySelector('.code_color'),
                r = Math.floor(Math.random() * (256)),
                g = Math.floor(Math.random() * (256)),
                b = Math.floor(Math.random() * (256)),
                color = '#' + r.toString(16) + g.toString(16) + b.toString(16);

            element.style.background = color;
            code_color.innerText = color;
        }