From 60135b6750e8440c4eb6c835593fb00a7e1515aa Mon Sep 17 00:00:00 2001 From: HarmandI Date: Mon, 18 Oct 2021 17:34:11 +0200 Subject: [PATCH 1/8] Bazar --- assets/image | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 assets/image diff --git a/assets/image b/assets/image new file mode 100644 index 0000000..e69de29 From 5b29b7e155dee3c0daa23a920edd2aff8c6e2f67 Mon Sep 17 00:00:00 2001 From: HarmandI Date: Wed, 20 Oct 2021 09:31:51 +0200 Subject: [PATCH 2/8] pagination ok --- scripts/personnages.js | 101 +++++++++++++++++++++++------------------ scripts/util.js | 2 +- 2 files changed, 57 insertions(+), 46 deletions(-) diff --git a/scripts/personnages.js b/scripts/personnages.js index 4414f55..68d118e 100644 --- a/scripts/personnages.js +++ b/scripts/personnages.js @@ -1,4 +1,4 @@ -import { api_call,API_URL } from "./util"; +import { api_call,API_URL, createPagination } from "./util"; const PERSONNAGES = document.getElementById("resultats"); @@ -20,17 +20,17 @@ 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]); @@ -47,41 +47,52 @@ fetch(API_URL+"/people") 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 : + 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}
-
-
`; + PERSONNAGES.innerHTML += + `
+

${urlname}

+
+
+
Année de Naissance : ${urlbirth_year}
+
Couleur des Yeux : ${urleye_colo}
+
Genre : ${urlgender}
+
Couleur des Cheveux : ${urlhair_color}
+
Taille : ${urlheight}
+
Poids du personnage : ${urlmass} kg
+
Couleur de Peau : ${urlskin_color}
+
Planète de Naissance : ${urlhomeworld}
+
Film où je suis présent : ${urlfilms}
+
+
`; - } -} \ No newline at end of file + } + + + //Pagination + createPagination(previousUrl, nextUrl, PERSONNAGES, remplissage); +} + +api_call(API_URL + "/people", remplissage); +console.log('personnage.js loaded'); diff --git a/scripts/util.js b/scripts/util.js index aef73e6..f2612eb 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.group("Url suivante : " + nextUrl); + console.log("Url suivante : " + nextUrl); const currentPage = (prevUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(prevUrl)) + 1); console.log("Page courante : " + currentPage); From 30bd1248350bad9c629f6b9ad15cb5acdd0a726a Mon Sep 17 00:00:00 2001 From: Blandine Bajard <83599148+BlandineBajard@users.noreply.github.com> Date: Wed, 20 Oct 2021 10:07:16 +0200 Subject: [PATCH 3/8] accordeon qui fonctionne \o/ --- films.html | 66 +++---------------------------------- scripts/films.js | 86 ++++++++++++++---------------------------------- 2 files changed, 29 insertions(+), 123 deletions(-) diff --git a/films.html b/films.html index 5e6f27d..eb7cdd4 100644 --- a/films.html +++ b/films.html @@ -21,68 +21,10 @@ -
-
-
-

-

(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/scripts/films.js b/scripts/films.js index 7bf93bd..9775f4c 100644 --- a/scripts/films.js +++ b/scripts/films.js @@ -1,68 +1,32 @@ -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 +=` -

