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.
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é.
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.
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;
}
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;
}
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.
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble votre projet.