fix accordeons
This commit is contained in:
William Noris
parent
8793fd5c0c
commit
9773501631
|
|
@ -4,28 +4,30 @@ const films = document.getElementById("resultats");
|
|||
|
||||
const API_URL = "https://swapi.dev/api/films/"; // déclare la localisation de la liste des films
|
||||
|
||||
function remplissage(EPISODES){
|
||||
console.log(EPISODES);
|
||||
|
||||
for(index in EPISODES.results){
|
||||
films.innerHTML +=`
|
||||
function remplissage(EPISODES) {
|
||||
console.log(EPISODES);
|
||||
|
||||
for (index in EPISODES.results) {
|
||||
films.innerHTML += `
|
||||
<section class="resultat accordeon_item">
|
||||
<h1 class="accordeon_item_header">${EPISODES.results[index].title}</h1>
|
||||
<div class="accordeon_item_body">
|
||||
<p class= "episode">Episode : ${EPISODES.results[index].episode_id}</p>
|
||||
<p class= "directeur">Directeur : ${EPISODES.results[index].director}</p>
|
||||
<p class= "producteur">Producteur : ${EPISODES.results[index].producer}</p>
|
||||
<p class= "sortie">Date de Sortie : ${EPISODES.results[index].release_date}</p>
|
||||
</div>
|
||||
<h1 class="accordeon_item_header">${EPISODES.results[index].title}</h1>
|
||||
<div class="accordeon_item_body">
|
||||
<div class="column1">
|
||||
<p class= "episode">Episode : ${EPISODES.results[index].episode_id}</p>
|
||||
<p class= "directeur">Directeur : ${EPISODES.results[index].director}</p>
|
||||
<p class= "producteur">Producteur : ${EPISODES.results[index].producer}</p>
|
||||
<p class= "sortie">Date de Sortie : ${EPISODES.results[index].release_date}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>`
|
||||
}
|
||||
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
|
||||
accordeonItemHeader.forEach(accordeonItemHeader =>{
|
||||
accordeonItemHeader.addEventListener("click", event => {
|
||||
accordeonItemHeader.classList.toggle("active");
|
||||
})
|
||||
})
|
||||
}
|
||||
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
|
||||
accordeonItemHeader.forEach(accordeonItemHeader => {
|
||||
accordeonItemHeader.addEventListener("click", event => {
|
||||
accordeonItemHeader.classList.toggle("active");
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
api_call(API_URL, remplissage);
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
import { api_call,API_URL, createPagination } from "./util";
|
||||
import { api_call, API_URL, createPagination } from "./util";
|
||||
|
||||
const PERSONNAGES = document.getElementById("resultats");
|
||||
|
||||
|
||||
class People {
|
||||
constructor(birth_year, eye_colo, gender, hair_color,height,mass,skin_color) {
|
||||
this.birth_year = birth_year;
|
||||
this.eye_colo = eye_colo;
|
||||
this.gender = gender;
|
||||
this.hair_color = hair_color;
|
||||
this.height = height;
|
||||
this.mass = mass;
|
||||
this.skin_color=skin_color;
|
||||
}
|
||||
constructor(birth_year, eye_colo, gender, hair_color, height, mass, skin_color) {
|
||||
this.birth_year = birth_year;
|
||||
this.eye_colo = eye_colo;
|
||||
this.gender = gender;
|
||||
this.hair_color = hair_color;
|
||||
this.height = height;
|
||||
this.mass = mass;
|
||||
this.skin_color = skin_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -32,64 +32,71 @@ console.log('personnage.js loaded');
|
|||
// ${error.message}`);
|
||||
// });
|
||||
|
||||
function remplissage(json){
|
||||
console.log(json.results[0]);
|
||||
|
||||
// api_call(API_URL+ "/planets/1", (response) => {
|
||||
// console.log(response);
|
||||
// NAME.innerText = results[i].name;
|
||||
|
||||
// });
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
PERSONNAGES.innerHTML = '';
|
||||
const PERPAGE = json.results.length;
|
||||
const previousUrl = json.previous;
|
||||
const nextUrl = json.next;
|
||||
console.log(previousUrl);
|
||||
console.log(nextUrl);
|
||||
|
||||
function remplissage(json) {
|
||||
console.log(json.results[0]);
|
||||
|
||||
// api_call(API_URL+ "/planets/1", (response) => {
|
||||
// console.log(response);
|
||||
// NAME.innerText = results[i].name;
|
||||
|
||||
// });
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
PERSONNAGES.innerHTML = '';
|
||||
const PERPAGE = json.results.length;
|
||||
const previousUrl = json.previous;
|
||||
const nextUrl = json.next;
|
||||
console.log(previousUrl);
|
||||
console.log(nextUrl);
|
||||
|
||||
for (let i = 0; i < PERPAGE; i++) {
|
||||
const urlbirth_year = json.results[i].birth_year;
|
||||
const urleye_colo=json.results[i].eye_colo;
|
||||
const urlgender=json.results[i].gender;
|
||||
const urlhair_color=json.results[i].hair_color;
|
||||
const urlheight = json.results[i].height;
|
||||
const urlmass=json.results[i].mass;
|
||||
const urlskin_color= json.results[i].skin_color;
|
||||
const urlname= json.results[i].name;
|
||||
const urlhomeworld=json.results[i].homeworld;
|
||||
const urlfilms=json.results[i].films;
|
||||
|
||||
// const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color);
|
||||
// console.log(gens);
|
||||
//Appel Api pour les planetes :
|
||||
const urlbirth_year = json.results[i].birth_year;
|
||||
const urleye_colo = json.results[i].eye_colo;
|
||||
const urlgender = json.results[i].gender;
|
||||
const urlhair_color = json.results[i].hair_color;
|
||||
const urlheight = json.results[i].height;
|
||||
const urlmass = json.results[i].mass;
|
||||
const urlskin_color = json.results[i].skin_color;
|
||||
const urlname = json.results[i].name;
|
||||
const urlhomeworld = json.results[i].homeworld;
|
||||
const urlfilms = json.results[i].films;
|
||||
|
||||
// const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color);
|
||||
// console.log(gens);
|
||||
//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 où je suis présent : ${urlfilms}</div>
|
||||
</div>
|
||||
</section>`;
|
||||
|
||||
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 où je suis présent : ${urlfilms}</div>
|
||||
</div>
|
||||
</section>`;
|
||||
|
||||
}
|
||||
//Pagination
|
||||
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);
|
||||
console.log('personnage.js loaded');
|
||||
console.log('personnage.js loaded');
|
||||
|
|
|
|||
|
|
@ -42,11 +42,11 @@ function remplissage(results) {
|
|||
createPagination(previousUrl, nextUrl, planetes, remplissage);
|
||||
|
||||
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
|
||||
for (item of accordeonItemHeader) {
|
||||
item.addEventListener("click", (event) => {
|
||||
item.classList.toggle("active");
|
||||
accordeonItemHeader.forEach(accordeonItemHeader => {
|
||||
accordeonItemHeader.addEventListener("click", event => {
|
||||
accordeonItemHeader.classList.toggle("active");
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
api_call(API_URL + "/planets", remplissage);
|
||||
|
|
|
|||
Loading…
Reference in New Issue