const postSection = document.getElementById('posts-section');
const http = new XMLHttpRequest();
const url = 'https://jsonplaceholder.typicode.com/posts';
let posts = [];
http.open('GET', url);
http.send();

http.onreadystatechange = (e) => {
    posts = JSON.parse(http.responseText);
    postSection.innerHTML = '';
    posts.forEach((post) => {
        const newPost = document.createElement('div');
        newPost.innerHTML = `
            <div id="post-${post.id}" class="post-item">
                <h3>${post.title}</h3>
                <p>${post.body}</p>
            </div>
        `;
        postSection.appendChild(newPost);
    })
}

function filter(value) {
  postSection.innerHTML = '';
  posts
    .filter((post) => 
      post.title.includes(value) || post.body.includes(value))
    .forEach((post) => {
      const newPost = document.createElement('div');
      newPost.innerHTML = `
        <div id="post-${post.id}" class="post-item">
          <h3>${post.title}</h3>
          <p>${post.body}</p>
        </div>
      `;
      postSection.appendChild(newPost);
    });
}