<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Javascript</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="card">
<div class="card-header">Featured</div>
<ul id="users" class="list-group list-group-flush"></ul>
</div>
</div>
</div>
<script>
const createNode = (element) => {
return document.createElement(element); // Create the type of element you pass in the parameters
}
const append = (parent, el) => {
return parent.appendChild(el); // Append the second parameter(element) to the first one
}
const showUser = (id) => {
console.log(id);
}
const container = document.getElementById('users');
const url = 'https://jsonplaceholder.typicode.com/users/';
fetch(url)
.then((resp) => resp.json())
.then(function(data) {
// Here you get the data to modify as you please
let users = data; // Get the results
console.log(users);
return users.map(function(user) { // Map through the results and for each run the code below
let li = createNode('li'), // Create the elements we need
span = createNode('span');
span.innerHTML = `
<div class='user' onclick='showUser(${user.id})'>
<h5 class='card-title'>${user.name}</h5>
<p>
<strong>ID:</strong> ${user.id}<br>
<strong>Email:</strong> <a href='mailto:${user.email}'>${user.email}</a><br>
<strong>Phone:</strong> ${user.phone}
</p>
</div>`; // Make the HTML of our span
li.classList.add('list-group-item');
append(li, span);
append(container, li);
})
})
.catch(function(error) {
// If there is any error you will catch them here
console.log(error);
});
</script>
</body>
</html>