fetch

better_fetch.js

const elements = {
  loading: document.querySelector("#loading"),
  postsContainer: document.querySelector("#posts-container"),
  postPage: document.querySelector("#post"),
  postContainer: document.querySelector("#post-container"),
  commentsContainer: document.querySelector("#comments-container"),
  commentForm: document.querySelector("#comment-form"),
  emailInput: document.querySelector("#email"),
  bodyInput: document.querySelector("#body"),
};

const apiUrl = "https://jsonplaceholder.typicode.com/posts";

const fetchData = async (url) => {
  try {
    const response = await fetch(url);
    return await response.json();
  } catch (error) {
    console.error(`Error fetching data from ${url}:`, error);
    throw error;
  }
};

const createElement = (tag, text) => {
  const element = document.createElement(tag);
  element.innerText = text;
  return element;
};

const createPostElement = (post) => {
  const div = document.createElement("div");
  div.appendChild(createElement("h2", post.title));
  div.appendChild(createElement("p", post.body));
  
  const link = createElement("a", "Ler");
  link.setAttribute("href", `/post.html?id=${post.id}`);
  div.appendChild(link);

  return div;
};

const getAllPosts = async () => {
  try {
    const posts = await fetchData(apiUrl);
    elements.loading.classList.add("hide");

    posts.forEach((post) => {
      const postElement = createPostElement(post);
      elements.postsContainer.appendChild(postElement);
    });
  } catch (error) {
    console.error("Error fetching posts:", error);
  }
};

const getPost = async (id) => {
  try {
    const [post, comments] = await Promise.all([
      fetchData(`${apiUrl}/${id}`),
      fetchData(`${apiUrl}/${id}/comments`),
    ]);

    elements.loading.classList.add("hide");
    elements.postPage.classList.remove("hide");

    const title = createElement("h1", post.title);
    const body = createElement("p", post.body);

    elements.postContainer.appendChild(title);
    elements.postContainer.appendChild(body);

    comments.forEach(createComment);
  } catch (error) {
    console.error("Error fetching post or comments:", error);
  }
};

const createComment = (comment) => {
  const div = document.createElement("div");
  div.appendChild(createElement("h3", comment.email));
  div.appendChild(createElement("p", comment.body));
  elements.commentsContainer.appendChild(div);
};

const postComment = async (comment) => {
  try {
    const response = await fetch(apiUrl, {
      method: "POST",
      body: comment,
      headers: {
        "Content-type": "application/json",
      },
    });

    const newComment = await response.json();
    createComment(newComment);
  } catch (error) {
    console.error("Error posting comment:", error);
  }
};

if (!postId) {
  getAllPosts();
} else {
  getPost(postId);

  elements.commentForm.addEventListener("submit", async (e) => {
    e.preventDefault();

    const comment = {
      email: elements.emailInput.value,
      body: elements.bodyInput.value,
    };

    await postComment(JSON.stringify(comment));
  });
}