Gestion dynamique HTML partie 1

by Jonathan Martel

HTML

<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 catalogue = document.querySelector(".catalogue");
  donnees.forEach(function(article) {
    catalogue.innerHTML += '<article class="carte produit">' +
      '<h2>' + article.titre + '</h2>' +
      '<h3>' + article.soustitre + '</h3>' +
      '<section class="action">' +
      '<a href="#">Action 1</a>' +
      '<a href="#">Action 2</a>' +
      '</section>' +
      '</article>';
  });


  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);
      });
    });
  });
})();