Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

JavaScript
1

Tell us what’s happening:

i have problems with step 24 and step 33.All the tests are passing except this two.

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */// URLs
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://sea1.discourse-cdn.com/freecodecamp';

// Categories mapping
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' }
};

// -------------------------------
// 1️⃣ timeAgo function
function timeAgo(timestamp) {
  const then = new Date(timestamp);
  const now = new Date();
  const diffMS = now - then;
  const diffS = diffMS / 1000;
  const diffM = diffS / 60;
  const diffH = diffM / 60;
  const diffD = diffH / 24;

  if (diffM < 60) return `${Math.floor(diffM)}m ago`;
  if (diffH < 24) return `${Math.floor(diffH)}h ago`;
  return `${Math.floor(diffD)}d ago`;
}

// -------------------------------
// 2️⃣ viewCount function
function viewCount(views) {
  return views >= 1000 ? `${Math.floor(views / 1000)}k` : views;
}

// -------------------------------
// 3️⃣ forumCategory function
function forumCategory(id) {
  let selectedCategory = {};
  if (Object.hasOwn(allCategories, id)) {
    selectedCategory = allCategories[id];
  } else {
    selectedCategory = { category: "General", className: "general" };
  }
  return `<a class="category ${selectedCategory.className}" href="${forumCategoryUrl}${selectedCategory.className}/${id}">${selectedCategory.category}</a>`;
}

// -------------------------------
// 4️⃣ avatars function (preserve poster order)
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("/")) src = `${avatarUrl}${src}`;
    return `<img alt="${user.name}" src="${src}"/>`;
  }).join("");
}

// -------------------------------
// 5️⃣ showLatestPosts function
function showLatestPosts({ users, topic_list }) {
  const htmlString = topic_list.topics.map(topic => {
    const { id, slug, title, category_id, posters, posts_count, views, bumped_at } = topic;

    return `
      <tr>
        <!-- First td: post title + category -->
        <td>
          <a class="post-title" href="${forumTopicUrl}${slug}/${id}">${title}</a>
          ${forumCategory(category_id)}
        </td>

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

        <!-- Third td: number of replies -->
        <td>${posts_count - 1}</td>

        <!-- Fourth td: number of views -->
        <td>${viewCount(views)}</td>

        <!-- Fifth td: time since last activity -->
        <td>${timeAgo(bumped_at)}</td>
      </tr>
    `;
  }).join("");

  document.getElementById("posts-container").innerHTML = htmlString;
}

// -------------------------------
// 6️⃣ fetchData function
async function fetchData() {
  try {
    const response = await fetch(forumLatest);
    const json = await response.json();
    showLatestPosts(json);
  } catch (err) {
    console.log(err);
  }
}

// Fetch live data on page load
fetchData();

Your browser information:

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

Challenge Information:

Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

2

Looks like you have avatarUrl changed from the initial code, was that intended?