Affichage avec url

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

@@ -2,6 +2,7 @@ import { api_call,API_URL } from "./util";
 
 const PERSONNAGES = document.getElementById("resultats");
 const NAME = document.getElementById("titreaccordeon");
+const PLANETENAISSANCE= document.getElementById("2");
 
 class People {
   constructor(birth_year, eye_colo, gender, hair_color,height,mass,skin_color) {
@@ -58,9 +59,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);
 
+
   PERSONNAGES.innerHTML += 
   `<section class="resultat">
  <h1 class="titreAccordeon">${urlname}</h1>
@@ -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

@@ -57,6 +57,16 @@ div.image-films {
     content: url("../assets/imgs/mando.png");
 
 }
+
+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;