Tell us what’s happening:
Title: fCC Forum Leaderboard – Multiple Tests Failing (forumCategory, avatars, showLatestPosts)
Hi everyone,
I’m currently working on the Build an fCC Forum Leaderboard project and I’m running into several failing tests that I can’t figure out.
Failing Tests:
14–16: forumCategory(299) (text, href, class)
24: avatars (image src handling)
32–33: showLatestPosts (anchors and avatar container)
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* 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://forum.freecodecamp.org";
// Example categories (your project may already include full list)
const allCategories = {
299: { name: "Career Advice", className: "career" }
};
// 1. timeAgo
function timeAgo(timestamp) {
const now = new Date();
const past = new Date(timestamp);
const diff = now - past;
const minutes = Math.floor(diff / (1000 * 60));
const hours = Math.floor(diff / (1000 * 60 * 60));
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
if (minutes < 60) {
return `${minutes}m ago`;
} else if (hours < 24) {
return `${hours}h ago`;
} else {
return `${days}d ago`;
}
}
// 2. viewCount
function viewCount(views) {
if (views >= 1000) {
return `${Math.floor(views / 1000)}k`;
}
return views;
}
// 3. forumCategory
function forumCategory(id) {
const category = allCategories[id];
const name = category ? category.name : "General";
const className = category ? category.className : "general";
return `<a href="${forumCategoryUrl}/${className}/${id}" class="category ${className}">${name}</a>`;
}
// 4. avatars
function avatars(posters, users) {
return posters.map(poster => {
const user = users.find(u => u.id === poster.user_id);
let avatar = user.avatar_template.replace("{size}", "30");
if (avatar.startsWith("/")) {
avatar = avatarUrl + avatar;
}
return `<img src="${avatar}" alt="${user.name}">`;
}).join("");
}
// 5. showLatestPosts
function showLatestPosts(data) {
const { users, topic_list } = data;
const { topics } = topic_list;
const rows = topics.map(topic => {
return `
<tr>
<td>
<a class="post-title" href="${forumTopicUrl}${topic.slug}/${topic.id}">
${topic.title}
</a>
${forumCategory(topic.category_id)}
</td>
<td>
<div class="avatar-container">
${avatars(topic.posters, users)}
</div>
</td>
<td>${topic.posts_count - 1}</td>
<td>${viewCount(topic.views)}</td>
<td>${timeAgo(topic.bumped_at)}</td>
</tr>
`;
}).join("");
document.getElementById("posts-container").innerHTML = rows;
}
// 6. fetchData
async function fetchData() {
try {
const response = await fetch(forumLatest);
const data = await response.json();
showLatestPosts(data);
} catch (error) {
console.log(error);
}
}
// Run app
fetchData();
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
Challenge Information:
Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard
https://www.freecodecamp.org/learn/javascript-v9/lab-fcc-forum-leaderboard/build-an-fcc-forum-leaderboard`Preformatted text`