diff --git a/.parcel-cache/lock.mdb b/.parcel-cache/lock.mdb index 1fc256e..18eee23 100644 Binary files a/.parcel-cache/lock.mdb and b/.parcel-cache/lock.mdb differ diff --git a/characters.html b/characters.html index 0b41100..e277f14 100644 --- a/characters.html +++ b/characters.html @@ -16,11 +16,14 @@
  • Films
  • Planets
  • Characters
  • + + +
    - + \ No newline at end of file diff --git a/scripts/personnages.js b/scripts/personnages.js index d135ed1..85caf9c 100644 --- a/scripts/personnages.js +++ b/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 += `
    @@ -72,8 +77,8 @@ for (let i = 0; i < PERPAGE; i++) {
    Couleur des Cheveux : ${urlhair_color}
    Poids du personnage : ${urlmass} kg
    Couleur de Peau : ${urlskin_color}
    -
    2
    -
    3
    +
    Planète de Naissance : ${urlhomeworld}
    +
    Film où je suis présent : ${urlfilms}
    `; diff --git a/styles/style.css b/styles/style.css index 6c96fc2..0e25c4e 100644 --- a/styles/style.css +++ b/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;