Créer un générateur de couleur aléatoire avec JavaScript

Vous souhaitez vous entraîner avec JavaScript ? Essayez de construire un générateur de couleur aléatoire ! Voyons dans cet article comment réussir ce projet.

1ère étape

Commençons avec le code HTML.

<div class="main">
  <div id="code">#000000</div>
  <button onclick="generateColor()">
    Générer
  </button>
</div>

Ici nous avons juste besoin d’un bouton qui appelle une fonction JavaScript lorsqu’il est cliqué.

2ème étape

Centrons notre élément au milieu de la page.

body {
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

Nous allons utiliser flexbox pour centrer la boîte qui nous permetra de générer une couleur.

3ème étape

Au tour de la boîte et de la classe code !

.main {
    width: 350px;
    height: 250px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#code {
    font-size: 3rem;
    margin-bottom: 20px;
}

4ème étape

Finissons notre design en stylisons le bouton.

.main button {
    padding: 10px 20px;
    font-size: 1.1rem;
    border: none;
    outline: none;
    cursor: pointer;
    background: #1687a7;
    color: white;
}

5ème étape

Il ne reste plus qu'à créer la fonction generateColor().

const generateColor = () => {
  
    let randomColor = (Math.floor(Math.random()*0xFFFFFF)).toString(16);
    document.body.style.backgroundColor = "#" + randomColor;
    let text = document.querySelector('#code');
    text.innerText = "#" + randomColor;
  
}

Pour générer un nombre hexadécimal aléatoire, il existe une formule toute faite. Il suffit de générer un nombre aléatoire (entre 0.0000... et 0.9999...) et de le multiplier par 0xFFFFFF qui est le plus gros nombre possible pour une couleur hexadécimale.

Nous avons ainsi généralement un nombre de 6 chiffres. Il ne nous reste plus qu’à arrondir ce nombre (floor()) et à le convertir en une chaîne de caractères en base 16 (donc en hexadécimale).

Il nous suffit enfin d’ajouter cette couleur.