From d575b87ad3ea5b5cef0e4375d68651a6f8ec739a Mon Sep 17 00:00:00 2001 From: HediMjid Date: Tue, 19 Oct 2021 09:56:54 +0200 Subject: [PATCH] people js + html --- people.html | 19 +++++++++-- scripts/people.js | 86 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 103 insertions(+), 2 deletions(-) diff --git a/people.html b/people.html index 56efbdb..b3be4e7 100644 --- a/people.html +++ b/people.html @@ -4,9 +4,24 @@ - Document + Brief Star Wars - People + + - +

People

+
+ + + +
+ +
+ +
+ + +
+ \ No newline at end of file diff --git a/scripts/people.js b/scripts/people.js index e69de29..af46418 100644 --- a/scripts/people.js +++ b/scripts/people.js @@ -0,0 +1,86 @@ +const API_URL = "https://swapi.dev/api/people/?page="; +let pageEnCours = 1; + + +// function pour afficher les peoples et leur correspondances +async function getPeople() { + const url = 'http://swapi.dev/api/people'; + const peoples = await fetch(API_URL+pageEnCours); + const people = await peoples.json(); + const total_pages = people.count/people.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 += ` +

+

${hero}

+

planet : ${planet.name} (${people.results[i].homeworld})

+

Films : ${movies}

+

+
+ `; + } + + } + + +// boucle pour afficher les boutons de navigations +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); + } + + getPeople(); + }); + + +}}); + +// initialisation de la page, pour un affichage au chargement +getPeople(); \ No newline at end of file