Merge pull request #13 from rasoirnoir/characters

Characters

characters.html

@@ -16,11 +16,14 @@
                 <li id="films"><a href="films.html">Films</a></li>
                 <li id="planets"><a href="planets.html">Planets</a></li>
                 <li id="characters"><a href="characters.html">Characters</a></li>
+                
             </ul>
         </nav>
+        
     </section>
+    <div class="image-charactere" ></div>
     <section id="resultats"></section>
    
-    
+   
 </body>
 </html>

scripts/personnages.js

@@ -1,7 +1,7 @@
 import { api_call,API_URL } from "./util";
 
 const PERSONNAGES = document.getElementById("resultats");
-const NAME = document.getElementById("titreaccordeon");
+
 
 class People {
   constructor(birth_year, eye_colo, gender, hair_color,height,mass,skin_color) {
@@ -48,7 +48,7 @@ fetch(API_URL+"/people")
      PERSONNAGES.innerHTML = '';
      const PERPAGE = json.results.length;
      
-     console.log('coucou');
+     
 for (let i = 0; i < PERPAGE; i++) {
   const urlbirth_year = json.results[i].birth_year;
   const urleye_colo=json.results[i].eye_colo;
@@ -58,8 +58,13 @@ for (let i = 0; i < PERPAGE; i++) {
   const urlmass=json.results[i].mass;
   const urlskin_color= json.results[i].skin_color;
   const urlname= json.results[i].name;
+  const urlhomeworld=json.results[i].homeworld;
+  const urlfilms=json.results[i].films;
+
   // const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color);
   // console.log(gens);
+//Appel Api pour les planetes :
+
 
   PERSONNAGES.innerHTML += 
   `<section class="resultat">
@@ -72,8 +77,8 @@ for (let i = 0; i < PERPAGE; i++) {
      <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"> 2</div>
-     <div class="3"> 3</div>
+     <div class="2"> Planète de Naissance : ${urlhomeworld}</div>
+     <div class="3"> Film où je suis présent : ${urlfilms}</div>
  </div>
 </section>`;
 

styles/style.css

@@ -61,6 +61,22 @@ div.image-films {
 
 }
 
+div.image-charactere {
+    background-color: transparent;
+    margin-top: -170px;
+    margin-left: auto;
+    width: 30%;
+    content: url("../assets/imgs/grogu.png");
+}
+
+
+#reponses-films {
+    color : #FFF;
+    float: left; 
+    margin-top : 200px;
+    margin-left:-350px;
+}
+
 .accordeon {
     color : #000;
     float: left;