const API_URL = "https://swapi.dev/api/people/?page="; let pageEnCours = 1; let tableau_perso = new Array(); 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 += `

${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() { const peoples = await fetch(API_URL+pageEnCours); const people = await peoples.json(); const total_pages = people.count/people.results.length; tableau_perso = []; // on vide le div document.getElementById('container').innerHTML = ""; // boucle pour parser les peoples for(i=0;i${film.title}

`; // } tableau_perso.push({name:people.results[i].name,height:people.results[i].height,mass:people.results[i].mass,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,homeworld:planet.name,index:i,films:people.results[i].films}); 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 accordion = document.getElementsByClassName('etendre'); for (i=0; i${film.title}`; } } // boucle pour afficher les boutons de navigations fetch(API_URL) .then(response => response.json()) .then(data => { let totalPages = data.count / data.results.length; for (let index = 1; index < totalPages +1; index++) { document.getElementById('buttons').innerHTML += ` `; } let buttons = document.querySelectorAll('.allButtons'); let boutonNum = document.querySelectorAll('.boutonNum'); console.log(boutonNum); for (let i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", function(e) { if (e.target.name === "moins" || e.target.name === "plus"){ pageEnCours = pageEnCours + parseInt(e.target.value); if(pageEnCours < 1){ pageEnCours = 1; }else if(pageEnCours > boutonNum.length){ pageEnCours = boutonNum.length; } }else{ pageEnCours = parseInt(e.target.value); } getPeople(); }); }}); document.getElementById('myInput').addEventListener("keyup", function() { searchPeople(); }); function searchPeople() { // Declare variables let query = myInput.value; // if(query.length>1){ // getSearch(query); // }else{ // getPeople(); // } //console.log(tableau_perso); let results = tableau_perso.filter(user=>user.name.includes(query)); //console.log(result); document.getElementById('container').innerHTML = ""; for(i=0;i${result[i].name}

`; const perso = new People(results[i].name,results[i].height,results[i].mass,results[i].hair_color,results[i].skin_color,results[i].eye_color,results[i].birth_year,results[i].gender,results[i].homeworld,i,results[i].films); perso.affichePeople(); const accordion = document.getElementsByClassName('etendre'); for (i=0; i