From 4e27369a55eb5c772ab80c648603339a7b7f3548 Mon Sep 17 00:00:00 2001
From: Vincent Ramiere <vincent.ramiere1@gmail.com>
Date: Sun, 17 Oct 2021 17:49:02 +0200
Subject: [PATCH] version du 15-10-2021

---
 index.html | 23 +++++++++++++++++++++++
 script.js  | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 style.css  | 11 +++++++++++
 3 files changed, 80 insertions(+)
 create mode 100644 index.html
 create mode 100644 script.js
 create mode 100644 style.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..02b0dae
--- /dev/null
+++ b/index.html
@@ -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>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..a1c2535
--- /dev/null
+++ b/script.js
@@ -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);
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..4b13970
--- /dev/null
+++ b/style.css
@@ -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%);
+}
\ No newline at end of file
