Last active
June 21, 2020 15:37
-
-
Save paragchirde/0c90c23f8e06dba705574da1d4371d05 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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"> | |
</head> | |
<body> | |
<div class="container mt-4"> | |
<div id="loading" class="text-center alert alert-primary">Loading Data</div> | |
<!-- All posts goes here --> | |
<div class="row" id="postContainer"> | |
</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 loader = document.getElementById("loading"); | |
loader.style.display = 'block'; | |
fetch('https://jsonplaceholder.typicode.com/photos') | |
.then(response => | |
response.json() | |
) | |
.then(photos => { | |
loader.style.display = 'none'; | |
console.log(photos) | |
photos.forEach((photo) => { | |
if (photo.id < 100) { | |
var template = '<div class = "col-12 col-md-4">' + | |
'<div class = "shadow card mt-2">' + | |
'<img class="card-img-top img-thumbnail" style="height:240px;object-fit:cover" src="' + photo.url + '" alt="Card image cap">' + | |
'<div class="card-body">' + | |
'<p class="card-title">Post ID: ' + photo.id + ' </p>' + | |
'<h6 class="card-title"> ' + photo.title + ' </h6>' + | |
'<img class="" style="height:40px;width:40px;object-fit:cover" src="' + photo.thumbnailUrl + '" alt="Card image cap">' + | |
'</div>' + | |
'</div>' + | |
'</div>'; | |
document.getElementById('postContainer').innerHTML += template; | |
} | |
}) | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment