This commit is contained in:
Blandine Bajard 2021-10-20 12:01:05 +02:00
commit 4a95ab8ced
3 changed files with 76 additions and 86 deletions

View File

@ -14,11 +14,13 @@ function remplissage(EPISODES){
<section class="resultat accordeon_item"> <section class="resultat accordeon_item">
<h1 class="accordeon_item_header">${EPISODES.results[index].title}</h1> <h1 class="accordeon_item_header">${EPISODES.results[index].title}</h1>
<div class="accordeon_item_body"> <div class="accordeon_item_body">
<div class="column1">
<p class= "episode">Episode : ${EPISODES.results[index].episode_id}</p> <p class= "episode">Episode : ${EPISODES.results[index].episode_id}</p>
<p class= "directeur">Directeur : ${EPISODES.results[index].director}</p> <p class= "directeur">Directeur : ${EPISODES.results[index].director}</p>
<p class= "producteur">Producteur : ${EPISODES.results[index].producer}</p> <p class= "producteur">Producteur : ${EPISODES.results[index].producer}</p>
<p class= "sortie">Date de Sortie : ${EPISODES.results[index].release_date}</p> <p class= "sortie">Date de Sortie : ${EPISODES.results[index].release_date}</p>
</div> </div>
</div>
</section>` </section>`
} }
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header"); const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");

View File

@ -68,29 +68,17 @@ console.log('personnage.js loaded');
// console.log(gens); // console.log(gens);
//Appel Api pour les planetes : //Appel Api pour les planetes :
PERSONNAGES.innerHTML +=
`<section class="resultat accordeon_item">
<h1 class="accordeon_item_header">${urlname}</h1>
<div class="accordeon_item_body">
<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>`;
} }
//Pagination //Pagination
createPagination(previousUrl, nextUrl, PERSONNAGES, remplissage); createPagination(previousUrl, nextUrl, PERSONNAGES, remplissage);
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
accordeonItemHeader.forEach(accordeonItemHeader => {
accordeonItemHeader.addEventListener("click", event => {
accordeonItemHeader.classList.toggle("active");
});
});
} }
api_call(API_URL + "/people", remplissage); api_call(API_URL + "/people", remplissage);
console.log('personnage.js loaded'); console.log('personnage.js loaded');

View File

@ -42,11 +42,11 @@ function remplissage(results) {
createPagination(previousUrl, nextUrl, planetes, remplissage); createPagination(previousUrl, nextUrl, planetes, remplissage);
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header"); const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
for (item of accordeonItemHeader) { accordeonItemHeader.forEach(accordeonItemHeader => {
item.addEventListener("click", (event) => { accordeonItemHeader.addEventListener("click", event => {
item.classList.toggle("active"); accordeonItemHeader.classList.toggle("active");
});
}); });
}
} }
api_call(API_URL + "/planets", remplissage); api_call(API_URL + "/planets", remplissage);