Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

JavaScript
1

Tell us what’s happening:

Hello everyone
I’m stuck for no apparent reason on 32
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 /, an anchor text of , and the second obtained by calling forumCategory with category_id.

Thanks in advance

Your code so far

/* file: script.js */
const forumLatest =
  'https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json';
const forumTopicUrl = 'https://forum.freecodecamp.org/t/';
const forumCategoryUrl = 'https://forum.freecodecamp.org/c/';
const avatarUrl = 'https://cdn.freecodecamp.org/curriculum/forum-latest';


const allCategories = {
  299: { category: 'Career Advice', className: 'career' },
  409: { category: 'Project Feedback', className: 'feedback' },
  417: { category: 'freeCodeCamp Support', className: 'support' },
  421: { category: 'JavaScript', className: 'javascript' },
  423: { category: 'HTML - CSS', className: 'html-css' },
  424: { category: 'Python', className: 'python' },
  432: { category: 'You Can Do This!', className: 'motivation' },
  560: { category: 'Backend Development', className: 'backend' }
};

function timeAgo(time) {
  const date = new Date();
  const lastDate = new Date(time);
  const minute = Math.floor((date - lastDate) / 60000);
  const hour = Math.floor((date - lastDate) / 3600000);
  const day = Math.floor((date - lastDate) / 86400000);

  if (minute < 60) {
    return `${minute}m ago`
  } if (hour < 24) {
    return `${hour}h ago`
  } else {
    return `${day}d ago`
  }
}


function viewCount(view) {
  if (view >= 1000 && view <= 9999) {
    const result = view.toString().slice(0, 1) + "k"
    return result;
  } else if (view > 9999) {
    const secondResult = view.toString().slice(0, 2) + "k"
    return secondResult;
  }
  return view;
}

function forumCategory(catId) {
  if (Object.hasOwn(allCategories, catId)) {
    const result = `<a class="category ${allCategories[catId].className}" href="${forumCategoryUrl}${allCategories[catId].className}/${catId}">${allCategories[catId].category}</a>`;
    return result;
  } else {
    const result = `<a class="category general" href="${forumCategoryUrl}general/${catId}">General</a>`;
    return result;
  }
}

function avatars(posterArray, userArray) {
  return posterArray.map((poster) => {
    const userList = userArray.find(users => users.id === poster.user_id);

    if (userList) {
      const replacedAvatar = userList.avatar_template.replace("{size}", 30);

      const userAvatarUrl = replacedAvatar.includes("/user_avatar/") ? `${avatarUrl}` + `${replacedAvatar}` : replacedAvatar;

      return `<img src="${userAvatarUrl}" alt="${userList.name}"/>`;

    } else {
      return;
    }
  })
    .join("")
}


function showLatestPosts(obj) {
  const posts = document.getElementById("posts-container");
  const {topic_list, users} = obj
  const {topics} = topic_list;

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

  return `
  <tr>
    <td>
    <a class="post-title" href="${forumTopicUrl}/${slug}/${id}" target="_blank">${title}</a>

    <a>${forumCategory(category_id)}</a>
    </td>

    <td>
      <div class="avatar-container">
        ${avatars(posters, users)}
      </div>
    </td>

    <td>
      ${posts_count - 1}
    </td>

    <td>
      ${views}
    </td>

    <td>
      ${timeAgo(bumped_at)}
    </td>
  </tr>`
  }).join("");
}



async function fetchData() {
  return fetch(forumLatest)
  .then(response => response.json())
  .then(data => showLatestPosts(data))
  .catch(error => console.error(error));
}

// fetchData();
// window.onload = () => fetchData();
document.addEventListener("DOMContentLoaded", () => fetchData());

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

2

a td containing two anchor elements, one with the class of post-title, an href of <forumTopicUrl><slug>/<id>, an anchor text of <title>, and one obtained by calling forumCategory with category_id.

There’s no slash between forumtopicurl and slug.

and one obtained by calling forumCategory with category_id.

us console.log to log ${forumCategory(category_id)} to the console so you can see exactly what it contains and how to use it.

This doesn’t make sense as an anchor because it has no href.

<a>${forumCategory(category_id)}</a>
``
3

Just responding to the slash, the variable already has the slash
const forumTopicUrl = 'https://forum.freecodecamp.org/t/';

So the second slash wasn’t needed.

4

I noticed just now what you meant about the slash.

I didn’t notice that <forumTopicUrl><slug>/<id> didn’t have the slash.

5

I somehow solved it by mistake.

Thanks

1 Like