Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

JavaScript
1

Tell us what’s happening:

i keep failling the 32. test on build an fcc forum leaderboard where 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.

and its still failing

Your code so far

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://forum.freecodecamp.org';

const allCategories = {
  299: { key: 'Career Advice', className: 'career' },
  200: { key: 'General', className: 'general' },
  500: { key: 'Showcase', className: 'showcase' },
  409: { key: 'Project Feedback', className: 'feedback' }
};

/* ======================
   TIME AGO
====================== */
function timeAgo(timestamp) {
  const now = new Date();
  const then = new Date(timestamp);
  const diffMs = now - then;
  const minutes = Math.floor(diffMs / 60000);

  if (minutes < 60) return `${minutes}m ago`;

  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours}h ago`;

  const days = Math.floor(hours / 24);
  return `${days}d ago`;
}

/* ======================
   VIEW COUNT
====================== */
function viewCount(views) {
  return views >= 1000 ? `${Math.floor(views / 1000)}k` : views;
}

/* ======================
   FORUM CATEGORY
====================== */
function forumCategory(id) {
  const category = allCategories[id] || { key: 'General', className: 'general' };
  return `<a href="${forumCategoryUrl}/${category.className}/${id}" class="category ${category.className}">${category.key}</a>`;
}

/* ======================
   AVATARS
====================== */
function avatars(posters, users) {
  return posters.map(poster => {
    const user = users.find(u => u.id === poster.user_id);
    if (!user) return '';

    let src = user.avatar_template.replace('{size}', '30');
    if (!src.startsWith('http')) {
      src = 'https://cdn.freecodecamp.org/curriculum/forum-latest' + src;
    }

    return `<img src="${src}" alt="${user.name}">`;
  }).join('');
}



/* ======================
   SHOW LATEST POSTS
====================== */
function showLatestPosts(data) {
  const { users, topic_list } = data;

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

    // First <td> must contain two anchors exactly: post-title + category, separated by a single space
    return `<tr>
<td><a class="post-title" target="_blank" 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('');

  document.getElementById('posts-container').innerHTML = rows;
}






/* ======================
   FETCH DATA
====================== */
async function fetchData() {
  try {
    const res = await fetch(forumLatest);
    const data = await res.json();
    showLatestPosts(data);
  } catch (err) {
    console.log(err);
  }
}

fetchData();

Your browser information:

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

Challenge Information:

Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

3

Please be patient and don’t bump threads like this

1 Like
4

Ok I’m sorry for my impatient actions

5

It looks like you’ve changed the seed code for allCategories.

I recommend copying all of your code into a local file to save it, then clicking “Reset this lesson” to restore the original seed code.

You will need to rewrite forumCategory to honor the object key names in the seed code. And it would probably be wise to console.log() what forumCategory is returning to make sure all is well.

6

yo i tried changing and i think i have to change category to name

// ======================

// CONSTANTS

// ======================

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: { name: ‘Career Advice’, className: ‘career’ },

200: { name: ‘General’, className: ‘general’ },

500: { name: ‘Showcase’, className: ‘showcase’ },

409: { name: ‘Project Feedback’, className: ‘feedback’ }

};

// ======================

// TIME AGO

// ======================

function timeAgo(timestamp) {

const now = new Date();

const then = new Date(timestamp);

const diff = now - then;

const minutes = Math.floor(diff / 60000);

if (minutes < 60) return `${minutes}m ago`;

const hours = Math.floor(minutes / 60);

if (hours < 24) return `${hours}h ago`;

const days = Math.floor(hours / 24);

return `${days}d ago`;

}

// ======================

// VIEW COUNT

// ======================

function viewCount(views) {

return views >= 1000 ? `${Math.floor(views / 1000)}k` : views;

}

// ======================

// FORUM CATEGORY

// ======================

function forumCategory(id) {

const category = allCategories[id] || { name: ‘General’, className: ‘general’ };

return `${category.name}`;

}

// ======================

// AVATARS

// ======================

function avatars(posters, users) {

return posters

.map(poster => {

  const user = users.find(u => u.id === poster.user_id);

  if (!user) return '';



  let avatar = user.avatar_template.replace('{size}', 30);

  if (!avatar.startsWith('http')) {

    avatar = \`${avatarUrl}${avatar}\`;

  }



  return \`<img src="${avatar}" alt="${user.name}">\`;

})

.join('');

}

// ======================

// SHOW LATEST POSTS

// ======================

function showLatestPosts(data) {

const { users, topic_list } = data;

const rows = topic_list.topics

.map(topic => {

  const { id, title, views, posts_count, slug, posters, category_id, bumped_at } = topic;



  // ✅ FIRST TD: anchors must be directly adjacent, no newlines

  return \`<tr>
${title}${forumCategory(category_id)}
${avatars(posters, users)}
${posts_count - 1} ${viewCount(views)} ${timeAgo(bumped_at)} \`; 
})

.join('');

document.getElementById(‘posts-container’).innerHTML = rows;

}

// ======================

// FETCH DATA

// ======================

async function fetchData() {

try {

const res = await fetch(forumLatest);

const data = await res.json();

showLatestPosts(data);

} catch (err) {

console.log(err);

}

}

// ======================

// RUN

// ======================

fetchData();

7

if you can give me how the code suppossed to look i would like a lot

8

Wouldn’t you prefer to learn to do it yourself? Solving these challenges is part of learning.

In any case, sharing solution code is not allowed on the forum.

What makes you think that?

9

Please post again your code and follow this guide to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

10

Maybe I wasn’t clear.

This code for allCategories is not the same as it was when you first started this project. You will need to restore the original code by resetting this project. Then add all of your code back in WITHOUT your changes to `allCategories’.

Do you understand?