112 lines
3.3 KiB
JavaScript
112 lines
3.3 KiB
JavaScript
/*const NOM = document.getElementsByClassName('nom');
|
|
const PRENOM = document.getElementsByClassName('prenom');
|
|
const IDENTIFIANT = document.getElementsByClassName('identifiant');
|
|
const EMAIL = document.getElementsByClassName('email');
|
|
const AVATAR = document.getElementsByClassName('avatar');*/
|
|
const MEMBER = document.getElementById('personne');
|
|
const BUTTON = document.getElementById('page2');
|
|
const BUTTON1 = document.getElementById('page1')
|
|
|
|
console.log(MEMBER);
|
|
const API_URL = "https://reqres.in/api/users?page=1";
|
|
fetch(API_URL)
|
|
.then((response) => {
|
|
console.log(response);
|
|
return response.json()
|
|
})
|
|
.then(responsFormat => {
|
|
console.log(responsFormat);
|
|
for(let index = 0; index <6; index++){
|
|
console.log(responsFormat.data[index]);
|
|
const PERSONNE = responsFormat.data[index];
|
|
console.log(PERSONNE);
|
|
|
|
MEMBER.innerHTML +=`
|
|
<div class = "fiche">
|
|
<img src="${PERSONNE.avatar}" alt="Photo d'identité">
|
|
<p class= "nom">${PERSONNE.last_name} ${PERSONNE.first_name}</p>
|
|
<!--<p class="prenom">${PERSONNE.first_name}</p>-->
|
|
<p class ="identifiant">${PERSONNE.id}</p>
|
|
<p class = "email">${PERSONNE.email}</p>
|
|
</div>
|
|
`
|
|
|
|
/* NOM.innerText = responsFormat.data[0].last_name;
|
|
PRENOM.innerText = responsFormat.data[0].first_name;
|
|
IDENTIFIANT.innerText = responsFormat.data[0].id;
|
|
EMAIL.innerText = responsFormat.data[0].email;
|
|
AVATAR.src = responsFormat.data[0].avatar;*/
|
|
|
|
}
|
|
|
|
BUTTON.addEventListener('click', ()=>{
|
|
const API_PAGE2 = "https://reqres.in/api/users?page=2";
|
|
fetch(API_PAGE2)
|
|
.then((response2) => {
|
|
console.log(response2);
|
|
return response2.json()
|
|
})
|
|
.then(responsFormat2 => {
|
|
console.log(responsFormat2);
|
|
MEMBER.innerHTML = " ";
|
|
for(let index = 0; index <6; index++){
|
|
console.log(responsFormat2.data[index]);
|
|
const PERSONNE = responsFormat2.data[index];
|
|
console.log(PERSONNE);
|
|
|
|
MEMBER.innerHTML +=`
|
|
<div class="fiche">
|
|
<img src="${PERSONNE.avatar}" alt="Photo d'identité">
|
|
<p class= "nom">${PERSONNE.last_name} ${PERSONNE.first_name}</p>
|
|
<!--<p class="prenom">${PERSONNE.first_name}</p>-->
|
|
<p class="identifiant">${PERSONNE.id}</p>
|
|
<p class="email">${PERSONNE.email}</p>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
})
|
|
|
|
|
|
}
|
|
)
|
|
|
|
BUTTON1.addEventListener('click', ()=>{
|
|
const API_PAGE1 = "https://reqres.in/api/users?page=1";
|
|
fetch(API_PAGE1)
|
|
.then((response1) => {
|
|
console.log(response1);
|
|
return response1.json()
|
|
})
|
|
.then(responsFormat1 => {
|
|
console.log(responsFormat1);
|
|
MEMBER.innerHTML = " ";
|
|
for(let index = 0; index <6; index++){
|
|
console.log(responsFormat1.data[index]);
|
|
const PERSONNE = responsFormat1.data[index];
|
|
console.log(PERSONNE);
|
|
|
|
MEMBER.innerHTML +=`
|
|
<div class="fiche">
|
|
<img src="${PERSONNE.avatar}" alt="Photo d'identité">
|
|
<p class= "nom">${PERSONNE.last_name} ${PERSONNE.first_name}</p>
|
|
<!--<p class="prenom">${PERSONNE.first_name}</p>-->
|
|
<p class="identifiant">${PERSONNE.id}</p>
|
|
<p class="email">${PERSONNE.email}</p>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
}
|
|
)
|
|
|
|
|
|
}
|
|
)
|
|
|
|
|
|
|
|
.catch(err => {
|
|
console.error(err);
|
|
})
|
|
}); |