characters.html

@@ -23,19 +23,8 @@
         </nav>
 
     </section>
-
-    <section id="recherche">
-        <form action="" id="formRecherche" onSubmit="event.preventDefault(); console.log('click')">
-            <label for="textRecherche">Recherche : </label>
-            <input type="text" name="textRecherche" id="textRecherche">
-            <input type="submit" value="ok">
-        </form>
-    </section>
-
-    <section id="resultats" class="accordeon"></section>
-
-
     <div class="image-charactere"></div>
+    <section id="resultats" class="accordeon"></section>
 
 
 </body>

films.html

@@ -21,18 +21,68 @@
       </ul>
     </nav>
   </section>
-
+  <div class='accordeon'>
-  <section id="recherche">
+    <div class='accordeon_item'>
-    <form action="" id="formRecherche" onSubmit="event.preventDefault(); console.log('click')">
+      <div id="1" class='accordeon_item_header'>
-        <label for="textRecherche">Recherche : </label>
+        <h2 class="titres"></h2>
-        <input type="text" name="textRecherche" id="textRecherche">
+        <p>(Cliquez ici pour étendre)</p>
-        <input type="submit" value="ok">
+      </div>
-    </form>
+      <div class="accordeon_item_body">
-  </section>
+        <div class="accordeon_item_body_content">
-
+        </div>
-  <section id="resultats" class="accordeon">
+      </div>
-
+    </div>
-  </section>
+    <div class='accordeon_item'>
+      <div id="2" class='accordeon_item_header'>
+        <h2 class="titres"></h2>
+        <p>(Cliquez ici pour étendre)</p>
+      </div>
+      <div class="accordeon_item_body">
+        <div class="accordeon_item_body_content">
+        </div>
+      </div>
+    </div>
+    <div class='accordeon_item'>
+      <div id="3" class='accordeon_item_header'>
+        <h4>Return of the Jedi</h4>
+        <p>(Cliquez ici pour étendre)</p>
+      </div>
+      <div class="accordeon_item_body">
+        <div class="accordeon_item_body_content">
+        </div>
+      </div>
+    </div>
+    <div class='accordeon_item'>
+      <div id="4" class='accordeon_item_header'>
+        <h4>The Phantom Menace</h4>
+        <p>(Cliquez ici pour étendre)</p>
+      </div>
+      <div class="accordeon_item_body">
+        <div class="accordeon_item_body_content">
+        </div>
+      </div>
+    </div>
+    <div id="5" class='accordeon_item'>
+      <div class='accordeon_item_header'>
+        <h4>Attack of the Clones</h4>
+        <p>(Cliquez ici pour étendre)</p>
+      </div>
+      <div class="accordeon_item_body">
+        <div class="accordeon_item_body_content">
+        </div>
+      </div>
+    </div>
+    <div class='accordeon_item'>
+      <div id="6" class='accordeon_item_header'>
+        <h4>Revenge of the Sith</h4>
+        <p>(Cliquez ici pour étendre)</p>
+      </div>
+      <div class="accordeon_item_body">
+        <div class="accordeon_item_body_content">
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="image-films"></div>
 </body>
 

index.html

@@ -18,9 +18,6 @@
             </ul>
         </nav>
     </section>
-    <h1 id = "bienvenue">bienvenue</h1>
-    <p id = "presentation">Bienvenue sur la Star Wars database, 
-                        utilisez le menu pour vous déplacer</p>
     
 </body>
 </html>

planets.html

@@ -22,14 +22,6 @@
         </nav>
     </section>
 
-    <section id="recherche">
-        <form action="" id="formRecherche" onSubmit="event.preventDefault(); console.log('click')">
-            <label for="textRecherche">Recherche : </label>
-            <input type="text" name="textRecherche" id="textRecherche">
-            <input type="submit" value="ok">
-        </form>
-    </section>
-
     <section id="resultats" class="accordeon">
 
     </section>

scripts/films.js

@@ -1,33 +1,68 @@
-import { api_call } from './util';
+const { div } = require("prelude-ls");
 
-const films = document.getElementById("resultats");
+const FILMS = document.getElementsByClassName('accordeon');
+const VAISSEAUX = document.getElementById('vaisseaux-films');
+const ESPECES = document.getElementById('especes-films');
+const TITRE = document.getElementsByClassName('titres');
+console.log(FILMS);
 
-const API_URL = "https://swapi.dev/api/films/";         // déclare la localisation de la liste des films
+const API_URL = "https://swapi.dev/api/films/";  
-
+fetch(API_URL + target.id)  
-function remplissage(EPISODES) {
+.then((response) => {                                   // retourne une reponse
+    console.log(response);
+    return response.json();                             // sous format json
+})
+.then(afficherFilms => {                                // on affiche ensuite les films  
+        const EPISODES = afficherFilms;      // on déclare qu'un épisode est toujours la fonction avec sa boucle
         console.log(EPISODES);                             
     
-    for (index in EPISODES.results) {
+        TITRE.innerHTML +=`                                 
-        films.innerHTML += `
+        <p class= "titre">${EPISODES.title}</p>
-            <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.addEventListener("click", event => {
-            accordeonItemHeader.classList.toggle("active");
-        })
-    })
 }
+,)
 
