Exercices DOM

stardisblue

33.1K views

GitHub

Edit

Open Source Your Knowledge, Become a Contributor

Technology knowledge has to be shared and made accessible for free. Join the movement.

Create Content

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 div avec la classe paroles.
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 - IUT en 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:
- firstElementChild^ref .
- document.getElementById("un_id")^ref.
- document.getElementsByClassName("nom_classe")^ref ou document.querySelectorAll(".nom_classe")^ref
  Attention, ces fonctions retournent un tableau.
- parent.removeChild(enfant)^ref afin de supprimer un élément enfant d'un élément parent.
- parent.appendChild(enfant)^ref pour ajouter un element.
  Attention, appendChild n'accepte que des Node.
- document.createElement("div")^ref pour créer un Element^ref (dans ce cas, un div)
- document.createTextNode("un texte")^ref pour créer un noeud de type Text^ref contenant un texte.

Lors de l'éxecution, il peux vous afficher une erreur, re-executer à nouveau regle généralement le problème.

Exercice 4

Open Source Your Knowledge: become a Contributor and help others learn. Create New Content

Open Source Your Knowledge, Become a Contributor

4/8 4. Pour résumer

Exercice 4

Introduction à JavaScript - WOA JS

Introduction à JavaScript - Module M2206 - MMI1

The State of CSS Specificity, Part 2

Leaping into Motion