Back
Close

Exercices DOM

stardisblue
7,002 views

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

  1. Ajoutez le titre de facon à avoir <h1><small>auteur -</small> Titre de la chanson</h1>

  2. 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>
    
  3. Ajoutez un <footer> avec un copyright © Copyright 2020 - IUT en bas de la page.

  4. [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 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 Elementref (dans ce cas, un div)
    • document.createTextNode("un texte")ref pour créer un noeud de type Textref 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
Create your playground on Tech.io
This playground was created on Tech.io, our hands-on, knowledge-sharing platform for developers.
Go to tech.io
codingame x discord
Join the CodinGame community on Discord to chat about puzzle contributions, challenges, streams, blog articles - all that good stuff!
JOIN US ON DISCORD
Online Participants