Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

JavaScript
1

Tell us what’s happening:

I keep failing at the step where I have to construct the img element in the avatars function

Your code so far

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


/* file: styles.css */


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 = (date) => {
  const diff = Date.now() - new Date(date).getTime();
  const minutes = Math.floor(diff / (1000 * 60));
  const hours = Math.floor(minutes / 60);
  const days = Math.floor(hours / 24);
  if (minutes < 60) {
    return `${minutes}m ago`;
  } else if (hours < 24) {
    return `${hours}h ago`;
  } else return `${days}d ago`;
}

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

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





......

const avatars = (posters, users) => {
  return posters.map(poster => {
    const user = users.find(u => u.id === poster.user_id);
    let src = user.avatar_template.replace("{size}", 30);
    if (!src.startsWith("http")) {
      src = `${avatarUrl}/${src}`;
    }

    return `<img src="${src}" alt="${user.name}"/>`
  }).join("");
}

......




const showLatestPosts = (obj) => {
  const {users, topic_list} = obj;
  const {topics} = topic_list;
  postsContainer.innerHTML = 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>${viewCount(views)}</td>
      <td>${timeAgo(bumped_at)}</td>
    </tr>`
  }).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 (Macintosh; Intel Mac OS X 10_15_7) 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

Your function is returning strings like <img src="https://cdn.freecodecamp.org/curriculum/forum-latest//user_avatar/QuincyLarson_30.png" alt="Quincy Larson"/>, double check the src, isn’t there something wrong?

2 Likes
3

I see now. There was a “/“ between avatarUrl and src. AvatarUrl didn’t end with a hash and avatar_template started with one. Thanks.