js accordeon
This commit is contained in:
HediMjid
parent
44f77589e1
commit
438c3ba8b2
@ -27,41 +27,42 @@ async function getMovies() {
|
|||||||
// Boucle pour parser les films
|
// Boucle pour parser les films
|
||||||
document.getElementById('container').innerHTML += `
|
document.getElementById('container').innerHTML += `
|
||||||
<section class="card">
|
<section class="card">
|
||||||
<h2>${TITRE}</h2>
|
<h2 style="display: inline;">${TITRE}</h2> <a href="#" class="etendre">+</a>
|
||||||
|
<div class="details">
|
||||||
|
<div class="data">
|
||||||
|
<h3> Episode ID : </h3>
|
||||||
|
<p>${EPISODE}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<h3> Episode ID : </h3>
|
<h3> Opening Crawl : </h3>
|
||||||
<p>${EPISODE}</p>
|
<p>${OPENING}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<h3> Opening Crawl : </h3>
|
<h3>Director : </h3>
|
||||||
<p>${OPENING}</p>
|
<p>${DIRECTOR}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<h3>Director : </h3>
|
<h3>Producer(s) :</h3>
|
||||||
<p>${DIRECTOR}</p>
|
<p> ${PRODUCER}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<h3>Producer(s) :</h3>
|
<h3>Release Date :</h3>
|
||||||
<p> ${PRODUCER}</p>
|
<p>${DATE}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<h3>Release Date :</h3>
|
<button class="starships" value="${FILM.results[i].starships}">Voir les vaisseaux</button>
|
||||||
<p>${DATE}</p>
|
<div id="detailsStarships${i}"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<button class="starships" value="${FILM.results[i].starships}">Voir les vaisseaux</button>
|
<button class="species" value="${FILM.results[i].species}">Voir les especes</button>
|
||||||
<div id="detailsStarships${i}"></div>
|
<div id="detailsSpecies${i}"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="data">
|
|
||||||
<button class="species" value="${FILM.results[i].species}">Voir les especes</button>
|
|
||||||
<div id="detailsSpecies${i}"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
`;
|
`;
|
||||||
@ -84,6 +85,15 @@ async function getMovies() {
|
|||||||
getSpecies(BUTTON1.value,BUTTON1.nextElementSibling.id);
|
getSpecies(BUTTON1.value,BUTTON1.nextElementSibling.id);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const accordion = document.getElementsByClassName('etendre');
|
||||||
|
for (i=0; i<accordion.length; i++) {
|
||||||
|
accordion[i].addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
//console.log('this.nextElementSibling');
|
||||||
|
this.nextElementSibling.classList.toggle('active');
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fonction pour afficher les vaisseaux
|
// Fonction pour afficher les vaisseaux
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
const API_URL = "https://swapi.dev/api/people/?page=";
|
const API_URL = "https://swapi.dev/api/people/?page=";
|
||||||
let pageEnCours = 1;
|
let pageEnCours = 1;
|
||||||
|
let tableau_perso = new Array();
|
||||||
|
|
||||||
class People {
|
class People {
|
||||||
constructor(name, height, mass, hair_color, skin_color, eye_color, birth_year, gender, homeworld, index, films) {
|
constructor(name, height, mass, hair_color, skin_color, eye_color, birth_year, gender, homeworld, index, films) {
|
||||||
@ -19,7 +20,7 @@ class People {
|
|||||||
affichePeople () {
|
affichePeople () {
|
||||||
document.getElementById('container').innerHTML += `
|
document.getElementById('container').innerHTML += `
|
||||||
<section class="card">
|
<section class="card">
|
||||||
<h2 style="display: inline;">Name : ${this.name} </h2><a href="#" class="etendre">+</a>
|
<h2 style="display: inline;">${this.name} </h2><a href="#" class="etendre">+</a>
|
||||||
<div class="details">
|
<div class="details">
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<h3>Né sur :</h3>
|
<h3>Né sur :</h3>
|
||||||
@ -67,6 +68,10 @@ async function getPeople() {
|
|||||||
const peoples = await fetch(API_URL+pageEnCours);
|
const peoples = await fetch(API_URL+pageEnCours);
|
||||||
const people = await peoples.json();
|
const people = await peoples.json();
|
||||||
const total_pages = people.count/people.results.length;
|
const total_pages = people.count/people.results.length;
|
||||||
|
tableau_perso = [];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// on vide le div
|
// on vide le div
|
||||||
document.getElementById('container').innerHTML = "";
|
document.getElementById('container').innerHTML = "";
|
||||||
@ -88,6 +93,7 @@ async function getPeople() {
|
|||||||
// console.log(film.title);
|
// console.log(film.title);
|
||||||
// movies += `<p>${film.title}</p>`;
|
// movies += `<p>${film.title}</p>`;
|
||||||
// }
|
// }
|
||||||
|
tableau_perso.push({name:people.results[i].name,height:people.results[i].height,mass:people.results[i].mass,hair_color:people.results[i].hair_color,skin_color:people.results[i].skin_color,eye_color:people.results[i].eye_color,birth_year:people.results[i].birth_year,gender:people.results[i].gender,homeworld:planet.name,index:i,films:people.results[i].films});
|
||||||
const perso = new People(people.results[i].name,people.results[i].height,people.results[i].mass,people.results[i].hair_color,people.results[i].skin_color,people.results[i].eye_color,people.results[i].birth_year,people.results[i].gender,planet.name,i,people.results[i].films);
|
const perso = new People(people.results[i].name,people.results[i].height,people.results[i].mass,people.results[i].hair_color,people.results[i].skin_color,people.results[i].eye_color,people.results[i].birth_year,people.results[i].gender,planet.name,i,people.results[i].films);
|
||||||
perso.affichePeople();
|
perso.affichePeople();
|
||||||
}
|
}
|
||||||
@ -102,11 +108,13 @@ async function getPeople() {
|
|||||||
|
|
||||||
const accordion = document.getElementsByClassName('etendre');
|
const accordion = document.getElementsByClassName('etendre');
|
||||||
for (i=0; i<accordion.length; i++) {
|
for (i=0; i<accordion.length; i++) {
|
||||||
accordion[i].addEventListener('click', function () {
|
accordion[i].addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
//console.log('this.nextElementSibling');
|
//console.log('this.nextElementSibling');
|
||||||
this.nextElementSibling.classList.toggle('active');
|
this.nextElementSibling.classList.toggle('active');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// function pour afficher les peoples et leur correspondances
|
// function pour afficher les peoples et leur correspondances
|
||||||
@ -115,7 +123,7 @@ async function getFilms(liste,div) {
|
|||||||
console.log(url);
|
console.log(url);
|
||||||
document.getElementById(div).innerHTML = "";
|
document.getElementById(div).innerHTML = "";
|
||||||
for(i=0;i<url.length;i++){
|
for(i=0;i<url.length;i++){
|
||||||
console.log(url[i]);
|
//console.log(url[i]);
|
||||||
const films = await fetch(url[i]);
|
const films = await fetch(url[i]);
|
||||||
const film = await films.json();
|
const film = await films.json();
|
||||||
//console.log(film);
|
//console.log(film);
|
||||||
@ -173,41 +181,19 @@ document.getElementById('myInput').addEventListener("keyup", function() {
|
|||||||
function searchPeople() {
|
function searchPeople() {
|
||||||
// Declare variables
|
// Declare variables
|
||||||
let query = myInput.value;
|
let query = myInput.value;
|
||||||
if(query.length>1){
|
// if(query.length>1){
|
||||||
getSearch(query);
|
// getSearch(query);
|
||||||
}else{
|
// }else{
|
||||||
getPeople();
|
// getPeople();
|
||||||
}
|
|
||||||
|
|
||||||
//let result = array.filter(user=>user.name.includes(query));
|
|
||||||
//console.log(result);
|
|
||||||
// document.getElementById('container').innerHTML = "";
|
|
||||||
// for(i=0;i<result.length;i++){
|
|
||||||
// document.getElementById('container').innerHTML += `<p>${result[i].name}</p>`;
|
|
||||||
// }
|
// }
|
||||||
}
|
//console.log(tableau_perso);
|
||||||
|
let results = tableau_perso.filter(user=>user.name.includes(query));
|
||||||
|
//console.log(result);
|
||||||
async function getSearch(query) {
|
|
||||||
document.getElementById('container').innerHTML = "";
|
document.getElementById('container').innerHTML = "";
|
||||||
const searchs = await fetch("https://swapi.dev/api/people/?search="+query);
|
for(i=0;i<results.length;i++){
|
||||||
const search = await searchs.json();
|
//document.getElementById('container').innerHTML += `<p>${result[i].name}</p>`;
|
||||||
console.log(search);
|
const perso = new People(results[i].name,results[i].height,results[i].mass,results[i].hair_color,results[i].skin_color,results[i].eye_color,results[i].birth_year,results[i].gender,results[i].homeworld,i,results[i].films);
|
||||||
for(i=0;i<search.count;i++){
|
perso.affichePeople();
|
||||||
const planets = await fetch(search.results[i].homeworld);
|
|
||||||
const planet = await planets.json();
|
|
||||||
|
|
||||||
const perso = new People(search.results[i].name,search.results[i].height,search.results[i].mass,search.results[i].hair_color,search.results[i].skin_color,search.results[i].eye_color,search.results[i].birth_year,search.results[i].gender,planet.name,i,search.results[i].films);
|
|
||||||
perso.affichePeople();
|
|
||||||
}
|
|
||||||
const BUTTONS = document.querySelectorAll('.films');
|
|
||||||
for(var i = 0;i < BUTTONS.length;i++){
|
|
||||||
let BUTTON = BUTTONS[i];
|
|
||||||
BUTTON.addEventListener("click", function() {
|
|
||||||
//console.log(BUTTON.nextElementSibling);
|
|
||||||
getFilms(BUTTON.value,BUTTON.nextElementSibling.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const accordion = document.getElementsByClassName('etendre');
|
const accordion = document.getElementsByClassName('etendre');
|
||||||
for (i=0; i<accordion.length; i++) {
|
for (i=0; i<accordion.length; i++) {
|
||||||
@ -216,9 +202,41 @@ async function getSearch(query) {
|
|||||||
this.nextElementSibling.classList.toggle('active');
|
this.nextElementSibling.classList.toggle('active');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// async function getSearch() {
|
||||||
|
// document.getElementById('container').innerHTML = "";
|
||||||
|
// const searchs = await fetch("https://swapi.dev/api/people/?search="+query);
|
||||||
|
// const search = await searchs.json();
|
||||||
|
// console.log(search);
|
||||||
|
// for(i=0;i<search.count;i++){
|
||||||
|
// const planets = await fetch(search.results[i].homeworld);
|
||||||
|
// const planet = await planets.json();
|
||||||
|
|
||||||
|
// const perso = new People(search.results[i].name,search.results[i].height,search.results[i].mass,search.results[i].hair_color,search.results[i].skin_color,search.results[i].eye_color,search.results[i].birth_year,search.results[i].gender,planet.name,i,search.results[i].films);
|
||||||
|
// perso.affichePeople();
|
||||||
|
// }
|
||||||
|
// const BUTTONS = document.querySelectorAll('.films');
|
||||||
|
// for(var i = 0;i < BUTTONS.length;i++){
|
||||||
|
// let BUTTON = BUTTONS[i];
|
||||||
|
// BUTTON.addEventListener("click", function() {
|
||||||
|
// //console.log(BUTTON.nextElementSibling);
|
||||||
|
// getFilms(BUTTON.value,BUTTON.nextElementSibling.id);
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// const accordion = document.getElementsByClassName('etendre');
|
||||||
|
// for (i=0; i<accordion.length; i++) {
|
||||||
|
// accordion[i].addEventListener('click', function () {
|
||||||
|
// //console.log('this.nextElementSibling');
|
||||||
|
// this.nextElementSibling.classList.toggle('active');
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
// initialisation de la page, pour un affichage au chargement
|
// initialisation de la page, pour un affichage au chargement
|
||||||
getPeople();
|
getPeople();
|
||||||
|
|||||||
@ -26,46 +26,48 @@ async function getPlanets() {
|
|||||||
|
|
||||||
document.getElementById('container').innerHTML += `
|
document.getElementById('container').innerHTML += `
|
||||||
<section class="card">
|
<section class="card">
|
||||||
<h2>${PLANET_NAME}</h2>
|
<h2 style="display: inline;">${PLANET_NAME}</h2> </h2><a href="#" class="etendre">+</a>
|
||||||
<div class="data">
|
<div class="details">
|
||||||
<h3>Rotation :</h3>
|
<div class="data">
|
||||||
<p>${ROTATION_PERIOD}</p>
|
<h3>Rotation :</h3>
|
||||||
</div>
|
<p>${ROTATION_PERIOD}</p>
|
||||||
<div>
|
|
||||||
<h3>ORBITAL :</h3>
|
|
||||||
<p>${ORBITAL_PERIOD}</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="data">
|
<div>
|
||||||
<h3>Diameter :</h3>
|
<h3>ORBITAL :</h3>
|
||||||
<p>${DIAMETER}</p>
|
<p>${ORBITAL_PERIOD}</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<h3>Diameter :</h3>
|
||||||
|
<p>${DIAMETER}</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<h3>Climate :</h3>
|
||||||
|
<p>${CLIMATE}</p>
|
||||||
|
</div>
|
||||||
|
<div class="data" >
|
||||||
|
<h3>Gravity : </h3>
|
||||||
|
<p>${GRAVITY}</p>
|
||||||
|
</div>
|
||||||
|
<div class="data" >
|
||||||
|
<h3>Terrain :</h3>
|
||||||
|
<p>${TERRAIN}</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<h3>Surface water : </h3>
|
||||||
|
<p>${SURFACE_WATER}</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<h3>Population :</h3
|
||||||
|
<p>${POPULATION}</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<button class="films" value="${PLANET.results[i].films}">Films</button>
|
||||||
|
<div id="detailsFilms${i}"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<h3>Climate :</h3>
|
<button class="residents" value="${PLANET.results[i].residents}">Résidents</button>
|
||||||
<p>${CLIMATE}</p>
|
<div id="detailsResidents${i}"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="data" >
|
|
||||||
<h3>Gravity : </h3>
|
|
||||||
<p>${GRAVITY}</p>
|
|
||||||
</div>
|
|
||||||
<div class="data" >
|
|
||||||
<h3>Terrain :</h3>
|
|
||||||
<p>${TERRAIN}</p>
|
|
||||||
</div>
|
|
||||||
<div class="data">
|
|
||||||
<h3>Surface water : </h3>
|
|
||||||
<p>${SURFACE_WATER}</p>
|
|
||||||
</div>
|
|
||||||
<div class="data">
|
|
||||||
<h3>Population :</h3
|
|
||||||
<p>${POPULATION}</p>
|
|
||||||
</div>
|
|
||||||
<div class="data">
|
|
||||||
<button class="films" value="${PLANET.results[i].films}">Films</button>
|
|
||||||
<div id="detailsFilms${i}"></div>
|
|
||||||
</div>
|
|
||||||
<div class="data">
|
|
||||||
<button class="residents" value="${PLANET.results[i].residents}">Résidents</button>
|
|
||||||
<div id="detailsResidents${i}"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -91,6 +93,14 @@ async function getPlanets() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const accordion = document.getElementsByClassName('etendre');
|
||||||
|
for (i=0; i<accordion.length; i++) {
|
||||||
|
accordion[i].addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
//console.log('this.nextElementSibling');
|
||||||
|
this.nextElementSibling.classList.toggle('active');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user