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

Merge branch 'dev' into characters

Browse Source
This commit is contained in:
William Noris 2021-10-19 19:29:55 +02:00 committed by GitHub
commit adc9e4af55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 201 additions and 171 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> </ul>
</nav> </nav>
</section> </section>
<section id = "reponses-films"> </section> <div class='accordeon'>
<button id = "deploiement-films">Click pour le détail</button> <div class='accordeon_item'>
<button id = "deploiement-films2">Click pour le détail</button> <div id="1" class='accordeon_item_header'>
<button id = "deploiement-films3">Click pour le détail</button> <h2 class ="titres"></h2>
<button id = "deploiement-films4">Click pour le détail</button> <p>(Cliquez ici pour étendre)</p>
<button id = "deploiement-films5">Click pour le détail</button> </div>
<button id = "deploiement-films6">Click pour le détail</button> <div class="accordeon_item_body">
<div class = "vaisseaux-films"></div> <div class="accordeon_item_body_content">
<div class = "especes-films"></div> </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> <div class = "image-films"></div>
</body> </body>
</html> </html>

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 VAISSEAUX = document.getElementById('vaisseaux-films');
const ESPECES = document.getElementById('especes-films'); const ESPECES = document.getElementById('especes-films');
const DEPLIE = document.getElementById ('deploiement-films'); const TITRE = document.getElementsByClassName('titres');
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');
console.log(FILMS); console.log(FILMS);
const API_URL = "https://swapi.dev/api/films/"; // déclare la localisation de la liste des films const API_URL = "https://swapi.dev/api/films/";
fetch(API_URL) // recupère la liste des films fetch(API_URL + target.id)
.then((response) => { // retourne une reponse .then((response) => { // retourne une reponse
console.log(response); console.log(response);
return response.json(); // sous format json return response.json(); // sous format json
}) })
.then(afficherFilms => { // on affiche ensuite les films .then(afficherFilms => { // on affiche ensuite les films
console.log(afficherFilms); const EPISODES = afficherFilms; // on déclare qu'un épisode est toujours la fonction avec sa boucle
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
console.log(EPISODES); console.log(EPISODES);
FILMS.innerHTML +=` TITRE.innerHTML +=`
<p class= "titre">${EPISODES.title}</p> <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/" const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
fetch(API_URL_VAISSEAUX) accordeonItemHeader.forEach(accordeonItemHeader =>{
.then((response2)=>{ accordeonItemHeader.addEventListener("click", event => {
console.log(response2);
return response2.json(); 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 =>{ .then(afficherFilms => { // on affiche ensuite les films
console.log(afficherVaisseaux); const EPISODES = afficherFilms; // on déclare qu'un épisode est toujours la fonction avec sa boucle
for (let index = 0; index <36; index++){ console.log(EPISODES);
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);
FILMS.innerHTML +=` DEPLIE.innerHTML +=`
<p class= "titre">${EPISODE2.episode_id}</p> <p class= "titre">${EPISODES.title}</p>
<p class= "titre">${EPISODE2.director}</p> <p class= "episode">Episode : ${EPISODES.episode_id}</p>
<p class= "titre">${EPISODE2.producer}</p> <p class= "directeur">Directeur : ${EPISODES.director}</p>
<p class= "titre">${EPISODE2.release_date}</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>
`
}*/
,)
}) })
}) })

46
scripts/planets.js
View File

@ -1,11 +1,10 @@
import { api_call, API_URL, getPage } from "./util"; import { api_call, API_URL, createPagination } from "./util";
const planetes = document.getElementById("resultats"); const planetes = document.getElementById("resultats");
console.log('planet.js loaded');
function remplissage(results) {
function remplissage(results){
planetes.innerHTML = ""; planetes.innerHTML = "";
@ -13,7 +12,7 @@ function remplissage(results){
const nextUrl = results.next; const nextUrl = results.next;
const tabResults = results.results; const tabResults = results.results;
for(resultPlanet of tabResults){ for (resultPlanet of tabResults) {
const nom = resultPlanet.name; const nom = resultPlanet.name;
const diametre = resultPlanet.diameter; const diametre = resultPlanet.diameter;
const climate = resultPlanet.climate; const climate = resultPlanet.climate;
@ -33,8 +32,8 @@ function remplissage(results){
const tabFilms = resultPlanet.films; const tabFilms = resultPlanet.films;
planetes.innerHTML += planetes.innerHTML +=
`<section class="resultat"> `<section class="resultat">
<h1 class="titreAccordeon">${nom}</h1> <h1 class="titreAccordeon">${nom}</h1>
<div class="accordeon"> <div class="accordeon">
<div class="1"> <div class="1">
@ -49,35 +48,10 @@ function remplissage(results){
} }
//Pagination //Pagination
console.log("Url précédente : " + previousUrl); createPagination(previousUrl, nextUrl, planetes, remplissage);
console.group("Url suivante : " + nextUrl);
const currentPage = (previousUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(previousUrl)) + 1);
console.log("Page courante : " + currentPage);
let firstPage = false;
let lastPage = false;
if(previousUrl == null) firstPage = true;
if(nextUrl == null) lastPage = true;
let previousButton = `<button id="prevButton">Page précédente</button>`;
let currentButton = `${currentPage}`;
let nextButton = `<button id="nextButton">Page suivante</button>`;
if(!firstPage) {
planetes.innerHTML += previousButton;
console.log(document.getElementById("prevButton"));
document.getElementById("prevButton").addEventListener("click", () => {
api_call(previousUrl, remplissage);
});
}
planetes.innerHTML += currentButton;
if(!lastPage) {
planetes.innerHTML += nextButton;
document.getElementById("nextButton").addEventListener("click", () => {
api_call(nextUrl, remplissage);
});
};
} }
api_call(API_URL + "/planets", remplissage); api_call(API_URL + "/planets", remplissage);
console.log('planet.js loaded');

48
scripts/util.js
View File

@ -26,7 +26,7 @@ export const api_call = (url, callback) => {
* @param {string} url l'url d'un résultat multipage (qui se termine par ?page=2 par exemple) * @param {string} url l'url d'un résultat multipage (qui se termine par ?page=2 par exemple)
* @returns Le numéro de la page de l'url * @returns Le numéro de la page de l'url
*/ */
export const getPage = (url) => { const getPage = (url) => {
tabUrl = url.split('/'); tabUrl = url.split('/');
pageEgal = tabUrl[tabUrl.length - 1]; pageEgal = tabUrl[tabUrl.length - 1];
tabPageEgal = pageEgal.split('='); tabPageEgal = pageEgal.split('=');
@ -34,3 +34,49 @@ export const getPage = (url) => {
return numeroPage; return numeroPage;
} }
/**
* Ajoutes des boutons de pagination à un élément
* @param {string} prevUrl l'url de la page précédente
* @param {string} nextUrl l'url de la page suivante
* @param {object} elementParent L'objet parent dans lequel ajouter les boutons
*/
export const createPagination = (prevUrl, nextUrl, elementParent, remplissage) => {
console.log("Url précédente : " + prevUrl);
console.group("Url suivante : " + nextUrl);
const currentPage = (prevUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(prevUrl)) + 1);
console.log("Page courante : " + currentPage);
let firstPage = false;
let lastPage = false;
if (prevUrl == null) firstPage = true;
if (nextUrl == null) lastPage = true;
let previousButton = `<button id="prevButton">Page précédente</button>`;
let currentButton = `${currentPage}`;
let nextButton = `<button id="nextButton">Page suivante</button>`;
elementParent.innerHTML += previousButton;
elementParent.innerHTML += currentButton;
elementParent.innerHTML += nextButton;
if(firstPage){
document.getElementById("prevButton").hidden = true;
}
else{
document.getElementById("prevButton").hidden = false;
}
if(lastPage){
document.getElementById("nextButton").hidden = true;
}
else{
document.getElementById("nextButton").hidden = false;
}
document.getElementById("prevButton").addEventListener("click", () => {
api_call(prevUrl, remplissage);
});
document.getElementById("nextButton").addEventListener("click", () => {
api_call(nextUrl, remplissage);
});
}

58
styles/style.css
View File

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