Vanilla JS : créer des éléments aux couleurs aléatoires

On a souvent besoin de distinguer des éléments rapidement et c’est très simple de le faire visuellement, avec des couleurs, pour bien différencier les blocs.

Voici une solution simple et élégante pour créer des éléments aux couleurs aléatoires, en utilisant du javascript natif, que l’on appelle Vanilla JS.

Cela devrait vous permettre d’obtenir ceci – des blocs dont la couleur est générée aléatoirement et qui change à chaque rafraichissement de la page.

J’inclus ici un bouton qui permet de rafraîchir aléatoirement les couleurs de notre bloc:

• Color 1
• Color 2
• Color 3
• Color 4
• Color 5
• Color 6

Random Color

Conception du script

HTML

Pour la partie HTML, on part sur quelque chose de très simple: une liste à puces tout à fait standard mais vous pouvez bien sûr choisir d’utiliser d’autres types d’éléments:

<ul id="random-colors">
<li>Color 1</li>
<li>Color 2</li>
<li>Color 3</li>
<li>Color 4</li>
<li>Color 5</li>
<li>Color 6</li>
</ul>Code language: HTML, XML (xml)

CSS

On affiche une grille CSS de 3 colonnes pour les éléments de notre liste:

* {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}
ul#random-colors {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
ul#random-colors li {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed deeppink;
  flex-direction: column;
  height: 100px;
  padding: 0;
  margin: 0;
  list-style-type: none;
}Code language: CSS (css)

Vanilla JS

Et voici le coeur du script, la fonction qui choisit un nombre aléatoire pour en dériver une couleur:

const elements = document.querySelectorAll("ul#random-colors li");
[...elements].forEach((element) => {
  element.style.backgroundColor = getRandomColor();
});

function getRandomColor() {
  var color = `#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0).slice(-6)}`
  return color;
}Code language: JavaScript (javascript)

Fonctionnement du script

On commence par stocker dans la constante elements tous les éléments de notre liste (qui possède l’identifiant random-colors ).

Ensuite, nous passons la liste de chaque élément en revue avec une boucle forEach et on assigne à chacun une couleur de fond grâce à notre fonction getRandomColor().

La fonction getRandomColor() utilise les fonctions de chiffrement de JavaScript pour obtenir des valeurs avec davantage d’entropie que Math.random().

La méthodeCrypto.getRandomValues() nous donne de solides valeurs aléatoires (cryptograpiquement parlant).

Le tableau Uint32Array nous donne un entier de 32 bits. Nous le transformons avec toString(16) pour obtenir une valeur hexadécimale.

Ensuite, padStart(8, 0) nous permet d’ajouter autant de 0 que nécessaire pour obtenir un entier de 8 caractères et slice(-6) nous permet de garder uniquement les 6 derniers caractères qui formeront notre code couleur.

Au final, nous obtenons une couleur unique pour chaque élément de notre liste.