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

fix accordeons

This commit is contained in:
William Noris 2021-10-20 10:53:02 +02:00
parent 8793fd5c0c
commit 9773501631
3 changed files with 94 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
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
function remplissage(EPISODES){
function remplissage(EPISODES) {
console.log(EPISODES);
for(index in EPISODES.results){
films.innerHTML +=`
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">
<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.forEach(accordeonItemHeader => {
accordeonItemHeader.addEventListener("click", event => {
accordeonItemHeader.classList.toggle("active");
})
})
}
})
}
api_call(API_URL, remplissage);

35
scripts/personnages.js
View File

@ -1,17 +1,17 @@
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) {
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;
this.skin_color = skin_color;
}
}
@ -32,7 +32,7 @@ console.log('personnage.js loaded');
// ${error.message}`);
// });
function remplissage(json){
function remplissage(json) {
console.log(json.results[0]);
// api_call(API_URL+ "/planets/1", (response) => {
@ -54,15 +54,15 @@ console.log('personnage.js loaded');
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 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 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);
@ -86,10 +86,17 @@ console.log('personnage.js loaded');
</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');

8
scripts/planets.js
View File

@ -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);