Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

JavaScript
1

Tell us what’s happening:

My code passes all tests except for test 14: “forumCategory(299) should return a string containing an anchor element with the text Career Advice”. However, when i log forumCategory(299), the text content is indeed “Career Advice”. I’ve verified that allCategories.hasOwnProperty(categoryId) is true in this exact execution context. Could this possibly be an issue with the test or am I missing something?

Your code so far

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


/* file: styles.css */


/* file: script.js */

Your browser information:

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

Challenge Information:

Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

2

Can you please share your code in a new comment here or editing your previous post and inserting it?

It may have been too long to transfer to your post automatically

3

Here’s my code. Thanks in advance!

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 postsContainer = document.getElementById('posts-container');

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' }
};

const timeAgo = (timestamp) => {
  const timestampConverted = new Date(timestamp).getTime();
  const currentTime  = Date.now();
  const timeDifferenceInMinutes = (currentTime - timestampConverted) / 60000 ;

  switch(true){
    case timeDifferenceInMinutes < 60:
      return `${Math.floor(timeDifferenceInMinutes)}m ago`;
    case timeDifferenceInMinutes < 1440:
      return `${Math.floor(timeDifferenceInMinutes / 60)}h ago`;
    case timeDifferenceInMinutes >= 1440:
      return `${Math.floor(timeDifferenceInMinutes / 1440)}d ago`;
  }
};

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

const forumCategory = (categoryId) => {
  if (allCategories.hasOwnProperty(categoryId)){
    const selectedCategory = allCategories[categoryId];
    return `
    <a class="category ${selectedCategory.className}" href="${forumCategoryUrl}${selectedCategory.className}/${categoryId}"> ${selectedCategory.category}</a>`;
  } else {
    return `<a class="category general" href="${forumCategoryUrl}general/${categoryId}">General</a>`;
  }
};

const avatars = (postersArr, usersArr) => {
  //get all user IDs from posters array
  const posterIds = [];
  postersArr.forEach((poster) => {
    const posterId = poster.user_id;
    posterIds.push(posterId)
  })

  //get user data from users array, modify avatar sizing
  const userData = [];
  posterIds.forEach((id) => {
    const userObj = usersArr.find((user) => user.id === id);
    const resizedAvatar = userObj.avatar_template.replace('{size}', '30');
    userObj.avatar_template = resizedAvatar;
    userData.push(userObj)
  })

  //assemble string of img element with user data
  const imgStrings = [];
  userData.forEach(({name, avatar_template}) => {
    const imgString = `<img src="${avatarUrl}${avatar_template}" alt="${name}">`
    imgStrings.push(imgString)
  })
  return imgStrings.join('')
};

const showLatestPosts = (forumObject) => {
  const users = forumObject.users;
  const topicsArr = forumObject.topic_list.topics;
  const tableContent = [];

  topicsArr.forEach(({id, title, views, posts_count, slug, posters, category_id, bumped_at}) => {
    const tableRow = `
    <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>${viewCount(views)}</td>
      <td>${timeAgo(bumped_at)}</td>
    </tr>`;
    tableContent.push(tableRow);
  })
  postsContainer.innerHTML = tableContent.join('');
};

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

Revisiting this, I realized that the test wasn’t passing because of preceding whitespace on the returned anchor element. Brainfart!

1 Like
5

Crushing it, boss! Nice work on being persistent.

1 Like