Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

JavaScript
1

Tell us what’s happening:

Hi, my code keeps failing on 32 and I do not understand why. It’s rendering properly in the UI as well, I have removed all spaces but it still does not pass.

Error: 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.

Your code so far

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


/* file: styles.css */


/* file: script.js */

   const topProps = 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}">${title}</a>${forumCategory(category_id)}</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>`
  });
   const postContainer = document.getElementById("posts-container");

return postContainer.innerHTML = topProps.join("")
};

async function fetchData(){

try{
  const response = await fetch(forumLatest);
  const 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/147.0.0.0 Safari/537.36

Challenge Information:

Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

2

Hi @Chirovofiel

Please post the full script file contents.

Looks like there is a return statement that is not part of a function.

Happy coding

3 
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: 'Back-End Development', className: 'backend' }
};

const timeAgo = time=>{

  const userTime = +new Date(time);
  const currTime = +new Date();
  const diff = currTime - userTime;
  if(diff < 3600000){
    return `${Math.abs(Math.floor(diff / 60000))}m ago`
  }else if(diff  < 86400000){
     return `${Math.abs(Math.floor(diff /3600000))}h ago`
  }else{
    return `${Math.abs(Math.floor(diff / 86400000))}d ago`
  }

}



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


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


const avatars = (posters, users)=>{

  const poster = posters.map(userId => {
let fullPath;


const theUser = users.find(user => user.id === userId.user_id);
const avatarTemplate = theUser.avatar_template
  if(avatarTemplate.startsWith('/')){
      fullPath = `${avatarUrl}${avatarTemplate}`;

  }else{
fullPath =avatarTemplate;

  }
  const changeS = fullPath.replace('{size}',30);

  return `<img alt="${theUser.name}" src="${changeS}">`
  })
  return poster.join("")
};

const showLatestPosts = (data) => {
  const {users, topic_list} = data;
  const {topics} = topic_list;

   const topProps = 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}">${title}</a>
    ${forumCategory(category_id)}</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>`
  });
   const postContainer = document.getElementById("posts-container");

return postContainer.innerHTML = topProps.join("")
};

async function fetchData(){

try{
  const response = await fetch(forumLatest);
  const data = await response.json();
showLatestPosts(data)
}
catch(error) {
  console.log(error) 
}
};

fetchData()
4

Hi @Chirovofiel

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 <forumTopicUrl><slug>/<id>, an anchor text of <title>, and the second obtained by calling forumCategory with category_id.

You need to two anchor elements in the first table data cell.

Happy coding