Exercice 4
Grâce aux exercices précédents, vous avez pu voir
- La manipulation du
DOM(selection, edition, suppression). - La manipulation d'attribut/styles.
- La gestion des interactions (evenements). Cet exercice résume l'ensemble de ces techniques pour consolider votre maîtrise.
Pour cet exercice, la Créatrice n'as pas pu être travailler à cause du confinement, les fichiers étant sur son ordinateur de travail. Elle vous à donc envoyé une chanson en format json, un fichier index.html "vide" (avec les scripts et styles importés), et un fichier style.css
Ajoutez le titre de facon à avoir
<h1><small>auteur -</small> Titre de la chanson</h1>Créer une
divavec la classeparoles.
Ajoutez-y les couplets, englobés dans des paragraphes<p>.
Chaque ligne doit être séparée par un<br/>qui permet de passer à la ligne suivante. Le résultat doit ressembler à quelquechose comme:<div class="paroles"> <p> What is love?<br /> Baby, don't hurt me<br /> Don't hurt, me no more<br /> Baby, don't hurt me<br /> Don't hurt, me no more<br /> What is love? Yeah </p> </div>Ajoutez un
<footer>avec un copyright© Copyright 2020 - IUTen bas de la page.[Optionnel] Vous pouvez ajouter les interacteurs de l'exercice précédent.
Pensez par contre que vous ne pouvez sélectionner les éléments qu'une fois qu'ils ont été ajoutés à la page.
Conseils
- Le but est de tout faire en js.
- Observez la structure de la donnée qui vous est fournie.
- N'hésitez pas a créer des fonctions et a structurer votre code pour simplifier la lecture de certaines opérations. Par exemple, une fonction qui permet de créer un couplet.
- References:
firstElementChildref .document.getElementById("un_id")ref.document.getElementsByClassName("nom_classe")ref oudocument.querySelectorAll(".nom_classe")ref
Attention, ces fonctions retournent un tableau.parent.removeChild(enfant)ref afin de supprimer un élémentenfantd'un élémentparent.parent.appendChild(enfant)ref pour ajouter un element.
Attention, appendChild n'accepte que desNode.document.createElement("div")ref pour créer unElementref (dans ce cas, undiv)document.createTextNode("un texte")ref pour créer un noeud de typeTextref contenantun texte.
Lors de l'éxecution, il peux vous afficher une erreur, re-executer à nouveau regle généralement le problème.
