vincentRamiere/Brief_starWars
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

modif js et html

Browse source
This commit is contained in:
HediMjid 2021-10-19 13:54:06 +02:00
parent 1d497afd0b
commit d63b14f385
2 changed files with 36 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
people.html
View file

@ -10,10 +10,9 @@
</head> </head>
<body> <body>
<h1>People</h1> <h1>People</h1>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<section id="container" style="font-size:12px;"> <section id="container" style="font-size:12px;">
</section> </section>
<div class="boutons"> <div class="boutons">

47
scripts/people.js
View file

@ -15,32 +15,55 @@ async function getPeople() {
// boucle pour parser les peoples // boucle pour parser les peoples
for(i=0;i<total_pages;i++){ for(i=0;i<total_pages;i++){
const hero = people.results[i].name; const hero = people.results[i].name;
const planets = await fetch(people.results[i].homeworld); // const planets = await fetch(people.results[i].homeworld);
const planet = await planets.json(); // const planet = await planets.json();
//console.log(hero+' '+planet.name); //console.log(hero+' '+planet.name);
// variable pour la concatenation des films // variable pour la concatenation des films
let movies = ""; let movies = "";
// boucle pour parser les films // boucle pour parser les films
for(j=0;j<people.results[i].films.length;j++){ // for(j=0;j<people.results[i].films.length;j++){
const films = await fetch(people.results[i].films[j]); // const films = await fetch(people.results[i].films[j]);
const film = await films.json(); // const film = await films.json();
console.log(film.title); // console.log(film.title);
movies += `<p>${film.title}</p>`; // movies += `<p>${film.title}</p>`;
} // }
document.getElementById('container').innerHTML += ` document.getElementById('container').innerHTML += `
<p> <p>
<h2>${hero}</h2> <h2>${hero}</h2>
<h3>planet : ${planet.name} <span style="font-size:12px;">(${people.results[i].homeworld})</span></h3> <button class="films" value="${people.results[i].films}">Voir les films</button>
<h4>Films : ${movies}</h4> <div id="detailsFilms${i}"></div>
</p> </p>
<hr> <hr>
`; `;
} }
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);
});
}
} }
// function pour afficher les peoples et leur correspondances
async function getFilms(liste,div) {
const url = liste.split(',');
console.log(div);
document.getElementById(div).innerHTML = "";
for(i=0;i<liste.length;i++){
console.log(url[i]);
const films = await fetch(url[i]);
const film = await films.json();
//console.log(film);
document.getElementById(div).innerHTML += `<h2>${film.title}</h2>`;
}
}
// boucle pour afficher les boutons de navigations // boucle pour afficher les boutons de navigations
fetch(API_URL) fetch(API_URL)
@ -83,4 +106,4 @@ fetch(API_URL)
}}); }});
// initialisation de la page, pour un affichage au chargement // initialisation de la page, pour un affichage au chargement
getPeople(); getPeople();