В духе Ощутить радость от создания крошечных программ и создания глупой хрени вот супер-крошечная вещь, которую вы можете сделать менее чем за 15 минут. Это просто страница, которая каждую секунду меняет цвет фона на случайный цвет.

Вот демо-версия того, что мы строим. https://yarocruz.github.io/colours/

Настройка

Откройте терминал или командную строку и создайте два файла:

touch index.html app.js

Откройте эти три файла в своем любимом тексте или, если у вас есть настройка Visual Studio Code, для открытия из терминала:

code .

В файл index.html скопируйте следующий код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colours</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

Это практически пустая страница с тегом ‹script><, который ссылается на наш файл app.js.

В файл app.js скопируйте следующий код:

// grab the body element
const body = document.querySelector("body");


setInterval(() => {
    // generate 3 random numbers between 0 255
    const red = Math.floor(Math.random() * 255)
    const green = Math.floor(Math.random() * 255)
    const blue = Math.floor(Math.random() * 255)
  
    // set the inline style of the bacground-color of the body using
    // template literals to set the 3 colors to the rgb value
    body.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`
}, 1000) // repeat interval every second

Подводя итог тому, что происходит в этом очень коротком фрагменте, мы получаем элемент body с помощью API document.querySelector. Затем с помощью функции setInterval мы устанавливаем интервал, который будет происходить на странице каждую секунду. Мы сгенерируем три случайных числа в диапазоне от 0 до 255. Мы используем метод Math.random() с методом Math.floor() для округления в меньшую сторону. ' десятичные дроби. (Чтобы узнать больше о Math.random(), прочтите мою статью.).

Эти три числа представляют значения красного, зеленого и синего, которые мы затем передаем в значение, подобное функции rgb().

Это будет менять цвет фона элемента body, по сути, всей страницы, каждую секунду.

После сохранения просмотрите файл и посмотрите красивые цвета.

Посмотрите, сможете ли вы сделать другие мелочи, такие как возможность остановки интервала, возможность копирования значений цвета и т. д. Хитрость в том, чтобы сделать его маленьким и глупым.