mise en page

index.html

@@ -20,5 +20,7 @@
 
         <div id="personne"></div>
     </section>    
+
+    <button id = "page2">page suivante </button>
 </body>
 </html>

script.js

@@ -4,10 +4,13 @@ const IDENTIFIANT = document.getElementsByClassName('identifiant');
 const EMAIL = document.getElementsByClassName('email');
 const AVATAR = document.getElementsByClassName('avatar');*/
 const MEMBER = document.getElementById('personne');
+<<<<<<< HEAD
 console.log(MEMBER);
+=======
+const BUTTON = document.getElementById ('page2');
+
+>>>>>>> c7bfce2711271bd6a05a3de8ee1bef5309fb0f4e
 const API_URL = "https://reqres.in/api/users?page=1";
-
-
 fetch(API_URL)
 .then((response) => {
     console.log(response);
@@ -38,6 +41,33 @@ fetch(API_URL)
 
     }
 
+    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);
+    for(let index = 0; index <6; index++){
+        console.log(responsFormat2.data[index]);
+        const PERSONNE = responsFormat2.data[index];
+        console.log(PERSONNE);
+    
+        MEMBER.innerHTML +=`
+        <div>
+        <p>${PERSONNE.last_name}</p>
+        <p>${PERSONNE.first_name}</p>
+        <p>${PERSONNE.id}</p>
+        <p>${PERSONNE.email}</p>
+        <img src="${PERSONNE.avatar}" alt="">
+        </div>
+    `
+}
+
+})
+
 
 }
 )
@@ -46,4 +76,5 @@ fetch(API_URL)
 
 .catch(err => {
     console.error(err);
+})
 });