changements js et html pour ajouts boutons

films.html

@@ -21,6 +21,13 @@
     </section>
     <section id = "reponses-films"> </section>
     <button id = "deploiement-films">Click pour le détail</button>
+    <button id = "deploiement-films2">Click pour le détail</button>
+    <button id = "deploiement-films3">Click pour le détail</button>
+    <button id = "deploiement-films4">Click pour le détail</button>
+    <button id = "deploiement-films5">Click pour le détail</button>
+    <button id = "deploiement-films6">Click pour le détail</button>
+    <div class = "vaisseaux-films"></div>
+    <div class = "especes-films"></div>
     <div class = "image-films"></div>
 </body>
 </html>

scripts/films.js

@@ -1,23 +1,122 @@
 const FILMS = document.getElementById('reponses-films');
+const VAISSEAUX = document.getElementById('vaisseaux-films');
+const ESPECES = document.getElementById('especes-films');
 const DEPLIE = document.getElementById ('deploiement-films');
+const DEPLIE2 = document.getElementById ('deploiement-films2');
+const DEPLIE3 = document.getElementById ('deploiement-films3');
+const DEPLIE4 = document.getElementById ('deploiement-films4');
+const DEPLIE5 = document.getElementById ('deploiement-films5');
+const DEPLIE6 = document.getElementById ('deploiement-films6');
 
 console.log(FILMS);
 
-const API_URL = "https://swapi.dev/api/films/";
+const API_URL = "https://swapi.dev/api/films/"; // déclare la localisation de la liste des films
-fetch(API_URL)
+fetch(API_URL)                                  // recupère la liste des films
-.then((response) => {
+.then((response) => {                           // retourne une reponse
     console.log(response);
-    return response.json();
+    return response.json();                     // sous format json
 })
-.then(afficherFilms => {
+.then(afficherFilms => {                        // on affiche ensuite les films
     console.log(afficherFilms);
-    for(let index = 0; index <6; index++){
+    for(let index = 0; index <6; index++){      // on sait qu'il y en a 6, donc une boucle pour les afficher tous
-        console.log(afficherFilms.results[index]);
+        console.log(afficherFilms.results[index]);  
-        const EPISODES = afficherFilms.results[index];
+        const EPISODES = afficherFilms.results[index];      // on déclare qu'un épisode est toujours la fonction avec sa boucle
-        console.log(EPISODES);
+        console.log(EPISODES);                             
     
-        FILMS.innerHTML +=`
+        FILMS.innerHTML +=`                                 
         <p class= "titre">${EPISODES.title}</p>
     `
     }
-})
+
+})
+
+DEPLIE.addEventListener('click', ()=>{
+
+const API_URL_1 = "https://swapi.dev/api/films/1"; 
+fetch(API_URL_1)                                  
+.then((response1) => {                           
+    console.log(response1);
+    return response1.json();                     
+})
+.then(afficherFilms => {                        
+    /*console.log(afficherFilms);
+    for(let index = 0; index <6; index++){      
+        console.log(afficherFilms.results[index]);  */
+        const EPISODE1 = afficherFilms;      
+        console.log(EPISODE1);                             
+
+    FILMS.innerHTML +=`                                 
+    <p class= "episode">Episode :  ${EPISODE1.episode_id}</p>
+    <p class= "directeur">Directeur : ${EPISODE1.director}</p>
+    <p class= "producteur">Producteur : ${EPISODE1.producer}</p>
+    <p class= "sortie">Date de Sortie : ${EPISODE1.release_date}</p>
+`
+}
+,)
+
+const API_URL_VAISSEAUX = "https://swapi.dev/api/starships/"
+fetch(API_URL_VAISSEAUX)
+.then((response2)=>{
+    console.log(response2);
+    return response2.json();
+})
+.then(afficherVaisseaux =>{
+    console.log(afficherVaisseaux);
+    for (let index = 0; index <36; index++){
+        console.log(afficherVaisseaux.results[index]);
+        const VAISSEAU = afficherVaisseaux.results[index];
+        console.log(VAISSEAU);
+
+        VAISSEAUX.innerHTML +=`                                 
+    <p class= "Nom des Vaisseaux">${VAISSEAU.name}</p>
+    `
+    }
+}
+,)
+
+const API_URL_ESPECES = "https://swapi.dev/api/species/"
+fetch(API_URL_ESPECES)
+.then((response3)=>{
+    console.log(response3);
+    return response3.json();
+})
+.then(afficherEspeces =>{
+    console.log(afficherEspeces);
+    for (let index = 0; index <37; index++){
+        console.log(afficherEspeces.results[index]);
+        const ESPECE = afficherEspeces.results[index];
+        console.log(ESPECE);
+
+        ESPECES.innerHTML +=`                                 
+    <p class= "Nom des Espèces">${ESPECE.name}</p>
+    `
+
+}
+})
+
+
+DEPLIE2.addEventListener('click', ()=>{
+
+    const API_URL_2 = "https://swapi.dev/api/films/2"; 
+    fetch(API_URL_2)                                  
+    .then((response) => {                           
+        console.log(response);
+        return response.json();                     
+    })
+    .then(afficherFilms => {                        
+        /*console.log(afficherFilms);
+        for(let index = 0; index <6; index++){      
+            console.log(afficherFilms.results[index]);  */
+            const EPISODE2 = afficherFilms;      
+            console.log(EPISODE2);                             
+    
+        FILMS.innerHTML +=`                                 
+        <p class= "titre">${EPISODE2.episode_id}</p>
+        <p class= "titre">${EPISODE2.director}</p>
+        <p class= "titre">${EPISODE2.producer}</p>
+        <p class= "titre">${EPISODE2.release_date}</p>
+    `
+    }
+    ,)
+})
+})

styles/style.css

@@ -46,7 +46,7 @@
 }
 
 body{
-    background-image: url("../assets/imgs/starry_sky.jpg")   
+    background-image: url("../assets/imgs/starry_sky.jpg");
 }
 
 div.image-films {
@@ -61,9 +61,30 @@ div.image-films {
     color : #FFF;
     float: left; 
     margin-top : 200px;
+    margin-left:-350px;
 }
 
-#deploiement-films {
+#deploiement-films2 {
+    color : #000;
+    float: left; 
+    margin-top : 200px;
+}
+#deploiement-films3 {
+    color : #000;
+    float: left; 
+    margin-top : 200px;
+}
+#deploiement-films4 {
+    color : #000;
+    float: left; 
+    margin-top : 200px;
+}
+#deploiement-films5 {
+    color : #000;
+    float: left; 
+    margin-top : 200px;
+}
+#deploiement-films6 {
     color : #000;
     float: left; 
     margin-top : 200px;