La difficulté est subjective. Lisez bien l'énoncé et regardez bien le résultat attendus. Prenez connaissance des Div à utiliser (ID et Classes), celles-ci sont mentionnés pour chaque Question dans le fichier app.js. En dehors de l'utilisation du DOM, il n'est pas nécessaire de modifier le fichier HTML. En cas de difficulté, vous pouvez regarder la réponse proposé dans le fichier solution.js. Pas besoin non plus de créer un fichier CSS. Il y a plus d'une solution possible, si votre solution fonctionne... elle fonctionne! Et surtout, amusez-vous!
Lorsque l'utilisateur entre des charactéres dans le champ input, la répliquer en majuscule.
Ennoncé : On souhaite récupérer la valeur de l'input (id="input-uppercase") et répliquer sa valeur dans la balise < p > (id="input-uppercase-text"). La valeur doit être répliqué en temps réel.
INDICES
La valeur de l'input (= texte tapé par l'utilisateur) peut être récupéré en utilisant .value dans votre fichier JavaScript
document.getElementById("input-uppercase").value;Il est possible d'utiliser une propriété sur la balise input appelé oniput afin d'éxécuter une fonction JavaScript. Voir Documentation
<input oninput="maFonctionJavascript()" />Lorque l'utilisateur clique sur "Menu", afficher le sous-menu.
Enoncé : Par défault, le sous menu (id="submenu-challenge") est caché (class="hidden"). Supprimer ou remplacer cette classe par la classe flex (class="flex") lorsque l'utilisateur clique sur Menu (id="menu-challenge"). Attention de ne pas supprimer les autres classes présente dans le sous-menu, au risque de changer le design.
En bonus de cette question, changez la class de id="chevron-menu" : Ancienne class "fa-chevron-up", nouvelle class "fa-chevron-down"
INDICES
Une fois votre élément (sous-menu) enregistré dans une variable, vous pouvez utiliser .classlist.replace afin de remplacer une classe par une autre. Voir Documentation
// remplacer la classe "foo" par la classe "bar"
div.classList.replace("foo", "bar");Il existe d'ailleurs d'autres méthodes interessantes: .classList.remove('nomDeLaClasse') pour supprimer une classe, .classList.add("uneNouvelleClasse") pour ajouter une nouvelle classe à celles déjà existantes. Voir Documentation
Créer un bouton animé, type Switch.
Enoncé: Lorsque l'utilisateur clique sur le boutton "Switch" (id="btn-circle"), la couleur de fond du boutton change en vert (let green = "#68d391";) et le contenu (id="btn-circle-inside") change de place. Par chance, une classe existe déjà afin de déplacer le rond vers la droite! Il suffit juste de rajouter la class "justify-end" à notre btn-circle-inside.
INDICES
Voir Indice de la Question 2
Dans une liste de choix disponible, l'utilisateur peux séléctionner / déséléctionner plusieurs cases.
Enoncé: Attention, celui-ci est plus difficile! Pour des raisons obscurs, le webdesigner a fait le choix de ne pas utiliser un input type checkbox. L'utilisateur doit avoir la possibilité de séléctionner un ou plusieurs choix (_ class="choice"_) dans le conteneur (class="choices). Les éléments doivent changer de background color et les bordures doivent êtres supprimés!
Par chance, il existe déjà deux classes existantes à rajouter pour nous faciliter le travail! Pour le background rajouter la classe : "bg-purple-500" color et pour la bordure, supprimer la classe "border-2".
Il existe plusieurs façon de résoudre ce problème, dont 2 sont particuliérements intéressantes :
- Vous pouvez ajouter un addEventListner pour chaque element : id="choix1" id="choix2" id="choix3" ...
- Vous pouvez récupérer tous les elements (class="choice") dans une Array et utiliser une loop. Mais attention, cela nécessite l'utilisation de l'opérateur this
INDICES
N'oubliez pas
- la loop for each!
- Si vous souhaitez utiliser une Loop, n'oubliez pas de récupérer la longueur de votre Array
for (i = 0; i < votreArray.length; i++)L'utilisateur peux passer le site en Dark mode en appuyant sur le bouton.
Enoncé: L'utilisateur est sensible de la rétine. Aidons ses yeux à ne pas fondre sous le #FFFoleil! En appuyant sur le bouton (id="night-mode"), le site (body) doit passer en couleur foncé et le texte en blanc. Deux classes existes pour nous faciliter la tâche! bg-gray-900 & text-white. Il faut les rajouter à la balise body sans modifier le reste des classes déjà en place!
INDICES
Il est possible de séléctionner le Body avec le DOM en utilisant :
document.body;L'utilisateur peux lancer / mettre sur pause la musique en appuyant sur le bouton "play"
Enoncé: Et si on metais un peu de musique? C'est toujours plus sympa de coder en swingant! Mais dabord, un peu de documention. On introduis ici une nouvelle balise dans notre fichier HTML, la balise < audio> ! Il est tout à fait possible de créer un lecteur audio simple en HTML5, impressionnant, non?
Mais ici c'est du JS sacre bleu! Alors on va controler notre < audio > en passant par du JS. Lorsque l'utilisateur appuie sur le boutton (id="play-button"), l'élément audio (id="audio") doit se déclencher.
OPTIONNEL - La première étape, si vous le souhaitez, c'est de trouver une Musique libre de droit qui vous correspond un peu mieux. Récupérez le lien de la musique, ou alors téléchargez le fichier correspondant et ajoutez le à un nouveau dossier dans votre Challenge. Sinon, vous pouver utiliser la varible "sound" déjà écrite.
La deuxième étape, c'est de déclencher la musique lorsque l'utilisateur appuie sur le bouton Play. Pour ça, il est possible d'utiliser une méthode .play() ( Voir Documentation ). Mais avant de pouvoir jouer de la musique, n'oubliez pas de définir quel fichier audio votre lecteur doit jouer (la source de votre fichier), en utilisant la méthode .src("lienversvotremusique.mp3")
La troisième étape est de permettre à l'utilisateur de mettre sa musique sur pause! Tout comme l'étape précédente, il existe une méthode .pause() pour mettre notre musique en pause.