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.
