isa44.74/mandalorian
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #18 from rasoirnoir/hotfix1

Browse Source 
fix accordeons
This commit is contained in:
William Noris 2021-10-20 10:53:42 +02:00 committed by GitHub
commit 0f71011bc1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 94 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
scripts/films.js
View File

@ -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 const API_URL = "https://swapi.dev/api/films/"; // déclare la localisation de la liste des films
function remplissage(EPISODES){ function remplissage(EPISODES) {
console.log(EPISODES); console.log(EPISODES);
for(index in EPISODES.results){ for (index in EPISODES.results) {
films.innerHTML +=` films.innerHTML += `
<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">
<p class= "episode">Episode : ${EPISODES.results[index].episode_id}</p> <div class="column1">
<p class= "directeur">Directeur : ${EPISODES.results[index].director}</p> <p class= "episode">Episode : ${EPISODES.results[index].episode_id}</p>
<p class= "producteur">Producteur : ${EPISODES.results[index].producer}</p> <p class= "directeur">Directeur : ${EPISODES.results[index].director}</p>
<p class= "sortie">Date de Sortie : ${EPISODES.results[index].release_date}</p> <p class= "producteur">Producteur : ${EPISODES.results[index].producer}</p>
</div> <p class= "sortie">Date de Sortie : ${EPISODES.results[index].release_date}</p>
</div>
</div>
</section>` </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); api_call(API_URL, remplissage);

113
scripts/personnages.js
View File

@ -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"); const PERSONNAGES = document.getElementById("resultats");
class People { class People {
constructor(birth_year, eye_colo, gender, hair_color,height,mass,skin_color) { constructor(birth_year, eye_colo, gender, hair_color, height, mass, skin_color) {
this.birth_year = birth_year; this.birth_year = birth_year;
this.eye_colo = eye_colo; this.eye_colo = eye_colo;
this.gender = gender; this.gender = gender;
this.hair_color = hair_color; this.hair_color = hair_color;
this.height = height; this.height = height;
this.mass = mass; this.mass = mass;
this.skin_color=skin_color; this.skin_color = skin_color;
} }
} }
@ -32,64 +32,71 @@ console.log('personnage.js loaded');
// ${error.message}`); // ${error.message}`);
// }); // });
function remplissage(json){ function remplissage(json) {
console.log(json.results[0]); console.log(json.results[0]);
// api_call(API_URL+ "/planets/1", (response) => { // api_call(API_URL+ "/planets/1", (response) => {
// console.log(response); // console.log(response);
// NAME.innerText = results[i].name; // NAME.innerText = results[i].name;
// }); // });
PERSONNAGES.innerHTML = ''; PERSONNAGES.innerHTML = '';
const PERPAGE = json.results.length; const PERPAGE = json.results.length;
const previousUrl = json.previous; const previousUrl = json.previous;
const nextUrl = json.next; const nextUrl = json.next;
console.log(previousUrl); console.log(previousUrl);
console.log(nextUrl); console.log(nextUrl);
for (let i = 0; i < PERPAGE; i++) { for (let i = 0; i < PERPAGE; i++) {
const urlbirth_year = json.results[i].birth_year; const urlbirth_year = json.results[i].birth_year;
const urleye_colo=json.results[i].eye_colo; const urleye_colo = json.results[i].eye_colo;
const urlgender=json.results[i].gender; const urlgender = json.results[i].gender;
const urlhair_color=json.results[i].hair_color; const urlhair_color = json.results[i].hair_color;
const urlheight = json.results[i].height; const urlheight = json.results[i].height;
const urlmass=json.results[i].mass; const urlmass = json.results[i].mass;
const urlskin_color= json.results[i].skin_color; const urlskin_color = json.results[i].skin_color;
const urlname= json.results[i].name; const urlname = json.results[i].name;
const urlhomeworld=json.results[i].homeworld; const urlhomeworld = json.results[i].homeworld;
const urlfilms=json.results[i].films; const urlfilms = json.results[i].films;
// const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color); // const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color);
// console.log(gens); // console.log(gens);
//Appel Api pour les planetes : //Appel Api pour les planetes :
PERSONNAGES.innerHTML += PERSONNAGES.innerHTML +=
`<section class="resultat accordeon_item"> `<section class="resultat accordeon_item">
<h1 class="accordeon_item_header">${urlname}</h1> <h1 class="accordeon_item_header">${urlname}</h1>
<div class="accordeon_item_body"> <div class="accordeon_item_body">
<div class="column1"> <div class="column1">
<div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div> <div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div>
<div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div> <div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div>
<div id=genre>Genre : ${urlgender}</div> <div id=genre>Genre : ${urlgender}</div>
<div id=couleurCheveux> Couleur des Cheveux : ${urlhair_color} </div> <div id=couleurCheveux> Couleur des Cheveux : ${urlhair_color} </div>
<div id= poids> Poids du personnage : ${urlmass} kg</div> <div id= poids> Poids du personnage : ${urlmass} kg</div>
<div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div> <div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div>
</div> </div>
<div class="column2"> Planète de Naissance : ${urlhomeworld}</div> <div class="column2"> Planète de Naissance : ${urlhomeworld}</div>
<div class="column3"> Film où je suis présent : ${urlfilms}</div> <div class="column3"> Film où je suis présent : ${urlfilms}</div>
</div> </div>
</section>`; </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');

8
scripts/planets.js
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);