Merge pull request #17 from rasoirnoir/recherche

Recherche

characters.html

@@ -23,10 +23,21 @@
         </nav>
 
     </section>
-    <div class="image-charactere"></div>
+
+    <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>
+
+
 </body>
 
 </html>

films.html

@@ -22,6 +22,14 @@
     </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>

planets.html

@@ -22,6 +22,14 @@
         </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/personnages.js

@@ -69,27 +69,24 @@ console.log('personnage.js loaded');
     //Appel Api pour les planetes :
 
 
-      PERSONNAGES.innerHTML += 
+  PERSONNAGES.innerHTML += 
-      `<section class="resultat accordeon_item">
+    `<section class="resultat accordeon_item">
-        <h1 class="accordeon_item_header">${urlname}</h1>
+      <h1 class="accordeon_item_header">${urlname}</h1>
-        <div class="accordeon_item_body">
+      <div class="accordeon_item_body">
-            <div class="1">
+          <div class="column1">
             <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 class="2"> Planète de Naissance : ${urlhomeworld}</div>
+          </div>
-            <div class="3"> Film où je suis présent : ${urlfilms}</div>
+          <div class="column2"> Planète de Naissance : ${urlhomeworld}</div>
-        </div>
+          <div class="column3"> Film où je suis présent : ${urlfilms}</div>
+      </div>
     </section>`;
 
 
-      }
-
-
     //Pagination
     createPagination(previousUrl, nextUrl, PERSONNAGES, remplissage);
 }

scripts/planets.js

@@ -20,15 +20,6 @@ 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;
 
 
@@ -36,26 +27,26 @@ function remplissage(results) {
             `<section class="resultat accordeon_item">
             <h1 class="accordeon_item_header">${nom}</h1>
             <div class="accordeon_item_body">
-                <div class="1">
+                <div class="column1">
                     <p>${terrain}</p>
                     <p>${climate}</p>
                     <p>${diametre}Km</p>
                 </div>
-                <div class="2">${tabResidents}</div>
+                <div class="column2">${tabResidents}</div>
-                <div class="3">${tabFilms}</div>
+                <div class="column3">${tabFilms}</div>
             </div>
         </section>`;
     }
 
+    //Pagination
+    createPagination(previousUrl, nextUrl, planetes, remplissage);
+
     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);
 }
 
 api_call(API_URL + "/planets", remplissage);

styles/style.css

@@ -30,6 +30,16 @@ 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;
@@ -147,8 +157,11 @@ div.image-charactere {
   .accordeon_item_body_content{
     color : #000;  
     padding: 1.5rem;
-    line-height: 1.5rem;
+    line-height: 1.5rem;    
-    
+  }
+
+  .column1, .column2, .column3{
+      padding: 1em;
   }
   
   .accordeon_item_header.active + .accordeon_item_body{