├── README.md
├── index.html
├── script.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | ## Infinite Scrolling & Filter
2 |
3 | [Demo](https://alvar91.github.io/infinite-scroll-blog-html-css-js/) Display blog posts from [jsonplaceholder](https://jsonplaceholder.typicode.com) and add infinite scroll to fetch posts and also add filter box
4 |
5 | ## Project Specifications
6 |
7 | - Create UI & custom CSS loader animation
8 | - Fetch initial posts from API and display
9 | - Scroll down, show loader and fetch next set of posts
10 | - Add filtering for fetched posts
11 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | My Blog
9 |
10 |
11 | My Blog
12 |
13 |
14 |
20 |
21 |
22 |
23 |
24 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const postsContainer = document.getElementById('posts-container');
2 | const loading = document.querySelector('.loader');
3 | const filter = document.getElementById('filter');
4 |
5 | let limit = 5;
6 | let page = 1;
7 |
8 | // Fetch posts from API
9 | async function getPosts() {
10 | const res = await fetch(
11 | `https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`
12 | );
13 |
14 | const data = await res.json();
15 |
16 | return data;
17 | }
18 |
19 | // Show posts in DOM
20 | async function showPosts() {
21 | const posts = await getPosts();
22 |
23 | posts.forEach(post => {
24 | const postEl = document.createElement('div');
25 | postEl.classList.add('post');
26 | postEl.innerHTML = `
27 | ${post.id}
28 |
29 |
${post.title}
30 |
${post.body}
31 |