styles updates

This commit is contained in:
William Noris 2021-10-20 10:37:54 +02:00
parent 4f69d290b8
commit 696a638d56
5 changed files with 43 additions and 27 deletions

View file

@ -70,15 +70,16 @@ for (let i = 0; i < PERPAGE; i++) {
`<section class="resultat accordeon_item">
<h1 class="accordeon_item_header">${urlname}</h1>
<div class="accordeon_item_body">
<div class="1">
<div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div>
<div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div>
<div id=genre>Genre : ${urlgender}</div>
<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"> Planète de Naissance : ${urlhomeworld}</div>
<div class="3"> Film je suis présent : ${urlfilms}</div>
<div class="column1">
<div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div>
<div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div>
<div id=genre>Genre : ${urlgender}</div>
<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>
<div class="column2"> Planète de Naissance : ${urlhomeworld}</div>
<div class="column3"> Film je suis présent : ${urlfilms}</div>
</div>
</section>`;

View file

@ -20,15 +20,6 @@ function remplissage(results) {
const population = resultPlanet.population;
const tabResidents = resultPlanet.residents;
//Problème de requêtes asyncrones
// let tabResidents = [];
// for(index in resultPlanet.residents){
// api_call(resultPlanet.residents[index], (jsonresp)=>{
// console.log(jsonresp.name);
// });
// }
// console.log(`${nom} - résidents : ${resultPlanet.residents}`);
// console.log(`nom des résidents : ${tabResidents}`);
const tabFilms = resultPlanet.films;
@ -36,26 +27,26 @@ function remplissage(results) {
`<section class="resultat accordeon_item">
<h1 class="accordeon_item_header">${nom}</h1>
<div class="accordeon_item_body">
<div class="1">
<div class="column1">
<p>${terrain}</p>
<p>${climate}</p>
<p>${diametre}Km</p>
</div>
<div class="2">${tabResidents}</div>
<div class="3">${tabFilms}</div>
<div class="column2">${tabResidents}</div>
<div class="column3">${tabFilms}</div>
</div>
</section>`;
}
//Pagination
createPagination(previousUrl, nextUrl, planetes, remplissage);
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
for (item of accordeonItemHeader) {
item.addEventListener("click", (event) => {
item.classList.toggle("active");
});
}
//Pagination
createPagination(previousUrl, nextUrl, planetes, remplissage);
}
api_call(API_URL + "/planets", remplissage);