Gestion dynamique HTML partie 1

by Jonathan Martel

HTML

<template id="modeleCarte">
  <article class="carte">
    <h2>{{titre}}</h2>
    <h3>{{soustitre}}</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";

  const modele = document.getElementById("modeleCarte");
  const catalogue = document.querySelector(".catalogue");
  donnees.forEach((article) => {
    const carte = modele.cloneNode(true);
    for (let cle in article){
      carte.innerHTML = carte.innerHTML.replace("\{\{" + cle + "\}\}", article[cle]);
    }
    catalogue.appendChild(document.importNode(carte.content, true))
  });

  const lesCartes = document.querySelectorAll(".carte"); 
  lesCartes.forEach((carte) => {
    carte.addEventListener("mouseenter", (evt) => { 
      evt.target.classList.add("enter"); 
    });
    carte.addEventListener("mouseleave", (evt) => {
      evt.target.classList.remove("enter");
    });

    const btnActions = carte.querySelectorAll(".action > a");
    btnActions.forEach((btn, index) => {
      btn.addEventListener("click", (evt) => {
        evt.target.classList.toggle("action" + index);
      });
    });
  });
})();