Merge branch 'dev' into characters
This commit is contained in:
William Noris
GitHub
commit
adc9e4af55
66
films.html
66
films.html
@ -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>
|
||||
154
scripts/films.js
154
scripts/films.js
@ -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>
|
||||
`
|
||||
}*/
|
||||
|
||||
,)
|
||||
})
|
||||
})
|
||||
|
||||
@ -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");
|
||||
|
||||
console.log('planet.js loaded');
|
||||
|
||||
|
||||
function remplissage(results){
|
||||
function remplissage(results) {
|
||||
|
||||
planetes.innerHTML = "";
|
||||
|
||||
@ -13,7 +12,7 @@ function remplissage(results){
|
||||
const nextUrl = results.next;
|
||||
const tabResults = results.results;
|
||||
|
||||
for(resultPlanet of tabResults){
|
||||
for (resultPlanet of tabResults) {
|
||||
const nom = resultPlanet.name;
|
||||
const diametre = resultPlanet.diameter;
|
||||
const climate = resultPlanet.climate;
|
||||
@ -33,8 +32,8 @@ function remplissage(results){
|
||||
const tabFilms = resultPlanet.films;
|
||||
|
||||
|
||||
planetes.innerHTML +=
|
||||
`<section class="resultat">
|
||||
planetes.innerHTML +=
|
||||
`<section class="resultat">
|
||||
<h1 class="titreAccordeon">${nom}</h1>
|
||||
<div class="accordeon">
|
||||
<div class="1">
|
||||
@ -49,35 +48,10 @@ function remplissage(results){
|
||||
}
|
||||
|
||||
//Pagination
|
||||
console.log("Url précédente : " + previousUrl);
|
||||
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);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
createPagination(previousUrl, nextUrl, planetes, remplissage);
|
||||
}
|
||||
|
||||
api_call(API_URL + "/planets", remplissage);
|
||||
|
||||
|
||||
console.log('planet.js loaded');
|
||||
|
||||
@ -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)
|
||||
* @returns Le numéro de la page de l'url
|
||||
*/
|
||||
export const getPage = (url) => {
|
||||
const getPage = (url) => {
|
||||
tabUrl = url.split('/');
|
||||
pageEgal = tabUrl[tabUrl.length - 1];
|
||||
tabPageEgal = pageEgal.split('=');
|
||||
@ -34,3 +34,49 @@ export const getPage = (url) => {
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
@ -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;
|
||||
@ -74,28 +77,41 @@ div.image-charactere {
|
||||
margin-left:-350px;
|
||||
}
|
||||
|
||||
#deploiement-films2 {
|
||||
.accordeon {
|
||||
color : #000;
|
||||
float: left;
|
||||
margin-top : 200px;
|
||||
margin-top : 100px;
|
||||
margin-left: -350px;
|
||||
}
|
||||
#deploiement-films3 {
|
||||
color : #000;
|
||||
float: left;
|
||||
margin-top : 200px;
|
||||
.accordeon_item{
|
||||
background-color:#ffff;
|
||||
margin:2rem 0;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 1px 1px 30px rgb(196, 196, 196) ;
|
||||
padding-top: 5px;
|
||||
}
|
||||
#deploiement-films4 {
|
||||
color : #000;
|
||||
float: left;
|
||||
margin-top : 200px;
|
||||
.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;
|
||||
}
|
||||
#deploiement-films5 {
|
||||
color : #000;
|
||||
float: left;
|
||||
margin-top : 200px;
|
||||
}
|
||||
#deploiement-films6 {
|
||||
color : #000;
|
||||
float: left;
|
||||
margin-top : 200px;
|
||||
}
|
||||
.accordeon_item_body{
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
}
|
||||
|
||||
.accordeon_item_body_content{
|
||||
color : #000;
|
||||
padding: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
|
||||
}
|
||||
|
||||
.accordeon_item_header.active + .accordeon_item_body{
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user