Merge pull request #18 from rasoirnoir/hotfix1

fix accordeons

scripts/films.js

@@ -4,28 +4,30 @@ const films = document.getElementById("resultats");
 
 const API_URL = "https://swapi.dev/api/films/";         // déclare la localisation de la liste des films
 
-function remplissage(EPISODES){
+function remplissage(EPISODES) {
     console.log(EPISODES);
 
-        for(index in EPISODES.results){
+    for (index in EPISODES.results) {
-            films.innerHTML +=`
+        films.innerHTML += `
             <section class="resultat accordeon_item">
                 <h1 class="accordeon_item_header">${EPISODES.results[index].title}</h1>
                 <div class="accordeon_item_body">
+                    <div class="column1">
                         <p class= "episode">Episode :  ${EPISODES.results[index].episode_id}</p>
                         <p class= "directeur">Directeur : ${EPISODES.results[index].director}</p>
                         <p class= "producteur">Producteur : ${EPISODES.results[index].producer}</p>
                         <p class= "sortie">Date de Sortie : ${EPISODES.results[index].release_date}</p>
                     </div>
+                </div>
             </section>`
     }
     const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
-        accordeonItemHeader.forEach(accordeonItemHeader =>{
+    accordeonItemHeader.forEach(accordeonItemHeader => {
         accordeonItemHeader.addEventListener("click", event => {
             accordeonItemHeader.classList.toggle("active");
-})
         })
-    }
+    })
+}
 
 
 api_call(API_URL, remplissage);

scripts/personnages.js

@@ -1,17 +1,17 @@
-import { api_call,API_URL, createPagination } from "./util";
+import { api_call, API_URL, createPagination } from "./util";
 
 const PERSONNAGES = document.getElementById("resultats");
 
 
 class People {
-  constructor(birth_year, eye_colo, gender, hair_color,height,mass,skin_color) {
+    constructor(birth_year, eye_colo, gender, hair_color, height, mass, skin_color) {
         this.birth_year = birth_year;
         this.eye_colo = eye_colo;
         this.gender = gender;
         this.hair_color = hair_color;
         this.height = height;
         this.mass = mass;
-    this.skin_color=skin_color;
+        this.skin_color = skin_color;
     }
 }
 
@@ -32,7 +32,7 @@ console.log('personnage.js loaded');
 //                     ${error.message}`);
 // });
 
- function remplissage(json){
+function remplissage(json) {
     console.log(json.results[0]);
 
     // api_call(API_URL+ "/planets/1", (response) => {
@@ -54,15 +54,15 @@ console.log('personnage.js loaded');
 
     for (let i = 0; i < PERPAGE; i++) {
         const urlbirth_year = json.results[i].birth_year;
-      const urleye_colo=json.results[i].eye_colo;
+        const urleye_colo = json.results[i].eye_colo;
-      const urlgender=json.results[i].gender;
+        const urlgender = json.results[i].gender;
-      const urlhair_color=json.results[i].hair_color;
+        const urlhair_color = json.results[i].hair_color;
         const urlheight = json.results[i].height;
-      const urlmass=json.results[i].mass;
+        const urlmass = json.results[i].mass;
-      const urlskin_color= json.results[i].skin_color;
+        const urlskin_color = json.results[i].skin_color;
-      const urlname= json.results[i].name;
+        const urlname = json.results[i].name;
-      const urlhomeworld=json.results[i].homeworld;
+        const urlhomeworld = json.results[i].homeworld;
-      const urlfilms=json.results[i].films;
+        const urlfilms = json.results[i].films;
 
         // const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color);
         // console.log(gens);
@@ -86,10 +86,17 @@ console.log('personnage.js loaded');
                 </div>
                 </section>`;
 
-
+    }
     //Pagination
     createPagination(previousUrl, nextUrl, PERSONNAGES, remplissage);
+
+    const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
+    accordeonItemHeader.forEach(accordeonItemHeader => {
+        accordeonItemHeader.addEventListener("click", event => {
+            accordeonItemHeader.classList.toggle("active");
+        });
+    });
 }
 
 api_call(API_URL + "/people", remplissage);
-console.log('personnage.js loaded');
+        console.log('personnage.js loaded');

scripts/planets.js

@@ -42,11 +42,11 @@ function remplissage(results) {
     createPagination(previousUrl, nextUrl, planetes, remplissage);
 
     const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
-    for (item of accordeonItemHeader) {
+    accordeonItemHeader.forEach(accordeonItemHeader => {
-        item.addEventListener("click", (event) => {
+        accordeonItemHeader.addEventListener("click", event => {
-            item.classList.toggle("active");
+            accordeonItemHeader.classList.toggle("active");
+        });
     });
-    }
 }
 
 api_call(API_URL + "/planets", remplissage);