Add files via upload

index.html

@@ -18,80 +18,15 @@
     <section id="corps">
       <h1>Our Team Members</h1>
       <div id="blocs">
-        <div id="carteidentite1">
-          <div>
-            <img
-              id="avatar"
-              src="/assets/kisspng-computer-icons-avatar-login-user-avatar-5ac207e6c8c133.5629676315226654468223.png"
-              alt=""
-            />
-          </div>
-          <div id="personne1">
-            <p id="nom">Nom</p>
-            <p id="prenom">Prenom</p>
-            <p id="identifiant">Identifiant</p>
-            <p id="mail">Email</p>
-          </div>
-        </div>
 
-        <div id="carteidentite2">
-          <div>
-            <img
-              id="avatar"
-              src="/assets/kisspng-computer-icons-avatar-login-user-avatar-5ac207e6c8c133.5629676315226654468223.png"
-              alt=""
-            />
-          </div>
-          <div id="personne2">
-            <p id="nom">Nom</p>
-            <p id="prenom">Prenom</p>
-            <p id="identifiant">Identifiant</p>
-            <p id="mail">Email</p>
-          </div>
-        </div>
-
-        <div id="carteidentite3">
-          <div>
-            <img
-              id="avatar"
-              src="/assets/kisspng-computer-icons-avatar-login-user-avatar-5ac207e6c8c133.5629676315226654468223.png"
-              alt=""
-            />
-          </div>
-          <div id="personne3">
-            <p id="nom">Nom</p>
-            <p id="prenom">Prenom</p>
-            <p id="identifiant">Identifiant</p>
-            <p id="mail">Email</p>
-          </div>
-        </div>
       </div>
     </section>
   </body>
   <footer>
+    
     <nav aria-label="pagination">
-      <ul class="pagination">
+      <button href = "index.html">1</button>
-        <li>
+      <button id= page>2</button>
-          <a href=""
-            ><span aria-hidden="true">«</span
-            ><span class="visuallyhidden"></span
-          ></a>
-        </li>
-        <li>
-          <a href=""><span class="visuallyhidden"></span>1</a>
-        </li>
-        <li>
-          <a href="" aria-current="page"
-            ><span class="visuallyhidden"></span>2</a
-          >
-        </li>
-        <li>
-          <a href=""
-            ><span class="visuallyhidden"></span
-            ><span aria-hidden="true">»</span></a
-          >
-        </li>
-      </ul>
     </nav>
   </footer>
 </html>

script.js

@@ -1,12 +1,11 @@
-const AVATAR = document.getElementById("avatar");
-const NOM = document.getElementById("nom");
-const PRENOM = document.getElementById("prenom");
-const IDENTIFIANT = document.getElementById("identifiant");
-const MAIL = document.getElementById("mail");
 
-const PERSONNE = document.getElementById("personne_suivante");
+
+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;
@@ -17,23 +16,26 @@ class Identite {
   }
 
   PersonneSuiv() {
-    PERSONNE.innerHTML += `
+    PERSONNE.innerHTML += ` 
-        <div>
+            
-            <img
+          <div id="personne">
-              id="avatar"
+            <img id="avatar" src="${this.avatar}" alt=""/>
-              src="${this.avatar}"
+            <div id="NP">
-              alt=""
+            <p id="nom" >${this.nom} ${this.prenom}</p>  
-            />
+            
-          </div>
-          <div id="personne1">
-            <p id="nom" >${this.nom}</p>  
-            <p id="prenom">${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) => {
@@ -42,17 +44,17 @@ const getData = (api) => {
     .then((dataUser) => {
       console.log(dataUser);
 
+      PERSONNE.innerHTML = '';
       const PERPAGE = dataUser.per_page;
 
-      for (i = 0; i < PERPAGE; i++) {
+      for (let i = 0; i < PERPAGE; i++) {
-        AVATAR.src = dataUser.data[i].avatar;
+        const urlAvatar = dataUser.data[i].avatar;
-        NOM.innerText = dataUser.data[i].last_name;
+        const urlNOM=dataUser.data[i].last_name;
-        PRENOM.innerText = dataUser.data[i].first_name;
+        const urlPRENOM=dataUser.data[i].first_name;
-        IDENTIFIANT.innerText = dataUser.data[i].id;
+        const urlIDENTIFIANT=dataUser.data[i].id;
-        MAIL.innerText = dataUser.data[i].email;
+        const urlMAIL = dataUser.data[i].email;
-        // PERSONNE.innerHTML='';
 
-        const gens = new Identite(AVATAR, NOM, PRENOM, IDENTIFIANT, MAIL);
+        const gens = new Identite(urlAvatar, urlNOM, urlPRENOM, urlIDENTIFIANT, urlMAIL);
         gens.PersonneSuiv();
       }
     });

style.css

@@ -1,4 +1,5 @@
 #corps {
+  justify-content: space-between;
   text-align: center;
   font-family: "Mulish", sans-serif;
 }
@@ -16,18 +17,19 @@
 #blocs {
   display: flex;
   flex-direction: row;
+  margin: auto;
   flex-wrap: wrap;
-  justify-content: space-around;
+  justify-content: center;
+  width: 80%;
 }
 
-#personne1,
+
-#personne2,
+#personne {
-#personne3 {
+  justify-content: space-between;
-  background-color: #3d36c2;
   width: 160px;
   height: 175px;
   margin: 50px 5px 5px 40px;
-  /* background: #edecfe; */
+  background: #edecfe;
   border-radius: 10px;
   padding: 20px;
   font-family: "Mulish", sans-serif;
@@ -36,22 +38,27 @@
   font-weight: 800;
   line-height: 5%;
   letter-spacing: 0.3545454740524292px;
-  text-align: left;
+  text-align: center;
   display: table-cell;
   vertical-align: bottom;
+
 }
 
+
+
+
+
 #nom {
   font-weight: bold;
-  font-size: 30px;
+  font-size: 15px;
 }
 #prenom {
   font-size: medium;
-}
+} 
 
 #avatar {
   position: relative;
-  /* display: flex; */
+  top : -40%;
   left: -25%;
   border-radius: 50%;
   margin-bottom: -20%;
@@ -76,26 +83,4 @@ nav {
   padding-top: 0.5em;
 }
 
-.pagination {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-}
 
-.pagination li {
-  margin: 0 1px;
-}
-
-.pagination a {
-  display: block;
-  padding: 0.5em 1em;
-  border: 1px solid #999;
-  border-radius: 0.2em;
-  text-decoration: none;
-}
-
-.pagination a[aria-current="page"] {
-  background-color: #333;
-  color: #fff;
-}