Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

JavaScript
1

Tell us what’s happening:

cannot pass test 28, any help? It is tough to figure it out
28. Your fetchData function should call showLatestPosts .

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://sea1.discourse-cdn.com/freecodecamp';

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(timestamp) {
    const now = new Date();
    const postDate = new Date(timestamp);
    const diffInSeconds = Math.floor((now - postDate) / 1000);

    if (diffInSeconds < 60) {
        return `${diffInSeconds} seconds ago`;
    } else if (diffInSeconds < 3600) {
        const minutes = Math.floor(diffInSeconds / 60);
        return `${minutes}m ago`;
    } else if (diffInSeconds < 86400) {
        const hours = Math.floor(diffInSeconds / 3600);
        return `${hours}h ago`;
    } else {
        const days = Math.floor(diffInSeconds / 86400);
        return `${days}d ago`;
    }
}

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

function forumCategory(id) {
  const category = allCategories[id];
  const categoryName = category ? category.category : 'General';
  const className = category ? category.className : 'general';
  return `<a href="${forumCategoryUrl}${className}/${id}" class="category ${className}">${categoryName}</a>`;
}


function avatars(posters, users) {
  return posters.map(poster => {
    const user = users.find(user => user.id === poster.user_id);
    if (user) {
      let avatar = user.avatar_template.replace('{size}', 30);
      if (avatar.startsWith('/')) {
        avatar = `${avatarUrl}${avatar}`;
      }
      const altText = user.name || user.username;
      return `<img src="${avatar}" alt="${altText}" />`;
    }
    return '';
  }).join('');
}



function showLatestPosts(data){
  const { users, topic_list } = data;
  const postsContainer = document.getElementById('posts-container');
  const postsHtml = topic_list.topics.map(topic => {
    const { id, title, views, posts_count, slug, posters, category_id, bumped_at } = topic;
    return `
      <tr>
        <td>
          <a href="${forumTopicUrl}${slug}/${id}" class="post-title">${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('');
  postsContainer.innerHTML = postsHtml;
}

async function fetchData() {
  try {
    let response = await fetch(forumLatest);
    let data = await response.json();
    showLatestPosts(data);
  } catch (error) {
    console.log(error);
  }
}

fetchData();

Your browser information:

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

Challenge Information:

Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

2

There could be some problem which causes showLatestPosts(data) not to be called.

Add some console.log()s for response and data to see what those are.

catch (error) {
    console.log(error);

Is this logging any errors to the console?