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 1/3] 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 2/3] 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 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 3/3] 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%;