Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

[damilarewasiu00]

Tell us what’s happening:

i need more explanation about this lab, this is my fourth day on this issue, have try my possible best but i cant figure the proplem’ kindly help me please. these are the instruction”

1 You should have a function named timeAgo that takes a single argument.

• Passed:2. When the time difference between the time passed as argument and the current time is 50 minutes, timeAgo should return 50m ago.

• Passed:3. When the time difference between the time passed as argument and the current time is 60 minutes, timeAgo should return 1h ago.

• Passed:4. When the time difference between the time passed as argument and the current time is 115 minutes, timeAgo should return 1h ago.

• Passed:5. When the time difference between the time passed as argument and the current time is 15 hours, timeAgo should return 15h ago.

• Passed:6. When the time difference between the time passed as argument and the current time is 24 hours, timeAgo should return 1d ago.

• Passed:7. When the time difference between the time passed as argument and the current time is 46 hours, timeAgo should return 1d ago.

• Passed:8. When the time difference between the time passed as argument and the current time is 3 days, timeAgo should return 3d ago.

• Passed:9. You should have a function named viewCount that takes a single argument.

• Passed:10. viewCount(597) should return 597.

• Passed:11. viewCount(1000) should return 1k.

• Passed:12. viewCount(2730) should return 2k.

• Passed:13. You should have a function named forumCategory that takes a single argument.

• Passed:14. forumCategory(299) should return a string containing an anchor element with the text Career Advice.

• Failed:15. forumCategory(299) should return a string containing an anchor element with href=" Career Advice - The freeCodeCamp Forum ".

• Passed:16. forumCategory(299) should return a string containing an anchor element with class="category career".

• Passed:17. forumCategory(200) should return a string containing an anchor element with the text General.

• Failed:18. forumCategory(200) should return a string containing an anchor element with href="``https://forum.freecodecamp.org/c/general/200``".

• Passed:19. forumCategory(200) should return a string containing an anchor element with class="category general".

• Passed:20. You should have a function named avatars that takes two arguments.

• Passed:21. The avatars function should return a string made by joining img elements, one for each poster found in the user array.

• Passed:22. Each img element in the string returned by the avatars function should have an alt text with the value of the name property of the poster.

• Passed:23. The avatars function should set each avatar’s size by accessing the avatar_template property and replacing {size} with 30.

• Failed:24. Each img element in the string returned by the avatars function should have the src with the value of the avatar_template property of the poster. In case avatar_template contains a relative path, it should be set to <avatarUrl>/<avatar_template>.

• Passed:25. You should have a function named showLatestPosts that takes a single parameter.

• Passed:26. You should have a function named fetchData.

• Passed:27. Your fetchData function should request data from https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json.

• Passed:28. Your fetchData function should call showLatestPosts.

• Passed:29. If there is an error, your fetchData function should log the error to the console, using console.log.

• Passed:30. showLatestPosts should set the inner HTML of #posts-container to a string made by joining tr elements, one for each item in topics.

• Passed:31. Each tr element from the string returned by showLatestPosts should contain 5 td elements.

• Failed:32. The first td element of each table row from the string returned by showLatestPosts should contain two anchor elements, the first with the class of post-title, an href of <forumTopicUrl><slug>/<id>, an anchor text of <title>, and the second obtained by calling forumCategory with category_id.

• Failed:33. The second td element of each table row from the string returned by showLatestPosts should contain the images returned by the avatars function called with posters and users as arguments, nested within a div element with the class of avatar-container.

• Passed:34. The third td element of each table row from the string returned by showLatestPosts should contain the number of replies to the post. Hint: use posts_count - 1.

• Passed:35. The fourth td element of each table row from the string returned by showLatestPosts should contain the number of views of the post.

• Passed:36. The fifth td element of each table row from the string returned by showLatestPosts should contain time passed since the last activity, generated using the timeAgo function.”

const forumLatest = "https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json";
const forumTopicUrl = "https://forum.freecodecamp.org";
const forumCategoryUrl = "https://forum.freecodecamp.org";
const avatarUrl = "https://sea1.discourse-cdn.com";

const timeAgo = (time) => {
  const currentTime = new Date();
  const lastPost = new Date(time);
  const timeDiff = Math.floor((currentTime - lastPost) / 1000 / 60);

  if (timeDiff < 60) return `${timeDiff}m ago`;
  if (timeDiff < 1440) return `${Math.floor(timeDiff / 60)}h ago`;
  return `${Math.floor(timeDiff / 1440)}d ago`;
};

const viewCount = (views) => {
  if (views >= 1000) return `${Math.floor(views / 1000)}k`;
  return views;
};

const forumCategory = (id) => {
  const categories = {
    299: { category: "Career Advice", className: "career" },
    200: { category: "General", className: "general" },
    409: { category: "Project Feedback", className: "feedback" },
    417: { category: "freeCodeCamp Support", className: "support" },
  };

  if (categories.hasOwnProperty(id)) {
    const { category, className } = categories[id];
    return `<a href="https://forum.freecodecamp.org{className}/${id}" class="category ${className}" target="_blank">${category}</a>`;
  }
  
  return `<a href="https://forum.freecodecamp.org/c/general/200" class="category general" target="_blank">General</a>`;
};

const avatars = (posters, users) => {
  return posters.map((poster) => {
    const user = users.find((user) => user.id === poster.user_id);
    if (user) {
      const avatar = user.avatar_template.replace("{size}", 30);
      const userAvatarUrl = avatar.startsWith("/") 
        ? avatarUrl + avatar 
        : avatar;
      return `<img src="${userAvatarUrl}" alt="${user.name}">`;
    }
  }).join("");
};


const postsContainer = document.getElementById("posts-container");

const fetchData = async () => {
  try {
    const res = await fetch(forumLatest);
    const data = await res.json();
    showLatestPosts(data);
  } catch (err) {
    console.log(err);
  }
};

fetchData();

const showLatestPosts = (data) => {
  const { topic_list, users } = data;
  const { topics } = topic_list;

  postsContainer.innerHTML = topics.map((item) => {
    const { id, title, views, posts_count, slug, posters, category_id, bumped_at } = item;

    return `
      <tr>
        <td>
          <a class="post-title" href="${forumTopicUrl}${slug}/${id}">${title}</a>
          ${forumCategory(category_id)}
        </td>
        <td>
<div class="avatar-container">${avatars(posters, users)}</div>
        </td>
        <td>${posts_count - 1}</td>
        <td>${viewCount(views)}</td>
        <td>${timeAgo(bumped_at)}</td>
      </tr>`;
  }).join("");
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Challenge Information:

Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

freeCodeCamp.org

[pkdvalis]

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

[ILM]

@damilarewasiu00

i need more explanation about this lab

sure, what kind of explanation do you need? if you can be specific people can help you best