cambios: js se modifico a for.each la funcion que hacia render, modif…

…icacion de classes en css

assets/css/estilos.css

@@ -1,38 +1,39 @@
 body {
-    margin: 0;
+  margin: 0;
 }
 .container {
-    border: 30px solid rgba(62, 60, 63,.20);
-    margin:10px;
-
-   }
- .container h1 {
-    font-size: 35px;
-    font-family: Arial, Helvetica, sans-serif;
-    font-weight: bold;
-    grid-area: h1;
-    padding-left: 20px;
+  border: 30px solid rgba(62, 60, 63, 0.2);
+  margin: 10px;
+}
+.container h1 {
+  font-size: 35px;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  grid-area: h1;
+  padding-left: 20px;
 }
 
-
-#users {
-
-    border-radius:5px;
-   background-color:rgba(205, 185, 224, .20);
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 1em;
-     display: grid;
-     grid-template-columns: repeat( 2 , 1fr);
-     grid-template-rows: repeat(auto, flex);
-     grid-gap: 30px;
-    padding: 20px;
-    line-height: 30px;
-
+.users {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(auto, flex);
+  grid-gap: 30px;
 }
-
-
 
 .p {
-    display: flex;
+  display: flex;
 }
 
+.user {
+  cursor: pointer;
+  border-radius: 5px;
+  background-color: rgba(205, 185, 224, 0.2);
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1em;
+  padding: 20px;
+  line-height: 30px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(auto, flex);
+  grid-gap: 30px;
+}

assets/js/logica.js

@@ -1,27 +1,43 @@
-
 let users = [];
 const calue = setTimeout(() => {
   console.log('hola a los 5 segundos');
 }, 5000);
 
 function getUsers() {
-  fetch('https://jsonplaceholder.typicode.com/todos')
-    .then(
-      (response) => response.json())
-    .then(
-      (json) => {
-
-        renderUsers(json)
-      }
-    );
-
+  fetch('https://jsonplaceholder.typicode.com/users')
+    .then((response) => response.json())
+    .then((json) => {
+      /*   renderUsers(json) */
+      console.log(json);
+      renderUsers(json);
+    });
 }
 
+function renderUsers(usersList) {
+  users = usersList;
+  const container = document.getElementById('userContainer');
+  usersList.forEach((user) => {
+    const template = ` <div class="user"  data-id="${user.id}" data-name="${user.name}" id= "user-${user.id}">
+        <p>${user.name} <br> ${user.username} </p>
+        <p>${user.email} <br> ${user.address.street} </p>
+      </div>`;
+    container.innerHTML += template;
+    let userElement = document.getElementById(`user-${user.id}`);
 
+    /*  console.log(template); */
+  });
+  clickElement();
+  /* let newList = [];
+  usersList.forEach(function (user, index) {
+    newList.push(user.phone);
+  });
+  console.log(newList); */
+  /* let newList = usersList.map(function (user) {
+    return user.phone; 
+  });
+  console.log(newList); */
 
-function renderUsers(usersList) {
-  let container = document.getElementById("users")
-  for (let i = 0; i < usersList.length; i++) {
+  /*  for (let i = 0; i < usersList.length; i++) {
     let user = usersList[i];
     //console.log(user);
     let textNote = document.createTextNode(user)
@@ -32,18 +48,19 @@ function renderUsers(usersList) {
     const template =
 
       ` <div id="users">
-        <p>${user.userID} <br> ${user.id} </p>
-        <p>${user.title} <br> ${user.completed} </p>
+        <p>${user.name} <br> ${user.username} </p>
+        <p>${user.email} <br> ${user.addres} </p>
       </div>`
     container.innerHTML += template
-    console.log(template);
-
-
-
-
-  }
+    console.log(template);*/
 }
-
+function clickElement() {
+  const userElements = document.getElementsByClassName('user');
+  Array.from(userElements).forEach(function (user) {
+    user.addEventListener('click', function () {
+      console.log('click', Number(this.dataset.id));
+    });
+  });
+}
+function showUser(userID) {}
 getUsers();
-
-