Gestion dynamique HTML partie 1

by Jonathan Martel

HTML

<template id="modeleCarte">
  <article class="carte">
    <h2>Titre</h2>
    <h3>Sous-titre</h3>
    <section class="action">
      <a href="#">Action 1</a>
      <a href="#">Action 2</a>
    </section>
  </article>
</template>
<main class="catalogue">

</main>

CSS

.carte {
  border: 1px solid #000;
}

.enter {
  background-color: #CCCCCC;
}

.action0 {
  background-color: #ff0000;
}

.action1 {
  background-color: #ff00FF;
}

JavaScript

var donnees = [];
for (var k = 0; k < 5; k++) {
  donnees.push({
    titre: "Allo le monde " + k,
    soustitre: "Sous-titre de allo le monde " + k,
    description: "Lorem ipsum...." + k
  });
}

(function() {
  "use strict";
  
  var modele = document.getElementById("modeleCarte");
        
  
  var catalogue = document.querySelector(".catalogue");
  donnees.forEach(function(article) {
  	var carte = modele.cloneNode(true);
    catalogue.appendChild(document.importNode(carte.content, true))
  });


  var lesCartes = document.querySelectorAll(".carte"); // Sélecteur de carte
  lesCartes.forEach(function(carte) { // Pour toutes les cartes trouvées
    carte.addEventListener("mouseenter", function(evt) { // Attache la fonction anonyme et recueille le paramètre de type MouseEvent
      evt.target.classList.add("enter"); // Manipulation des classes avec l'api ClassList
    });
    carte.addEventListener("mouseleave", function(evt) {
      evt.target.classList.remove("enter");
    });

    // Récupère les boutons d'une carte. Le querySelectorAll() cherche à partir du parent. Il retournera donc
    // seulement les 2 boutons de chaque carte.
    var btnActions = carte.querySelectorAll(".action > a");
    console.log(btnActions);
    btnActions.forEach(function(btn, index) {
      btn.addEventListener("click", function(evt) {
        evt.target.classList.toggle("action" + index);
      });
    });
  });
})();