Maison >interface Web >js tutoriel >Créons un générateur de couleurs aléatoires !

Créons un générateur de couleurs aléatoires !

Barbara Streisandoriginal: 2025-01-14 09:54:42390parcourir

Let’s Create a Random-Color Generator!

Si vous êtes nouveau dans JavaScript, vous avez probablement beaucoup appris sur le fonctionnement des types de données, de la logique, des fonctions, etc. C'est bien ; pour utiliser un jour JS dans des projets plus complexes, vous devez commencer par les principes fondamentaux. Cependant, en fonction de votre capacité d'attention, vous pourriez bientôt commencer à ressentir le fort désir de mettre vos compétences en JS à profit sur un véritable site Web. Cela peut être un peu compliqué (mais pas aussi compliqué que les expressions régulières, amirite), mais l'un des plus simples avec lesquels vous pouvez commencer est, vous l'aurez deviné, un générateur de couleurs aléatoires. Dans cet article, je vais vous expliquer les étapes que j'ai utilisées pour en créer un moi-même.

1. Ajouter du HTML passe-partout

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA=Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random-Color Generator</title>

  <!--Link stylesheets-->
  <link rel="stylesheet" href="./styling.css">
  <link rel="stylesheet" href="./responsive.css">
</head>

Si vous utilisez VS Code, vous pouvez taper '!' dans le document HTML vide, puis appuyez sur "Entrée" pour ajouter cette partie (je ne suis pas sûr des autres éditeurs de texte) si vous ne le saviez pas déjà. Sous le passe-partout, j'ai ajouté des liens vers les documents CSS que j'ai utilisés pour ce projet. Je recommande de conserver votre CSS dans un fichier séparé, juste pour que votre fichier HTML ne devienne pas trop volumineux et compliqué. Étant donné que le code JavaScript que nous allons écrire n'est pas très long, je vais l'ajouter directement au fichier HTML à l'intérieur du