${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 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){ + // 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}

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

+
+
` + } + 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 From 0eb7887a96ece6309198910c689ac4bb47849c95 Mon Sep 17 00:00:00 2001 From: Blandine Bajard <83599148+BlandineBajard@users.noreply.github.com> Date: Wed, 20 Oct 2021 10:10:11 +0200 Subject: [PATCH 4/8] nettoyage --- scripts/films.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/scripts/films.js b/scripts/films.js index 9775f4c..f0d931d 100644 --- a/scripts/films.js +++ b/scripts/films.js @@ -5,8 +5,7 @@ const films = document.getElementById("resultats"); const API_URL = "https://swapi.dev/api/films/"; // déclare la localisation de la liste des films function remplissage(EPISODES){ - // const EPISODES = afficherFilms; // on déclare qu'un épisode est toujours la fonction avec sa boucle - console.log(EPISODES); + console.log(EPISODES); for(index in EPISODES.results){ films.innerHTML +=` From 4f69d290b804caf6dfc39254c748acdd71114fbe Mon Sep 17 00:00:00 2001 From: William Noris Date: Wed, 20 Oct 2021 10:17:26 +0200 Subject: [PATCH 5/8] mise en place du formulaire de recherche --- planets.html | 8 ++++++++ styles/style.css | 9 +++++++++ 2 files changed, 17 insertions(+) diff --git a/planets.html b/planets.html index d0761dc..2b027ae 100644 --- a/planets.html +++ b/planets.html @@ -22,6 +22,14 @@ +
+
+ + + +
+
+
diff --git a/styles/style.css b/styles/style.css index f21d97a..882f233 100644 --- a/styles/style.css +++ b/styles/style.css @@ -30,6 +30,15 @@ body{ font-size: 1em; } +form label{ + margin: 0.5em; +} + +form input{ + border-color: var(--jaune); + border-radius: 3%; + padding: 0.3em; +} .titre a{ margin-top : 20px; From 83a006de170ffdcc7fbe58aa0bf26d2968ab6e49 Mon Sep 17 00:00:00 2001 From: Blandine Bajard <83599148+BlandineBajard@users.noreply.github.com> Date: Wed, 20 Oct 2021 10:34:24 +0200 Subject: [PATCH 6/8] changements index html --- index.html | 3 +++ styles/style.css | 19 +++++++++++++------ 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 4988142..f5e8b53 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,9 @@ +

bienvenue

+

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

\ No newline at end of file diff --git a/styles/style.css b/styles/style.css index f21d97a..7cf4bf5 100644 --- a/styles/style.css +++ b/styles/style.css @@ -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%; From 696a638d568cb734a64a4efedda37ccd3931cf8c Mon Sep 17 00:00:00 2001 From: William Noris Date: Wed, 20 Oct 2021 10:37:54 +0200 Subject: [PATCH 7/8] styles updates --- characters.html | 13 ++++++++++++- films.html | 9 +++++++++ scripts/personnages.js | 19 ++++++++++--------- scripts/planets.js | 21 ++++++--------------- styles/style.css | 8 ++++++-- 5 files changed, 43 insertions(+), 27 deletions(-) diff --git a/characters.html b/characters.html index 828d8e9..1616cee 100644 --- a/characters.html +++ b/characters.html @@ -23,10 +23,21 @@ -
+ +
+
+ + + +
+
+
+
+ + \ No newline at end of file diff --git a/films.html b/films.html index 5e6f27d..e4e8ee3 100644 --- a/films.html +++ b/films.html @@ -21,6 +21,15 @@ + +
+
+ + + +
+
+
diff --git a/scripts/personnages.js b/scripts/personnages.js index 4414f55..30f6436 100644 --- a/scripts/personnages.js +++ b/scripts/personnages.js @@ -70,15 +70,16 @@ for (let i = 0; i < PERPAGE; i++) { `

${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}
+
+
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}
`; diff --git a/scripts/planets.js b/scripts/planets.js index 4b6b113..83834ef 100644 --- a/scripts/planets.js +++ b/scripts/planets.js @@ -20,15 +20,6 @@ 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; @@ -36,26 +27,26 @@ function remplissage(results) { `

${nom}

-
+

${terrain}

${climate}

${diametre}Km

-
${tabResidents}
-
${tabFilms}
+
${tabResidents}
+
${tabFilms}
`; } + //Pagination + createPagination(previousUrl, nextUrl, planetes, remplissage); + 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); } api_call(API_URL + "/planets", remplissage); diff --git a/styles/style.css b/styles/style.css index 882f233..916107a 100644 --- a/styles/style.css +++ b/styles/style.css @@ -32,6 +32,7 @@ body{ form label{ margin: 0.5em; + color: var(--blanc); } form input{ @@ -149,8 +150,11 @@ div.image-charactere { .accordeon_item_body_content{ color : #000; padding: 1.5rem; - line-height: 1.5rem; - + line-height: 1.5rem; + } + + .column1, .column2, .column3{ + padding: 1em; } .accordeon_item_header.active + .accordeon_item_body{ From 97735016318542603e4dc32ffc4e35df5c24264b Mon Sep 17 00:00:00 2001 From: William Noris Date: Wed, 20 Oct 2021 10:53:02 +0200 Subject: [PATCH 8/8] fix accordeons --- scripts/films.js | 40 +++++++------ scripts/personnages.js | 131 ++++++++++++++++++++++------------------- scripts/planets.js | 8 +-- 3 files changed, 94 insertions(+), 85 deletions(-) diff --git a/scripts/films.js b/scripts/films.js index f0d931d..f55f0f9 100644 --- a/scripts/films.js +++ b/scripts/films.js @@ -4,28 +4,30 @@ const films = document.getElementById("resultats"); 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 +=` +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}

-
+

${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}

+
+
` - } - const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header"); - accordeonItemHeader.forEach(accordeonItemHeader =>{ - accordeonItemHeader.addEventListener("click", event => { - accordeonItemHeader.classList.toggle("active"); -}) - }) } + const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header"); + accordeonItemHeader.forEach(accordeonItemHeader => { + accordeonItemHeader.addEventListener("click", event => { + accordeonItemHeader.classList.toggle("active"); + }) + }) +} api_call(API_URL, remplissage); \ No newline at end of file diff --git a/scripts/personnages.js b/scripts/personnages.js index 150500c..3017508 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, createPagination } 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; + } } @@ -32,64 +32,71 @@ console.log('personnage.js loaded'); // ${error.message}`); // }); - 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; - const previousUrl = json.previous; - const nextUrl = json.next; - console.log(previousUrl); - console.log(nextUrl); - +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; + 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 : + 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}
-
-
`; - + 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'); + console.log('personnage.js loaded'); diff --git a/scripts/planets.js b/scripts/planets.js index 83834ef..7522478 100644 --- a/scripts/planets.js +++ b/scripts/planets.js @@ -42,11 +42,11 @@ function remplissage(results) { createPagination(previousUrl, nextUrl, planetes, remplissage); const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header"); - for (item of accordeonItemHeader) { - item.addEventListener("click", (event) => { - item.classList.toggle("active"); + accordeonItemHeader.forEach(accordeonItemHeader => { + accordeonItemHeader.addEventListener("click", event => { + accordeonItemHeader.classList.toggle("active"); }); - } + }); } api_call(API_URL + "/planets", remplissage);