isa44.74
/
Our-Team-Members
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add files via upload

This commit is contained in:
HarmandI 2021-10-19 12:45:24 +02:00 committed by GitHub
parent 4a8e0b3e51
commit 5f2f92b572
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
index.html
View File

@ -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">
<li>
<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>
<button href = "index.html">1</button>
<button id= page>2</button>
</nav>
</footer>
</html>

52
script.js
View File

@ -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 += `
<div>
<img
id="avatar"
src="${this.avatar}"
alt=""
/>
</div>
<div id="personne1">
<p id="nom" >${this.nom}</p>
<p id="prenom">${this.prenom} </p>
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) => {
@ -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++) {
AVATAR.src = dataUser.data[i].avatar;
NOM.innerText = dataUser.data[i].last_name;
PRENOM.innerText = dataUser.data[i].first_name;
IDENTIFIANT.innerText = dataUser.data[i].id;
MAIL.innerText = dataUser.data[i].email;
// PERSONNE.innerHTML='';
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(AVATAR, NOM, PRENOM, IDENTIFIANT, MAIL);
const gens = new Identite(urlAvatar, urlNOM, urlPRENOM, urlIDENTIFIANT, urlMAIL);
gens.PersonneSuiv();
}
});

49
style.css
View File

@ -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,
#personne3 {
background-color: #3d36c2;
#personne {
justify-content: space-between;
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;
}