From 4f69d290b804caf6dfc39254c748acdd71114fbe Mon Sep 17 00:00:00 2001
From: William Noris <w.noris@protonmail.com>
Date: Wed, 20 Oct 2021 10:17:26 +0200
Subject: [PATCH 1/2] mise en place du formulaire de recherche

---
 planets.html     | 8 ++++++++
 styles/style.css | 9 +++++++++
 2 files changed, 17 insertions(+)

diff --git a/planets.html b/planets.html
index d0761dc..2b027ae 100644
--- a/planets.html
+++ b/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>
diff --git a/styles/style.css b/styles/style.css
index f21d97a..882f233 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -30,6 +30,15 @@ body{
     font-size: 1em;
 }
 
+form label{
+    margin: 0.5em;
+}
+
+form input{
+    border-color: var(--jaune);
+    border-radius: 3%;
+    padding: 0.3em;
+}
 
 .titre a{
     margin-top : 20px;

From 696a638d568cb734a64a4efedda37ccd3931cf8c Mon Sep 17 00:00:00 2001
From: William Noris <w.noris@protonmail.com>
Date: Wed, 20 Oct 2021 10:37:54 +0200
Subject: [PATCH 2/2] styles updates

---
 characters.html        | 13 ++++++++++++-
 films.html             |  9 +++++++++
 scripts/personnages.js | 19 ++++++++++---------
 scripts/planets.js     | 21 ++++++---------------
 styles/style.css       |  8 ++++++--
 5 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/characters.html b/characters.html
index 828d8e9..1616cee 100644
--- a/characters.html
+++ b/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>
\ No newline at end of file
diff --git a/films.html b/films.html
index 5e6f27d..e4e8ee3 100644
--- a/films.html
+++ b/films.html
@@ -21,6 +21,15 @@
       </ul>
     </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>
+
   <div class='accordeon'>
     <div class='accordeon_item'>
       <div id="1" class='accordeon_item_header'>
diff --git a/scripts/personnages.js b/scripts/personnages.js
index 4414f55..30f6436 100644
--- a/scripts/personnages.js
+++ b/scripts/personnages.js
@@ -70,15 +70,16 @@ for (let i = 0; i < PERPAGE; i++) {
   `<section class="resultat accordeon_item">
     <h1 class="accordeon_item_header">${urlname}</h1>
     <div class="accordeon_item_body">
-        <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= 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 class="3"> Film où je suis présent : ${urlfilms}</div>
+        <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= poids> Poids du personnage : ${urlmass}  kg</div>
+          <div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div>
+        </div>
+        <div class="column2"> Planète de Naissance : ${urlhomeworld}</div>
+        <div class="column3"> Film où je suis présent : ${urlfilms}</div>
     </div>
 </section>`;
 
diff --git a/scripts/planets.js b/scripts/planets.js
index 4b6b113..83834ef 100644
--- a/scripts/planets.js
+++ b/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="3">${tabFilms}</div>
+                <div class="column2">${tabResidents}</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);
diff --git a/styles/style.css b/styles/style.css
index 882f233..916107a 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -32,6 +32,7 @@ body{
 
 form label{
     margin: 0.5em;
+    color: var(--blanc);
 }
 
 form input{
@@ -149,8 +150,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{