vincentRamiere
/
tp-figma-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

version du 15-10-2021

This commit is contained in:
Vincent Ramiere 2021-10-17 17:49:02 +02:00
parent c3abfd7f04
commit 4e27369a55
3 changed files with 80 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
index.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API REQRES</title>
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<h1>Our Team Members</h1>
<div id = personne>
<p id = "nom"></p>
<p id = "prenom"></p>
<p id = "identifiant"></p>
<p id = "email"></p>
<img id = "avatar" src="" alt="Photo d'identité">
</div>
</section>
</body>
</html>

46
script.js Normal file
View File

@ -0,0 +1,46 @@
const NOM = document.getElementById('nom');
const PRENOM = document.getElementById('prenom');
const IDENTIFIANT = document.getElementById('identifiant');
const EMAIL = document.getElementById('email');
const AVATAR = document.getElementById('avatar');
const MEMBER = document.getElementById('personne');
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);
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;
for(let index = 0; index <6; index++){
console.log(data[0]);
console.log(data[index]);
const PERSONNE = responsFormat[data[0]];
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>
`
}
})
.catch(err => {
console.error(err);
});

11
style.css Normal file
View File

@ -0,0 +1,11 @@
#personne {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
img{
width:100px;
clip-path:ellipse(50% 50%);
}