64 lines
1.7 KiB
JavaScript
64 lines
1.7 KiB
JavaScript
|
|
|
|
const PERSONNE = document.getElementById("blocs");
|
|
const API_URL = "https://reqres.in/api/users?";
|
|
|
|
const API_URL_PAGE = "https://reqres.in/api/users?page=2";
|
|
const BUTTONS = document.getElementById("page");
|
|
|
|
class Identite {
|
|
constructor(avatar, nom, prenom, identifiant, mail) {
|
|
this.avatar = avatar;
|
|
this.nom = nom;
|
|
this.prenom = prenom;
|
|
this.identifiant = identifiant;
|
|
this.mail = mail;
|
|
}
|
|
|
|
PersonneSuiv() {
|
|
PERSONNE.innerHTML += `
|
|
|
|
<div id="personne">
|
|
<img id="avatar" src="${this.avatar}" alt=""/>
|
|
<div id="NP">
|
|
<p id="nom" >${this.nom} ${this.prenom}</p>
|
|
|
|
<p id="identifiant"> ${this.identifiant}</p>
|
|
<p id="mail">${this.mail}</p>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
BUTTONS.addEventListener('click',() => {
|
|
console.log(BUTTONS.value);
|
|
const NUMERO_PAGE = BUTTONS.value;
|
|
getData(API_URL_PAGE+NUMERO_PAGE);
|
|
});
|
|
|
|
const getData = (api) => {
|
|
fetch(api)
|
|
.then((resp) => {
|
|
return resp.json();
|
|
})
|
|
.then((dataUser) => {
|
|
console.log(dataUser);
|
|
|
|
PERSONNE.innerHTML = '';
|
|
const PERPAGE = dataUser.per_page;
|
|
|
|
for (let i = 0; i < PERPAGE; i++) {
|
|
const urlAvatar = dataUser.data[i].avatar;
|
|
const urlNOM=dataUser.data[i].last_name;
|
|
const urlPRENOM=dataUser.data[i].first_name;
|
|
const urlIDENTIFIANT=dataUser.data[i].id;
|
|
const urlMAIL = dataUser.data[i].email;
|
|
|
|
const gens = new Identite(urlAvatar, urlNOM, urlPRENOM, urlIDENTIFIANT, urlMAIL);
|
|
gens.PersonneSuiv();
|
|
}
|
|
});
|
|
};
|
|
|
|
getData(API_URL);
|