Comment Construire un Générateur de Couleur Hexagonale en JavaScript

Si vous souhaitez créer votre propre générateur de couleurs à l'aide de JavaScript, n'hésitez pas à suivre notre tutoriel.

Dans cet extrait de code, nous allons créer un générateur de couleur hexadécimal, étape par étape. Premièrement, nous avons besoin d’un dossier contenant trois fichiers:

  • index.html - pour notre balisage
  • style.css - pour le style
  • app.js - pour la (les) fonction (s)

Nous devons rassembler ces trois fichiers en utilisant des liens. Ouvrez votre fichier index.html dans un éditeur de texte et ajoutez un titre, une fenêtre d'affichage et un lien entre tous les fichiers afin que le fichier index.html ressemble à quelque chose comme ceci:

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <title>
      Générateur de couleur hexagonale
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <div id="hex"></div>
  <script src ="app.js"></script>
</html>

Nous devons maintenant créer un lien vers notre fichier JavaScript qui contient la fonction de génération de la couleur aléatoire.

Nous savons que les couleurs sont définies au format RGB ou Hex, par exemple, # 000000 (noir) ou # C0C0C0 (gris). Pour générer le nombre, nous utilisons la fonction JavaScript Math.random, qui renvoie des nombres aléatoires compris entre 0 et 1. Voici à quoi cette fonction ressemble:

function getColor() {
  return "#" + Math.random();
}

document.write(getColor());

Nous devons maintenant convertir le nombre en une chaîne avec une valeur hexadécimale. Pour ce faire, nous utilisons la méthode toString (). Nous allons ajouter .toString(16) à la fin de la fonction Math.random. Voici à quoi cela ressemblera:

function getColor() {
  return "#" + Math.random().toString(16);
}

document.write(getColor());

La première étape est terminée, mais ce n’est pas tout. Nous devons supprimer les caractères (0) et (.) et limiter le résultat à 6 caractères. Dans ce cas, nous utiliserons la méthode slice() en ajoutant .slice(2,8) à la fin de la fonction Math.random. Pourquoi 2 et 8? Comme nous voulons obtenir six caractères, nous devrions découper le résultat en commençant par les deux premiers caractères et en terminant par le huitième. Voici le code:

function getColor() {
  return (
    "#" +
    Math.random()
      .toString(16)
      .slice(2, 8)
  );
}

document.write(getColor());

Enfin, la valeur hexadécimale doit être définie comme arrière-plan. Cela peut être fait en utilisant une autre fonction, qui définira getColor () sur une variable et définira le document.body.style.background égal à cette variable.

Voici à quoi ça ressemble:

function getColor() {
  return (
    "#" +
    Math.random()
      .toString(16)
      .slice(2, 8)
  );
}

function setBackground() {
  var bgColor = getColor();
  document.body.style.background = bgColor;
}
setBackground();

Après toutes ces étapes, nous pouvons ouvrir notre fichier HTML dans le navigateur et voir une couleur aléatoire chaque fois que nous actualisons la page. Afin d'empêcher l'actualisation constante, nous devrions générer une nouvelle couleur chaque fois que l'utilisateur clique sur la barre d'espace. Il suffit d’ajouter la fonction setBackground() à la fin et d'indiquer au navigateur quand l'exécuter.

Vous pensez probablement que la meilleure façon de le faire consiste à utiliser une instruction if qui exécutera la fonction setBackground() au cas où le code de la barre d'espacement (keyCode of 32) serait enfoncé.

Ainsi, document.body.keyup doit être égal à la fonction, qui doit inclure une instruction if qui indique que si le .keyCode==32, setBackground() doit être exécuté.

Voici un exemple du code:

// generator function
function getColor() {
  return (
    "#" +
    Math.random()
      .toString(16)
      .slice(2, 8)
  );
}
// background color style
function setBackground() {
  var bgColor = getColor();
  document.body.style.background = bgColor;
}
// function on click
document.body.onkeyup = function(e) {
  if (e.keyCode == 32) {
    setBackground();
  }
};
Il est maintenant temps de passer à notre fichier style.css. Tout ce que nous avons à faire, c’est d’ajouter une transition pour rendre la commutation entre les couleurs plus fluide: 
body {
  transition: all 0.5s ease;
}