Just a small project to demonstrate infinite scrolling, Fetch API and CSS animations on a microblog.
Show the functionality of a microblog that has infinite scrolling. It fetches posts from an API.
It will also have a search bar that filters out the posts by the string provided by the user.
Uses fake data from JSON Placeholder, a free fake API for testing and prototyping.
HTML5, CSS3, JavaScript
- Create custom UI
- CSS loader animation
- Fetch and display initial posts from API with
async
,await
&Promise
- Fetch next set of posts via scroll down
- Infinite scroll down and show loader animation
- Seach & filter for fetched posts via search bar
- Scroll down
- Read posts
-
Clone this repository and save to a folder on a laptop (or on GitHub click
Code
>Download Zip
) -
Go to the directory (folder) where code is stored
-
Open up
index.html
in any browser
Assets such as bleeter-logo.png
and clouds.png
found at Bleeter.
Going through the JSON Placeholder Guide
When we make a request to this URL:
We get an array of JavaScript objects containing posts.
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}
Will give the first post. And when we add a parameter to the URL that is ?_limit=3
[
{
userId: 1,
id: 1,
title:
"sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
},
{
userId: 1,
id: 2,
title: "qui est esse",
body: "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
},
{
userId: 1,
id: 3,
title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
body: "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut",
},
];
We will get the first 3 posts, since we limit the amount of posts we get to 3.
Adding another parameter at the end &_page=3
[
{
userId: 1,
id: 7,
title: "magnam facilis autem",
body: "dolore placeat quibusdam ea quo vitae\nmagni quis enim qui quis quo nemo aut saepe\nquidem repellat excepturi ut quia\nsunt ut sequi eos ea sed quas",
},
{
userId: 1,
id: 8,
title: "dolorem dolore est ipsam",
body: "dignissimos aperiam dolorem qui eum\nfacilis quibusdam animi sint suscipit qui sint possimus cum\nquaerat magni maiores excepturi\nipsam ut commodi dolor voluptatum modi aut vitae",
},
{
userId: 1,
id: 9,
title: "nesciunt iure omnis dolorem tempora et accusantium",
body: "consectetur animi nesciunt iure dolore\nenim quia ad\nveniam autem ut quam aut nobis\net est aut quod aut provident voluptas autem voluptas",
},
];
We get the 3rd page of posts (see the id
) limited to 3 posts.
To make use of this:
// limit number of posts, and what page
let limit = 4;
let page = 1;
/**
* Fetch the posts from the API
* @returns Promise of data representing the posts
*/
async function getPosts() {
const response = await
fetch(`https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`);
// Returns a promise with that data
const data = await response.json();
// data is a promise, so must use async await
return data;
}
-
Event handler that manages the scrolling and loading posts runs onload of the webpage, the issue was that onload
document.documentElement.scrollTop
would evaluate to roughly ~15 and then 0. So fixed the issue by aborting early in theloadPosts()
function. -
Also throttled the scrolling eventHandler to prevent it from loading too often, although the
setTimeout
withinshowLoading()
function mitigates this bug somewhat, it hacks away at the leaves and does not strike at the root of the bug. So throttling theloadPosts()
function by having athrottle
decorator function wrapper have it run not more often than givenms
time. This is so the scroll down feels responsive to the user, still updates regularly, but not so frequently that it callsloadPosts()
more than once. -
When user scrolls up right after scrolling down to load posts, multiple calls to
loadPosts()
happen so fixed this issue by keeping track of the maximumscrollTop
value asmaxScrollTop
. Only one call toloadPosts()
would occur when currentscrollTop
exceedsmaxScrollTop
and(scrollTop + clientHeight >= scrollHeight - 5)
check for when the user scrolls near the end of the page.