From 230d0e938ff3a4fdf513eb7e120d7596aa5fe4e6 Mon Sep 17 00:00:00 2001 From: Sana EL HIRI Date: Tue, 19 Oct 2021 16:19:10 +0200 Subject: [PATCH] modification js et Html planetes --- planetes.html | 21 ++++- scripts/planetes.js | 183 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 202 insertions(+), 2 deletions(-) diff --git a/planetes.html b/planetes.html index 56efbdb..f0d749d 100644 --- a/planetes.html +++ b/planetes.html @@ -4,9 +4,26 @@ - Document + Planètes - Star Wars Choubaka + + - +

Planètes

+
+ + + +
+ +
+ +
+ + + +
+ \ No newline at end of file diff --git a/scripts/planetes.js b/scripts/planetes.js index e69de29..b068d54 100644 --- a/scripts/planetes.js +++ b/scripts/planetes.js @@ -0,0 +1,183 @@ +const API_URL = "https://swapi.dev/api/planets/?page="; +let pageEnCours = 1; + + +// function pour afficher les peoples et leur correspondances +async function getPlanets() { + const PLANETS = await fetch(API_URL+pageEnCours); + const PLANET = await PLANETS.json(); + const total_pages = PLANET.count/PLANET.results.length; + + // on vide le div + document.getElementById('container').innerHTML = ""; + + // boucle pour parser les peoples + for(i=0;i${film.title}

`; + // } + document.getElementById('container').innerHTML += ` +

+

${PLANET_NAME}

+
+

Rotation :

+

${ROTATION_PERIOD}

+
+
+

ORBITAL :

+

${ORBITAL_PERIOD}

+
+
+

Diameter :

+

${DIAMETER}

+
+
+

Climate :

+

${CLIMATE}

+
+
+

Gravity :

+

${GRAVITY}

+
+
+

Terrain :

+

${TERRAIN}

+
+
+

Surface water :

+

${SURFACE_WATER}

+
+
+

Population :

${POPULATION}

+
+ +
+ +
+

+
+ `; + } + const BUTTONS_FILMS = document.querySelectorAll('.films'); + for(var i = 0;i < BUTTONS_FILMS.length;i++){ + let BUTTON = BUTTONS_FILMS[i]; + BUTTON.addEventListener("click", function() { + //console.log(BUTTON.nextElementSibling); + getFilms(BUTTON.value,BUTTON.nextElementSibling.id); + + }); + } + + const BUTTONS_RESIDENTS = document.querySelectorAll('.residents'); + for(var i = 0;i < BUTTONS_RESIDENTS.length;i++){ + let BUTTON = BUTTONS_RESIDENTS[i]; + BUTTON.addEventListener("click", function() { + //console.log(BUTTON.nextElementSibling); + getResidents(BUTTON.value,BUTTON.nextElementSibling.id); + + }); + } + + + } + + + +// function pour afficher les films +async function getFilms(liste,div) { + const url = liste.split(','); + console.log(div); + document.getElementById(div).innerHTML = ""; + for(i=0;i${FILM.title}`; + } + + + } + + +// function pour afficher les résidents +async function getResidents(liste,div) { + const url = liste.split(','); + console.log(div); + document.getElementById(div).innerHTML = ""; + for(i=0;i${RESIDENT.name}`; + } + + + } + + + +// boucle pour afficher les boutons de navigation +fetch(API_URL) + .then(response => response.json()) + .then(data => { + + let totalPages = data.count / data.results.length; + for (let index = 1; index < totalPages +1; index++) { + + + document.getElementById('buttons').innerHTML += ` + `; + } + + let buttons = document.querySelectorAll('.allButtons'); + let boutonNum = document.querySelectorAll('.boutonNum'); + console.log(boutonNum); + + for (let i = 0; i < buttons.length; i++) { + buttons[i].addEventListener("click", function(e) { + + if (e.target.name === "moins" || e.target.name === "plus"){ + + pageEnCours = pageEnCours + parseInt(e.target.value); + + if(pageEnCours < 1){ + pageEnCours = 1; + }else if(pageEnCours > boutonNum.length){ + pageEnCours = boutonNum.length; + } + + }else{ + pageEnCours = parseInt(e.target.value); + } + + getPlanets(); + }); + + +}}); + +// initialisation de la page, pour un affichage au chargement +getPlanets();