diff --git a/films.html b/films.html index 7d3e2dd..d6130e0 100644 --- a/films.html +++ b/films.html @@ -19,15 +19,63 @@ -
- - - - - - -
-
+
+
+
+

+

(Cliquez ici pour étendre)

+
+
+
+
+
+
+
+
+

(Cliquez ici pour étendre)

+
+
+
+
+
+
+
+
+

Return of the Jedi

(Cliquez ici pour étendre)

+
+
+
+
+
+
+
+
+

The Phantom Menace

(Cliquez ici pour étendre)

+
+
+
+
+
+
+
+
+

Attack of the Clones

(Cliquez ici pour étendre)

+
+
+
+
+
+
+
+
+

Revenge of the Sith

(Cliquez ici pour étendre)

+
+
+
+
+
+
+
\ No newline at end of file diff --git a/scripts/films.js b/scripts/films.js index 2831a5e..7bf93bd 100644 --- a/scripts/films.js +++ b/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 +=`

${EPISODES.title}

- ` - } - -}) - -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 +=` -

Episode : ${EPISODE1.episode_id}

-

Directeur : ${EPISODE1.director}

-

Producteur : ${EPISODE1.producer}

-

Date de Sortie : ${EPISODE1.release_date}

-` + ` } ,) -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 +=` -

${VAISSEAU.name}

- ` - } -} -,) - -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 +=` -

${ESPECE.name}

- ` - -} -}) - - -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 +=` -

${EPISODE2.episode_id}

-

${EPISODE2.director}

-

${EPISODE2.producer}

-

${EPISODE2.release_date}

+ DEPLIE.innerHTML +=` +

${EPISODES.title}

+

Episode : ${EPISODES.episode_id}

+

Directeur : ${EPISODES.director}

+

Producteur : ${EPISODES.producer}

+

Date de Sortie : ${EPISODES.release_date}

` } - ,) + /*for(let index = 0; index <5; index++){ + FILMS.innerHTML +=` +

Espèces : ${EPISODES.species[index]}

+ ` + } + for(let index = 0; index<8; index++){ + FILMS.innerHTML +=` +

Vaisseaux : ${EPISODES.starships[index]}

+ ` + }*/ + +,) }) }) diff --git a/scripts/planets.js b/scripts/planets.js index 03436ff..c2d23bc 100644 --- a/scripts/planets.js +++ b/scripts/planets.js @@ -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 += - `
+ planetes.innerHTML += + `

${nom}

@@ -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 = ``; - let currentButton = `${currentPage}`; - let nextButton = ``; - 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'); diff --git a/scripts/util.js b/scripts/util.js index 9397675..446b1ee 100644 --- a/scripts/util.js +++ b/scripts/util.js @@ -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 = ``; + let currentButton = `${currentPage}`; + let nextButton = ``; + + 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); + }); +} diff --git a/styles/style.css b/styles/style.css index d3121a3..0e25c4e 100644 --- a/styles/style.css +++ b/styles/style.css @@ -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; -} \ No newline at end of file +.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; + }