Merge pull request #12 from rasoirnoir/films

ajout de laccordeon

films.html

@@ -19,15 +19,63 @@
             </ul>
         </nav>
     </section>
-    <section id = "reponses-films"> </section>
+    <div class='accordeon'>
-    <button id = "deploiement-films">Click pour le détail</button>
+        <div class='accordeon_item'>
-    <button id = "deploiement-films2">Click pour le détail</button>
+            <div id="1" class='accordeon_item_header'>
-    <button id = "deploiement-films3">Click pour le détail</button>
+                <h2 class ="titres"></h2>
-    <button id = "deploiement-films4">Click pour le détail</button>
+                <p>(Cliquez ici pour étendre)</p>
-    <button id = "deploiement-films5">Click pour le détail</button>
+            </div>
-    <button id = "deploiement-films6">Click pour le détail</button>
+            <div class="accordeon_item_body">
-    <div class = "vaisseaux-films"></div>
+                <div class="accordeon_item_body_content">
-    <div class = "especes-films"></div>
+            </div>
+            </div>
+        </div>
+        <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>
 </html>

scripts/films.js

@@ -1,122 +1,68 @@
-const FILMS = document.getElementById('reponses-films');
+const { div } = require("prelude-ls");
+
+const FILMS = document.getElementsByClassName('accordeon');
 const VAISSEAUX = document.getElementById('vaisseaux-films');
 const ESPECES = document.getElementById('especes-films');
-const DEPLIE = document.getElementById ('deploiement-films');
+const TITRE = document.getElementsByClassName('titres');
-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/"; // déclare la localisation de la liste des films
+const API_URL = "https://swapi.dev/api/films/";  
-fetch(API_URL)                                  // recupère la liste des films
+fetch(API_URL + target.id)  
 .then((response) => {                                   // retourne une reponse
     console.log(response);
     return response.json();                             // sous format json
 })
 .then(afficherFilms => {                                // on affiche ensuite les films  
-    console.log(afficherFilms);
+        const EPISODES = afficherFilms;      // on déclare qu'un épisode est toujours la fonction avec sa boucle
-    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]);  
-        const EPISODES = afficherFilms.results[index];      // on déclare qu'un épisode est toujours la fonction avec sa boucle
         console.log(EPISODES);                             
     
-        FILMS.innerHTML +=`                                 
+        TITRE.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/"
+const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
-fetch(API_URL_VAISSEAUX)
+accordeonItemHeader.forEach(accordeonItemHeader =>{
-.then((response2)=>{
+    accordeonItemHeader.addEventListener("click", event => {
-    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 +=`                                 
+        console.log(event.target.id);
-    <p class= "Nom des Vaisseaux">${VAISSEAU.name}</p>
+        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];
-,)
 
-const API_URL_ESPECES = "https://swapi.dev/api/species/"
+        accordeonItemHeader.classList.toggle("active");
-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 +=`                                 
+const API_URL = "https://swapi.dev/api/films/";         // déclare la localisation de la liste des films
-    <p class= "Nom des Espèces">${ESPECE.name}</p>
+fetch(API_URL + event.target.id)                                          // recupère la liste des films
-    `
+.then((response) => {                                   // retourne une reponse
-
-}
-})
-
-
-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();                     
+    return response.json();                             // sous format json
-    })
+})
-    .then(afficherFilms => {                        
+.then(afficherFilms => {                                // on affiche ensuite les films  
-        /*console.log(afficherFilms);
+        const EPISODES = afficherFilms;      // on déclare qu'un épisode est toujours la fonction avec sa boucle
-        for(let index = 0; index <6; index++){      
+        console.log(EPISODES);                             
-            console.log(afficherFilms.results[index]);  */
-            const EPISODE2 = afficherFilms;      
-            console.log(EPISODE2);                             
     
-        FILMS.innerHTML +=`                                 
+        DEPLIE.innerHTML +=`                                 
-        <p class= "titre">${EPISODE2.episode_id}</p>
+        <p class= "titre">${EPISODES.title}</p>
-        <p class= "titre">${EPISODE2.director}</p>
+        <p class= "episode">Episode :  ${EPISODES.episode_id}</p>
-        <p class= "titre">${EPISODE2.producer}</p>
+        <p class= "directeur">Directeur : ${EPISODES.director}</p>
-        <p class= "titre">${EPISODE2.release_date}</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> 
+        ` 
+        }*/
+
+,)
 })
 })

styles/style.css

@@ -7,7 +7,7 @@
     margin: 0;
     padding: 0;
     font-family: 'star-wars', serif;
-    color : #FFF;
+    color : #000;
 }
 
 .titre a{
@@ -23,12 +23,14 @@
 .ul-menu{
     list-style-type: none;
     font-size: large;
+    color : #FFF;
     text-decoration: underline;
     text-decoration-color: #ffe81f;
 }
 
 .ul-menu li{
     display: inline;
+    color : #FFF;
     float: left;
     margin: 1em;
     font-size: large;
@@ -38,6 +40,7 @@
 
 .ul-menu li a{
     display: block;
+    color : #FFF;
     padding: 5px;
     text-align: center;
     font-size: large;
@@ -57,35 +60,42 @@ div.image-films {
     content: url("../assets/imgs/mando.png");
 
 }
-#reponses-films {
-    color : #FFF;
-    float: left; 
-    margin-top : 200px;
-    margin-left:-350px;
-}
 
-#deploiement-films2 {
+.accordeon {
     color : #000;
     float: left; 
-    margin-top : 200px;
+    margin-top : 100px;
+    margin-left: -350px;
 }
-#deploiement-films3 {
+.accordeon_item{
+    background-color:#ffff;
+    margin:2rem 0;
+    border-radius: 1rem;
+    box-shadow: 1px 1px 30px rgb(196, 196, 196) ;
+    padding-top: 5px;
+}
+.accordeon_item_header{
+    padding: 0.5rem 1rem 0.5rem 1rem;
+    min-height: 3.5rem;
+    line-height: 1.25rem;
+    display: flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+}
+.accordeon_item_body{
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+  } 
+  
+  .accordeon_item_body_content{
     color : #000;  
-    float: left; 
+    padding: 1.5rem;
-    margin-top : 200px;
+    line-height: 1.5rem;
-}
+    
-#deploiement-films4 {
+  }
-    color : #000;
+  
-    float: left; 
+  .accordeon_item_header.active + .accordeon_item_body{
-    margin-top : 200px;
+  max-height: 200px;
-}
+  }
-#deploiement-films5 {
-    color : #000;
-    float: left; 
-    margin-top : 200px;
-}
-#deploiement-films6 {
-    color : #000;
-    float: left; 
-    margin-top : 200px;
-}