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

Merge pull request #12 from rasoirnoir/films

Browse source 
ajout de laccordeon
This commit is contained in:
William Noris 2021-10-19 19:28:14 +02:00 • committed by GitHub
commit aa221ed170
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 144 additions and 140 deletions
Download patch file Download diff file Expand all files Collapse all files

154
scripts/films.js
View file

@ -1,122 +1,68 @@
const FILMS = document.getElementById('reponses-films');
const { div } = require("prelude-ls");
const FILMS = document.getElementsByClassName('accordeon');
const VAISSEAUX = document.getElementById('vaisseaux-films');
const ESPECES = document.getElementById('especes-films');
const DEPLIE = document.getElementById ('deploiement-films');
const DEPLIE2 = document.getElementById ('deploiement-films2');
const DEPLIE3 = document.getElementById ('deploiement-films3');
const DEPLIE4 = document.getElementById ('deploiement-films4');
const DEPLIE5 = document.getElementById ('deploiement-films5');
const DEPLIE6 = document.getElementById ('deploiement-films6');
const TITRE = document.getElementsByClassName('titres');
console.log(FILMS);
const API_URL = "https://swapi.dev/api/films/"; // déclare la localisation de la liste des films
fetch(API_URL) // recupère la liste des films
.then((response) => { // retourne une reponse
const API_URL = "https://swapi.dev/api/films/";
fetch(API_URL + target.id)
.then((response) => { // retourne une reponse
console.log(response);
return response.json(); // sous format json
return response.json(); // sous format json
})
.then(afficherFilms => { // on affiche ensuite les films
console.log(afficherFilms);
for(let index = 0; index <6; index++){ // on sait qu'il y en a 6, donc une boucle pour les afficher tous
console.log(afficherFilms.results[index]);
const EPISODES = afficherFilms.results[index]; // on déclare qu'un épisode est toujours la fonction avec sa boucle
.then(afficherFilms => { // on affiche ensuite les films
const EPISODES = afficherFilms; // on déclare qu'un épisode est toujours la fonction avec sa boucle
console.log(EPISODES);
FILMS.innerHTML +=`
TITRE.innerHTML +=`
<p class= "titre">${EPISODES.title}</p>
`
}
})
DEPLIE.addEventListener('click', ()=>{
const API_URL_1 = "https://swapi.dev/api/films/1";
fetch(API_URL_1)
.then((response1) => {
console.log(response1);
return response1.json();
})
.then(afficherFilms => {
/*console.log(afficherFilms);
for(let index = 0; index <6; index++){
console.log(afficherFilms.results[index]); */
const EPISODE1 = afficherFilms;
console.log(EPISODE1);
FILMS.innerHTML +=`
<p class= "episode">Episode : ${EPISODE1.episode_id}</p>
<p class= "directeur">Directeur : ${EPISODE1.director}</p>
<p class= "producteur">Producteur : ${EPISODE1.producer}</p>
<p class= "sortie">Date de Sortie : ${EPISODE1.release_date}</p>
`
`
}
,)
const API_URL_VAISSEAUX = "https://swapi.dev/api/starships/"
fetch(API_URL_VAISSEAUX)
.then((response2)=>{
console.log(response2);
return response2.json();
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
accordeonItemHeader.forEach(accordeonItemHeader =>{
accordeonItemHeader.addEventListener("click", event => {
console.log(event.target.id);
console.log(event.target.nextSibling)
console.log(event.target.nextSibling.nextElementSibling)
console.log(event.target.nextSibling.nextElementSibling.children)
const DEPLIE = event.target.nextSibling.nextElementSibling.children[0];
accordeonItemHeader.classList.toggle("active");
const API_URL = "https://swapi.dev/api/films/"; // déclare la localisation de la liste des films
fetch(API_URL + event.target.id) // recupère la liste des films
.then((response) => { // retourne une reponse
console.log(response);
return response.json(); // sous format json
})
.then(afficherVaisseaux =>{
console.log(afficherVaisseaux);
for (let index = 0; index <36; index++){
console.log(afficherVaisseaux.results[index]);
const VAISSEAU = afficherVaisseaux.results[index];
console.log(VAISSEAU);
VAISSEAUX.innerHTML +=`
<p class= "Nom des Vaisseaux">${VAISSEAU.name}</p>
`
}
}
,)
const API_URL_ESPECES = "https://swapi.dev/api/species/"
fetch(API_URL_ESPECES)
.then((response3)=>{
console.log(response3);
return response3.json();
})
.then(afficherEspeces =>{
console.log(afficherEspeces);
for (let index = 0; index <37; index++){
console.log(afficherEspeces.results[index]);
const ESPECE = afficherEspeces.results[index];
console.log(ESPECE);
ESPECES.innerHTML +=`
<p class= "Nom des Espèces">${ESPECE.name}</p>
`
}
})
DEPLIE2.addEventListener('click', ()=>{
const API_URL_2 = "https://swapi.dev/api/films/2";
fetch(API_URL_2)
.then((response) => {
console.log(response);
return response.json();
})
.then(afficherFilms => {
/*console.log(afficherFilms);
for(let index = 0; index <6; index++){
console.log(afficherFilms.results[index]); */
const EPISODE2 = afficherFilms;
console.log(EPISODE2);
.then(afficherFilms => { // on affiche ensuite les films
const EPISODES = afficherFilms; // on déclare qu'un épisode est toujours la fonction avec sa boucle
console.log(EPISODES);
FILMS.innerHTML +=`
<p class= "titre">${EPISODE2.episode_id}</p>
<p class= "titre">${EPISODE2.director}</p>
<p class= "titre">${EPISODE2.producer}</p>
<p class= "titre">${EPISODE2.release_date}</p>
DEPLIE.innerHTML +=`
<p class= "titre">${EPISODES.title}</p>
<p class= "episode">Episode : ${EPISODES.episode_id}</p>
<p class= "directeur">Directeur : ${EPISODES.director}</p>
<p class= "producteur">Producteur : ${EPISODES.producer}</p>
<p class= "sortie">Date de Sortie : ${EPISODES.release_date}</p>
`
}
,)
/*for(let index = 0; index <5; index++){
FILMS.innerHTML +=`
<p class ="especes"> Espèces : ${EPISODES.species[index]}</p>
`
}
for(let index = 0; index<8; index++){
FILMS.innerHTML +=`
<p class= "vaisseaux"> Vaisseaux : ${EPISODES.starships[index]}</p>
`
}*/
,)
})
})