diff --git a/people.html b/people.html index bb96e4e..239b9cc 100644 --- a/people.html +++ b/people.html @@ -7,6 +7,15 @@ Brief Star Wars - People +
@@ -18,7 +27,7 @@
  • Planètes
    • - +
    diff --git a/scripts/people.js b/scripts/people.js index a9e9076..ebb2169 100644 --- a/scripts/people.js +++ b/scripts/people.js @@ -1,6 +1,66 @@ const API_URL = "https://swapi.dev/api/people/?page="; let pageEnCours = 1; +class People { + constructor(name, height, mass, hair_color, skin_color, eye_color, birth_year, gender, homeworld, index, films) { + this.name = name; + this.height = height; + this.mass = mass; + this.hair_color = hair_color; + this.skin_color = skin_color; + this.eye_color = eye_color; + this.birth_year = birth_year; + this.gender = gender; + this.homeworld = homeworld; + this.index = index; + this.films = films; + } + + affichePeople () { + document.getElementById('container').innerHTML += ` +
    +

    Name : ${this.name}

    + +
    +
    +

    Né sur :

    +

    ${this.homeworld}

    +
    +
    +

    Height :

    +

    ${this.height} cm

    +
    +
    +

    Weight :

    +

    ${this.mass} Kg

    +
    +
    +

    Hair color :

    +

    ${this.hair_color}

    +
    +
    +

    Skin color :

    +

    ${this.skin_color}

    +
    +
    +

    Eye color :

    +

    ${this.eye_color}

    +
    +
    +

    Birth year :

    +

    ${this.birth_year}

    +
    +
    +

    Gender :

    +

    ${this.gender}

    +
    + + +
    +
    +
    + `; + } +} // function pour afficher les peoples et leur correspondances async function getPeople() { @@ -12,10 +72,10 @@ async function getPeople() { document.getElementById('container').innerHTML = ""; // boucle pour parser les peoples - for(i=0;i${film.title}

    `; // } - document.getElementById('container').innerHTML += ` -
    -

    Name : ${hero}

    -
    -

    Height :

    -

    ${people.results[i].height} cm

    -
    -
    -

    Weight :

    -

    ${people.results[i].mass} Kg

    -
    -
    -

    Hair color :

    -

    ${people.results[i].hair_color}

    -
    -
    -

    Skin color :

    -

    ${people.results[i].skin_color}

    -
    -
    -

    Eye color :

    -

    ${people.results[i].eye_color}

    -
    -
    -

    Birth year :

    -

    ${people.results[i].birth_year}

    -
    -
    -

    Gender :

    -

    ${people.results[i].gender}

    -
    + const perso = new People(people.results[i].name,people.results[i].height,people.results[i].mass,people.results[i].hair_color,people.results[i].skin_color,people.results[i].eye_color,people.results[i].birth_year,people.results[i].gender,planet.name,i,people.results[i].films); + perso.affichePeople(); + } + const BUTTONS = document.querySelectorAll('.films'); + for(var i = 0;i < BUTTONS.length;i++){ + let BUTTON = BUTTONS[i]; + BUTTON.addEventListener("click", function() { + //console.log(BUTTON.nextElementSibling); + getFilms(BUTTON.value,BUTTON.nextElementSibling.id); + }); + } - -
    -
    - `; - } - const BUTTONS = document.querySelectorAll('.films'); - for(var i = 0;i < BUTTONS.length;i++){ - let BUTTON = BUTTONS[i]; - BUTTON.addEventListener("click", function() { - //console.log(BUTTON.nextElementSibling); - getFilms(BUTTON.value,BUTTON.nextElementSibling.id); - }); - } + const accordion = document.getElementsByClassName('etendre'); + for (i=0; iuser.includes(query)); - document.getElementById('container').innerHTML = ""; - for(i=0;i${result[i]}

    `; + if(query.length>1){ + getSearch(query); + }else{ + getPeople(); } - - console.log(result); - + + //let result = array.filter(user=>user.name.includes(query)); + //console.log(result); + // document.getElementById('container').innerHTML = ""; + // for(i=0;i${result[i].name}

    `; + // } } +async function getSearch(query) { + document.getElementById('container').innerHTML = ""; + const searchs = await fetch("https://swapi.dev/api/people/?search="+query); + const search = await searchs.json(); + console.log(search); + for(i=0;i