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

Merge pull request #15 from rasoirnoir/films

Browse source 
Films
This commit is contained in:
William Noris 2021-10-20 10:38:36 +02:00 • committed by GitHub
commit ab2d327c76
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 46 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
films.html
View file

@ -21,68 +21,10 @@
</ul>
</nav>
</section>
<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>
<section id="resultats" class="accordeon">
</section>
<div class="image-films"></div>
</body>

3
index.html
View file

@ -18,6 +18,9 @@
</ul>
</nav>
</section>
<h1 id = "bienvenue">bienvenue</h1>
<p id = "presentation">Bienvenue sur la Star Wars database,
utilisez le menu pour vous déplacer</p>
</body>
</html>

83
scripts/films.js
View file

@ -1,68 +1,31 @@
const { div } = require("prelude-ls");
import { api_call } from './util';
const FILMS = document.getElementsByClassName('accordeon');
const VAISSEAUX = document.getElementById('vaisseaux-films');
const ESPECES = document.getElementById('especes-films');
const TITRE = document.getElementsByClassName('titres');
console.log(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
const EPISODES = afficherFilms; // on déclare qu'un épisode est toujours la fonction avec sa boucle
console.log(EPISODES);
TITRE.innerHTML +=`
<p class= "titre">${EPISODES.title}</p>
`
}
,)
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 films = document.getElementById("resultats");
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(afficherFilms => { // on affiche ensuite les films
const EPISODES = afficherFilms; // on déclare qu'un épisode est toujours la fonction avec sa boucle
function remplissage(EPISODES){
console.log(EPISODES);
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(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">
<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>
</section>`
}
/*for(let index = 0; index <5; index++){
FILMS.innerHTML +=`
<p class ="especes"> Espèces : ${EPISODES.species[index]}</p>
`
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
accordeonItemHeader.forEach(accordeonItemHeader =>{
accordeonItemHeader.addEventListener("click", event => {
accordeonItemHeader.classList.toggle("active");
})
})
}
for(let index = 0; index<8; index++){
FILMS.innerHTML +=`
<p class= "vaisseaux"> Vaisseaux : ${EPISODES.starships[index]}</p>
`
}*/
,)
})
})
api_call(API_URL, remplissage);

19
styles/style.css
View file

@ -75,14 +75,21 @@ body{
/* border-radius: 10%; */
}
/* div.image-films {
#bienvenue{
text-align: center;
background-color: transparent;
margin-top: -170px;
margin-left: auto;
width: 30%;
content: url("../assets/imgs/mando.png");
font-size: 100px;
color :var(--jaune) ;
text-decoration: underline;
text-decoration-color: var(--jaune) ;
}
#presentation {
text-align: center;
background-color: transparent;
font-size: 40px;
color :var(--jaune)
}
} */
div.image-films {
background-color: transparent;
width: 30%;