function attachEvents() {
    const optionSelect = document.getElementById("posts");
    const loadBtn = document.getElementById("btnLoadPosts");
    const viewBtn = document.getElementById("btnViewPost");
    const postComments = document.getElementById("post-comments");

    loadBtn.addEventListener("click", loadPosts);
    viewBtn.addEventListener("click", viewPost);
     let postBody = ''
    async function loadPosts() {
      const url = `http://localhost:3030/jsonstore/blog/posts`;
      const response = await fetch(url);
      const data = await response.json();

      Object.entries(data).forEach(([key, value]) => {
        const option = document.createElement("option");
        option.value = key;
        option.textContent = value.title;
        optionSelect.appendChild(option);
        postBody = value.body
      });
    }

    async function viewPost() {
      const url = `http://localhost:3030/jsonstore/blog/comments`;
      const response = await fetch(url);
      const data = await response.json();
      const comments = Object.values(data).filter(
        (el) => el.postId === optionSelect.value
      );


      document.getElementById(`post-title`).textContent =
      optionSelect.options[optionSelect.selectedIndex].text;
      document.getElementById('post-body').textContent = postBody
    //   const postsUrl = `http://localhost:3030/jsonstore/blog/posts`;
    //   const postsResponse = await fetch(postsUrl);
    //   const postsData = await postsResponse.json();
      postComments.replaceChildren();
      comments.forEach((el) => {
        const li = document.createElement("li");
        li.id = el.id;
        li.textContent = el.text;
        postComments.appendChild(li);
      });
    }
  }
  attachEvents();