+const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
+accordeonItemHeader.forEach(accordeonItemHeader =>{
+    accordeonItemHeader.addEventListener("click", event => {
 
-api_call(API_URL, remplissage);
+        console.log(event.target.id);
+        console.log(event.target.nextSibling)
+        console.log(event.target.nextSibling.nextElementSibling)
+        console.log(event.target.nextSibling.nextElementSibling.children)
+        const DEPLIE = event.target.nextSibling.nextElementSibling.children[0];
+
+        accordeonItemHeader.classList.toggle("active");
+
+const API_URL = "https://swapi.dev/api/films/";         // déclare la localisation de la liste des films
+fetch(API_URL + event.target.id)                                          // recupère la liste des films
+.then((response) => {                                   // retourne une reponse
+    console.log(response);
+    return response.json();                             // sous format json
+})
+.then(afficherFilms => {                                // on affiche ensuite les films  
+        const EPISODES = afficherFilms;      // on déclare qu'un épisode est toujours la fonction avec sa boucle
+        console.log(EPISODES);                             
+    
+        DEPLIE.innerHTML +=`                                 
+        <p class= "titre">${EPISODES.title}</p>
+        <p class= "episode">Episode :  ${EPISODES.episode_id}</p>
+        <p class= "directeur">Directeur : ${EPISODES.director}</p>
+        <p class= "producteur">Producteur : ${EPISODES.producer}</p>
+        <p class= "sortie">Date de Sortie : ${EPISODES.release_date}</p>
+    `
+    }
+    /*for(let index = 0; index <5; index++){ 
+        FILMS.innerHTML +=` 
+        <p class ="especes"> Espèces : ${EPISODES.species[index]}</p>
+        ` 
+    }
+        for(let index = 0; index<8; index++){
+        FILMS.innerHTML +=`   
+        <p class= "vaisseaux"> Vaisseaux : ${EPISODES.starships[index]}</p> 
+        ` 
+        }*/
+
+,)
+})
+})

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 @@ function remplissage(json) {
      
     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);
@@ -73,30 +73,26 @@ function remplissage(json) {
       `<section class="resultat accordeon_item">
         <h1 class="accordeon_item_header">${urlname}</h1>
         <div class="accordeon_item_body">
-                    <div class="column1">
+            <div class="1">
             <div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div>
             <div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div>
             <div id=genre>Genre : ${urlgender}</div>
             <div id=couleurCheveux> Couleur des Cheveux : ${urlhair_color} </div>
+            <div id=taille> Taille : ${urlheight}</div>
             <div id= poids> Poids du personnage : ${urlmass}  kg</div>
             <div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div>
-                    </div>
+            <div class="2"> Planète de Naissance : ${urlhomeworld}</div>
-                    <div class="column2"> Planète de Naissance : ${urlhomeworld}</div>
+            <div class="3"> Film où je suis présent : ${urlfilms}</div>
-                    <div class="column3"> Film où je suis présent : ${urlfilms}</div>
         </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

@@ -20,6 +20,15 @@ function remplissage(results) {
         const population = resultPlanet.population;
 
         const tabResidents = resultPlanet.residents;
+        //Problème de requêtes asyncrones
+        // let tabResidents = [];
+        // for(index in resultPlanet.residents){
+        //     api_call(resultPlanet.residents[index], (jsonresp)=>{
+        //         console.log(jsonresp.name);
+        //     });
+        // }
+        // console.log(`${nom} - résidents : ${resultPlanet.residents}`);
+        // console.log(`nom des résidents : ${tabResidents}`);
         const tabFilms = resultPlanet.films;
 
 
@@ -27,26 +36,26 @@ function remplissage(results) {
             `<section class="resultat accordeon_item">
             <h1 class="accordeon_item_header">${nom}</h1>
             <div class="accordeon_item_body">
-                <div class="column1">
+                <div class="1">
                     <p>${terrain}</p>
                     <p>${climate}</p>
                     <p>${diametre}Km</p>
                 </div>
-                <div class="column2">${tabResidents}</div>
+                <div class="2">${tabResidents}</div>
-                <div class="column3">${tabFilms}</div>
+                <div class="3">${tabFilms}</div>
             </div>
         </section>`;
     }
 
+    const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
+    for (item of accordeonItemHeader) {
+        item.addEventListener("click", (event) => {
+            item.classList.toggle("active");
+        });
+    }
+
     //Pagination
     createPagination(previousUrl, nextUrl, planetes, remplissage);
-
-    const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
-    accordeonItemHeader.forEach(accordeonItemHeader => {
-        accordeonItemHeader.addEventListener("click", event => {
-            accordeonItemHeader.classList.toggle("active");
-        });
-    });
 }
 
 api_call(API_URL + "/planets", remplissage);

styles/style.css

@@ -30,16 +30,6 @@ body{
     font-size: 1em;
 }
 
-form label{
-    margin: 0.5em;
-    color: var(--blanc);
-}
-
-form input{
-    border-color: var(--jaune);
-    border-radius: 3%;
-    padding: 0.3em;
-}
 
 .titre a{
     margin-top : 20px;
@@ -85,21 +75,14 @@ form input{
     /* border-radius: 10%; */
 }
 
-#bienvenue{
+/* div.image-films {
-    text-align: center;
     background-color: transparent;
-    font-size: 100px;
+    margin-top: -170px;
-    color :var(--jaune) ;
+    margin-left: auto;
-    text-decoration: underline;
+    width: 30%;
-    text-decoration-color: var(--jaune) ;
+    content: url("../assets/imgs/mando.png");
-}
-#presentation {
-    text-align: center;
-    background-color: transparent;
-    font-size: 40px;
-    color :var(--jaune)
-}
 
+} */
 div.image-films {
     background-color: transparent;
     width: 30%;
@@ -158,10 +141,7 @@ div.image-charactere {
     color : #000;  
     padding: 1.5rem;
     line-height: 1.5rem;
-  }
     
-  .column1, .column2, .column3{
-      padding: 1em;
   }
   
   .accordeon_item_header.active + .accordeon_item_body{