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

Merge pull request #12 from rasoirnoir/films 

ajout de laccordeon
This commit is contained in:
William Noris 2021-10-19 19:28:14 +02:00 committed by GitHub
parent 1c9f4c76dd 4bd53c7636
commit aa221ed170
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 144 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
films.html
View File

@ -19,15 +19,63 @@
</ul>
</nav>
</section>
<section id = "reponses-films"> </section>
<button id = "deploiement-films">Click pour le détail</button>
<button id = "deploiement-films2">Click pour le détail</button>
<button id = "deploiement-films3">Click pour le détail</button>
<button id = "deploiement-films4">Click pour le détail</button>
<button id = "deploiement-films5">Click pour le détail</button>
<button id = "deploiement-films6">Click pour le détail</button>
<div class = "vaisseaux-films"></div>
<div class = "especes-films"></div>
<div class='accordeon'>
<div class='accordeon_item'>
<div id="1" class='accordeon_item_header'>
<h2 class ="titres"></h2>
<p>(Cliquez ici pour étendre)</p>
</div>
<div class="accordeon_item_body">
<div class="accordeon_item_body_content">
</div>
</div>
</div>
<div class='accordeon_item'>
<div id="2"class='accordeon_item_header'>
<h2 class ="titres"></h2><p>(Cliquez ici pour étendre)</p>
</div>
<div class="accordeon_item_body">
<div class="accordeon_item_body_content">
</div>
</div>
</div>
<div class='accordeon_item'>
<div id="3" class='accordeon_item_header'>
<h4>Return of the Jedi</h4><p>(Cliquez ici pour étendre)</p>
</div>
<div class="accordeon_item_body">
<div class="accordeon_item_body_content">
</div>
</div>
</div>
<div class='accordeon_item'>
<div id="4"class='accordeon_item_header'>
<h4>The Phantom Menace</h4><p>(Cliquez ici pour étendre)</p>
</div>
<div class="accordeon_item_body">
<div class="accordeon_item_body_content">
</div>
</div>
</div>
<div id="5" class='accordeon_item'>
<div class='accordeon_item_header'>
<h4>Attack of the Clones</h4><p>(Cliquez ici pour étendre)</p>
</div>
<div class="accordeon_item_body">
<div class="accordeon_item_body_content">
</div>
</div>
</div>
<div class='accordeon_item'>
<div id="6" class='accordeon_item_header'>
<h4>Revenge of the Sith</h4><p>(Cliquez ici pour étendre)</p>
</div>
<div class="accordeon_item_body">
<div class="accordeon_item_body_content">
</div>
</div>
</div>
</div>
<div class = "image-films"></div>
</body>
</html>

140
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
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
})
.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
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();
})
.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);
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
accordeonItemHeader.forEach(accordeonItemHeader =>{
accordeonItemHeader.addEventListener("click", event => {
VAISSEAUX.innerHTML +=`
<p class= "Nom des Vaisseaux">${VAISSEAU.name}</p>
`
}
}
,)
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];
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);
accordeonItemHeader.classList.toggle("active");
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) => {
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();
})
.then(afficherFilms => {
/*console.log(afficherFilms);
for(let index = 0; index <6; index++){
console.log(afficherFilms.results[index]); */
const EPISODE2 = afficherFilms;
console.log(EPISODE2);
return response.json(); // sous format json
})
.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>
`
}*/
,)
})
})

66
styles/style.css
View File

@ -7,7 +7,7 @@
margin: 0;
padding: 0;
font-family: 'star-wars', serif;
color : #FFF;
color : #000;
}
.titre a{
@ -23,12 +23,14 @@
.ul-menu{
list-style-type: none;
font-size: large;
color : #FFF;
text-decoration: underline;
text-decoration-color: #ffe81f;
}
.ul-menu li{
display: inline;
color : #FFF;
float: left;
margin: 1em;
font-size: large;
@ -38,6 +40,7 @@
.ul-menu li a{
display: block;
color : #FFF;
padding: 5px;
text-align: center;
font-size: large;
@ -57,35 +60,42 @@ div.image-films {
content: url("../assets/imgs/mando.png");
}
#reponses-films {
color : #FFF;
float: left;
margin-top : 200px;
margin-left:-350px;
}
#deploiement-films2 {
.accordeon {
color : #000;
float: left;
margin-top : 200px;
margin-top : 100px;
margin-left: -350px;
}
#deploiement-films3 {
.accordeon_item{
background-color:#ffff;
margin:2rem 0;
border-radius: 1rem;
box-shadow: 1px 1px 30px rgb(196, 196, 196) ;
padding-top: 5px;
}
.accordeon_item_header{
padding: 0.5rem 1rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordeon_item_body{
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordeon_item_body_content{
color : #000;
float: left;
margin-top : 200px;
}
#deploiement-films4 {
color : #000;
float: left;
margin-top : 200px;
}
#deploiement-films5 {
color : #000;
float: left;
margin-top : 200px;
}
#deploiement-films6 {
color : #000;
float: left;
margin-top : 200px;
}
padding: 1.5rem;
line-height: 1.5rem;
}
.accordeon_item_header.active + .accordeon_item_body{
max-height: 200px;
}