Générateur de carte de voeux aléatoire

Introduction

Dans ce projet, vous allez apprendre à créer une carte de voeu qui affiche des messages de voeux aléatoires lorsqu'on clique sur le bouton "Écrire". Ce projet vous aidera à comprendre comment travailler avec les fonctions JavaScript, les écouteurs d'événements et la manipulation du DOM.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer l'environnement du projet
• Comment implémenter une fonction pour sélectionner aléatoirement un message de voeux à partir d'un tableau prédéfini
• Comment implémenter une fonction pour afficher le message de voeux sélectionné dans la carte de voeu
• Comment ajouter un écouteur d'événements au bouton "Écrire" pour déclencher l'affichage du message de voeux

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Utiliser des fonctions JavaScript pour générer du contenu aléatoire
• Manipuler le DOM pour mettre à jour le contenu d'un élément HTML
• Ajouter des écouteurs d'événements pour déclencher des actions spécifiques
• Travailler avec une structure de projet fournie et suivre des instructions étape par étape

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── index.css
├── index.html
└── index.js

Où :

• index.css est le fichier de style pour ce défi.
• index.js est le fichier JavaScript qui doit être complété pour ce défi.
• index.html est la page de la carte de voeux.

Cliquez sur le bouton Démarrer en direct dans le coin inférieur droit de l'IDE Web pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement et vous verrez la page.

Implémenter la fonction writeGreeting()

Dans cette étape, vous allez implémenter la fonction writeGreeting() pour sélectionner aléatoirement un message de voeux dans le tableau greetings fourni.

1. Ouvrez le fichier index.js.
2. Localisez la fonction writeGreeting() et remplacez le commentaire // TODO par le code suivant :

return greetings[Math.floor((Math.random() * 10) % greetings.length)];

Ce code génère un index aléatoire dans le tableau greetings et renvoie le message de voeux correspondant.

Implémenter la fonction show()

Dans cette étape, vous allez implémenter la fonction show() pour afficher le message de voeux dans l'élément greetingDisplay.

1. Ouvrez le fichier index.js.
2. Localisez la fonction show() et remplacez le commentaire // TODO par le code suivant :

greetingDisplay.innerHTML = writeGreeting();

Ce code appelle la fonction writeGreeting() pour obtenir un message de voeux aléatoire puis définit le innerHTML de l'élément greetingDisplay pour afficher le message de voeux.

3. Enregistrez le fichier index.js.
4. Rafraîchissez la vue "Web 8080" dans la machine virtuelle pour voir la carte de voeux en action. Cliquez sur le bouton "Écrire" pour afficher un message de voeux aléatoire.

Félicitations! Vous avez terminé le projet de carte de voeux pour les fêtes.

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.