Skip to content

Instantly share code, notes, and snippets.

@paragchirde

paragchirde/Fetch Api Users Adv

Last active June 22, 2020 06:23
Show Gist options
  • Save paragchirde/794adc28e49f40532ae41ba74dca3b62 to your computer and use it in GitHub Desktop.
Save paragchirde/794adc28e49f40532ae41ba74dca3b62 to your computer and use it in GitHub Desktop.
Download ZIP
UI Changed
Raw
Fetch Api Users Adv
<!doctype html>
<html lang="en">
<head>
<title>Foobler</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
</head>
<body>
<div class="container mt-4">
<!-- All posts goes here -->
<h2 class="text-dark font-italic">Users: <span id="total" class="text-success"></span> </h2>
<div class="row" id="usersContainer">
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalName">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" id="modalBody">
<p>Name: <span id="name"></span></p>
<p>UserName: <span id="username" class="text-success"></span></p>
<p>Email: <span id="email"></span></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
var usersArray = [];
fetch('https://jsonplaceholder.typicode.com/users/')
.then(response =>
response.json()
)
.then(users => {
console.log(users)
usersArray = users;
users.forEach((user) => {
var template = '<div class = "col-12 col-md-4">' +
'<div class = "shadow-sm animate__animated animate__bounce card mt-2">' +
'<div class="card-body">' +
'<img style="height:60px;width:60px;object-fit:cover" src="https://avatars.dicebear.com/api/avataaars/' + user.id + '.svg" alt="Card image cap">' +
'<br><small class="card-title">User ID: ' + user.id + ' </small><br>' +
'<span class="card-text text-dark font-weight-bold">' + user.name + '</span> | ' +
'<small class="card-text text-success font-italic font-weight-light">@' + user.username + '</small>' +
'<p class="card-text font-weight-light">' + user.email + '</p>' +
'<button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#exampleModal" id="' + user.id + '" onclick="myModal(' + user.id + ')">View</button>' +
'</div>' +
'</div>' +
'</div>';
document.getElementById('usersContainer').innerHTML += template;
document.getElementById('total').innerHTML = users.length;
})
})
function myModal(id) {
let user = usersArray[id - 1];
document.getElementById("name").innerHTML = user.name;
document.getElementById("username").innerHTML = '@' + user.username;
document.getElementById("email").innerHTML = user.email;
console.log(user)
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment