Using fetch()
get some blog posts, then add them into the div
.
HTML:
<div id="posts-container">
</div>
JS:
const postsContainer = document.getElementById('posts-container');
const loading = document.querySelector('.loader');
const filter = document.getElementById('filter');
let limit = 3;
let page = 1;
// Fetch posts from API
async function getPosts() {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`);
const data = await res.json();
return data;
}
// Show posts in DOM
async function showPosts() {
const posts = await getPosts();
// console.log(posts);
posts.forEach(post => {
const postEl = document.createElement('div');
postEl.classList.add('post');
postEl.innerHTML = `
<div class="number">${post.id}</div>
<div class="post-info">
<h2 class="post-title">${post.title}</h2>
<p class="post-body">${post.body}</p>
</div>
`;
postsContainer.appendChild(postEl);
});
}
showPosts();