diff --git a/assets/image b/assets/image deleted file mode 100644 index e69de29..0000000 diff --git a/characters.html b/characters.html index 1616cee..828d8e9 100644 --- a/characters.html +++ b/characters.html @@ -23,19 +23,8 @@ - -
-
- - - -
-
- -
- -
+
diff --git a/films.html b/films.html index 82671d7..5e6f27d 100644 --- a/films.html +++ b/films.html @@ -21,18 +21,68 @@ - -
-
- - - -
-
- -
- -
+
+
+
+

+

(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)

+
+
+
+
+
+
+
diff --git a/index.html b/index.html index f5e8b53..4988142 100644 --- a/index.html +++ b/index.html @@ -18,9 +18,6 @@ -

bienvenue

-

Bienvenue sur la Star Wars database, - utilisez le menu pour vous déplacer

\ No newline at end of file diff --git a/planets.html b/planets.html index 2b027ae..d0761dc 100644 --- a/planets.html +++ b/planets.html @@ -22,14 +22,6 @@ -
-
- - - -
-
-
diff --git a/scripts/films.js b/scripts/films.js index f55f0f9..7bf93bd 100644 --- a/scripts/films.js +++ b/scripts/films.js @@ -1,33 +1,68 @@ -import { api_call } from './util'; +const { div } = require("prelude-ls"); -const films = document.getElementById("resultats"); +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 +=` +

${EPISODES.title}

+ ` +} +,) + +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 - -function remplissage(EPISODES) { - console.log(EPISODES); - - for (index in EPISODES.results) { - films.innerHTML += ` -
-

${EPISODES.results[index].title}

-
-
-

Episode : ${EPISODES.results[index].episode_id}

-

Directeur : ${EPISODES.results[index].director}

-

Producteur : ${EPISODES.results[index].producer}

-

Date de Sortie : ${EPISODES.results[index].release_date}

-
-
-
` +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 + console.log(EPISODES); + + DEPLIE.innerHTML +=` +

${EPISODES.title}

+

Episode : ${EPISODES.episode_id}

+

Directeur : ${EPISODES.director}

+

Producteur : ${EPISODES.producer}

+

Date de Sortie : ${EPISODES.release_date}

+ ` } - const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header"); - accordeonItemHeader.forEach(accordeonItemHeader => { - accordeonItemHeader.addEventListener("click", event => { - accordeonItemHeader.classList.toggle("active"); - }) - }) -} + /*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]}

+ ` + }*/ - -api_call(API_URL, remplissage); \ No newline at end of file +,) +}) +}) diff --git a/scripts/personnages.js b/scripts/personnages.js index 3017508..4414f55 100644 --- a/scripts/personnages.js +++ b/scripts/personnages.js @@ -1,18 +1,18 @@ -import { api_call, API_URL, createPagination } from "./util"; +import { api_call,API_URL } from "./util"; const PERSONNAGES = document.getElementById("resultats"); class People { - constructor(birth_year, eye_colo, gender, hair_color, height, mass, skin_color) { - this.birth_year = birth_year; - this.eye_colo = eye_colo; - this.gender = gender; - this.hair_color = hair_color; - this.height = height; - this.mass = mass; - this.skin_color = skin_color; - } + constructor(birth_year, eye_colo, gender, hair_color,height,mass,skin_color) { + this.birth_year = birth_year; + this.eye_colo = eye_colo; + this.gender = gender; + this.hair_color = hair_color; + this.height = height; + this.mass = mass; + this.skin_color=skin_color; + } } @@ -20,83 +20,68 @@ console.log('personnage.js loaded'); //api_call(API_URL+"/people", console.log); -// fetch(API_URL+"/people") -// .then(response => { -// return response.json(); -// }) -// .then(jsonResp => { -// remplissage(jsonResp); -// }) -// .catch(error => { -// console.log(`Erreur lors de l'appel API : -// ${error.message}`); -// }); +fetch(API_URL+"/people") +.then(response => { + return response.json(); +}) +.then(jsonResp => { + remplissage(jsonResp); +}) +.catch(error => { + console.log(`Erreur lors de l'appel API : + ${error.message}`); +}); -function remplissage(json) { - console.log(json.results[0]); + function remplissage(json){ + console.log(json.results[0]); + + // api_call(API_URL+ "/planets/1", (response) => { + // console.log(response); + // NAME.innerText = results[i].name; + + // }); + + + + + + PERSONNAGES.innerHTML = ''; + const PERPAGE = json.results.length; + + +for (let i = 0; i < PERPAGE; i++) { + const urlbirth_year = json.results[i].birth_year; + const urleye_colo=json.results[i].eye_colo; + const urlgender=json.results[i].gender; + const urlhair_color=json.results[i].hair_color; + const urlheight = json.results[i].height; + const urlmass=json.results[i].mass; + const urlskin_color= json.results[i].skin_color; + const urlname= json.results[i].name; + const urlhomeworld=json.results[i].homeworld; + const urlfilms=json.results[i].films; - // api_call(API_URL+ "/planets/1", (response) => { - // console.log(response); - // NAME.innerText = results[i].name; - - // }); + // const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color); + // console.log(gens); +//Appel Api pour les planetes : + PERSONNAGES.innerHTML += + `
+

${urlname}

+
+
+
Année de Naissance : ${urlbirth_year}
+
Couleur des Yeux : ${urleye_colo}
+
Genre : ${urlgender}
+
Couleur des Cheveux : ${urlhair_color}
+
Poids du personnage : ${urlmass} kg
+
Couleur de Peau : ${urlskin_color}
+
Planète de Naissance : ${urlhomeworld}
+
Film où je suis présent : ${urlfilms}
+
+
`; - - PERSONNAGES.innerHTML = ''; - const PERPAGE = json.results.length; - const previousUrl = json.previous; - const nextUrl = json.next; - console.log(previousUrl); - console.log(nextUrl); - - for (let i = 0; i < PERPAGE; i++) { - const urlbirth_year = json.results[i].birth_year; - const urleye_colo = json.results[i].eye_colo; - const urlgender = json.results[i].gender; - const urlhair_color = json.results[i].hair_color; - const urlheight = json.results[i].height; - const urlmass = json.results[i].mass; - const urlskin_color = json.results[i].skin_color; - const urlname = json.results[i].name; - const urlhomeworld = json.results[i].homeworld; - const urlfilms = json.results[i].films; - - // const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color); - // console.log(gens); - //Appel Api pour les planetes : - - - PERSONNAGES.innerHTML += - `
-

${urlname}

-
-
-
Année de Naissance : ${urlbirth_year}
-
Couleur des Yeux : ${urleye_colo}
-
Genre : ${urlgender}
-
Couleur des Cheveux : ${urlhair_color}
-
Poids du personnage : ${urlmass} kg
-
Couleur de Peau : ${urlskin_color}
-
-
Planète de Naissance : ${urlhomeworld}
-
Film où je suis présent : ${urlfilms}
-
-
`; - - } - //Pagination - createPagination(previousUrl, nextUrl, PERSONNAGES, remplissage); - - const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header"); - accordeonItemHeader.forEach(accordeonItemHeader => { - accordeonItemHeader.addEventListener("click", event => { - accordeonItemHeader.classList.toggle("active"); - }); - }); -} - -api_call(API_URL + "/people", remplissage); - console.log('personnage.js loaded'); + } +} \ No newline at end of file diff --git a/scripts/planets.js b/scripts/planets.js index 7522478..4b6b113 100644 --- a/scripts/planets.js +++ b/scripts/planets.js @@ -20,6 +20,15 @@ function remplissage(results) { const population = resultPlanet.population; const tabResidents = resultPlanet.residents; + //Problème de requêtes asyncrones + // let tabResidents = []; + // for(index in resultPlanet.residents){ + // api_call(resultPlanet.residents[index], (jsonresp)=>{ + // console.log(jsonresp.name); + // }); + // } + // console.log(`${nom} - résidents : ${resultPlanet.residents}`); + // console.log(`nom des résidents : ${tabResidents}`); const tabFilms = resultPlanet.films; @@ -27,26 +36,26 @@ function remplissage(results) { `

${nom}

-
+

${terrain}

${climate}

${diametre}Km

-
${tabResidents}
-
${tabFilms}
+
${tabResidents}
+
${tabFilms}
`; } + const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header"); + for (item of accordeonItemHeader) { + item.addEventListener("click", (event) => { + item.classList.toggle("active"); + }); + } + //Pagination createPagination(previousUrl, nextUrl, planetes, remplissage); - - const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header"); - accordeonItemHeader.forEach(accordeonItemHeader => { - accordeonItemHeader.addEventListener("click", event => { - accordeonItemHeader.classList.toggle("active"); - }); - }); } api_call(API_URL + "/planets", remplissage); diff --git a/scripts/util.js b/scripts/util.js index f2612eb..aef73e6 100644 --- a/scripts/util.js +++ b/scripts/util.js @@ -43,7 +43,7 @@ export const api_call = (url, callback) => { */ export const createPagination = (prevUrl, nextUrl, elementParent, remplissage) => { console.log("Url précédente : " + prevUrl); - console.log("Url suivante : " + nextUrl); + console.group("Url suivante : " + nextUrl); const currentPage = (prevUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(prevUrl)) + 1); console.log("Page courante : " + currentPage); diff --git a/styles/style.css b/styles/style.css index f822791..f21d97a 100644 --- a/styles/style.css +++ b/styles/style.css @@ -30,16 +30,6 @@ body{ font-size: 1em; } -form label{ - margin: 0.5em; - color: var(--blanc); -} - -form input{ - border-color: var(--jaune); - border-radius: 3%; - padding: 0.3em; -} .titre a{ margin-top : 20px; @@ -85,21 +75,14 @@ form input{ /* border-radius: 10%; */ } -#bienvenue{ - text-align: center; +/* div.image-films { background-color: transparent; - 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) -} + margin-top: -170px; + margin-left: auto; + width: 30%; + content: url("../assets/imgs/mando.png"); +} */ div.image-films { background-color: transparent; width: 30%; @@ -157,11 +140,8 @@ div.image-charactere { .accordeon_item_body_content{ color : #000; padding: 1.5rem; - line-height: 1.5rem; - } - - .column1, .column2, .column3{ - padding: 1em; + line-height: 1.5rem; + } .accordeon_item_header.active + .accordeon_item_body{