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 8

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:
- d3-selection^ref .
- d3.select("#un_id")^ref.
- d3.selectAll(".nom_classe")^ref
- selection.remove()^ref afin de supprimer un élément selection un élément parent.
- selection.append("div")^ref pour créer un div enfant
- d3.create('div')^ref.
- selection.node()^ref ou selection.nodes()(https://github.com/d3/d3-selection#selection_nodes) pour récuperer le(s) Element DOM de la sélection.
- 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 8

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

Open Source Your Knowledge, Become a Contributor

8/8 4. Pour résumer

Exercice 8

Introduction à JavaScript - WOA JS

Introduction à JavaScript - Module M2206 - MMI1

The State of CSS Specificity, Part 2

Leaping into Motion