Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard Step 33

Curriculum Help
1

Tell us what’s happening:

Test 33 keeps failing and I am a bit confused on what the problem is.

So far I have figured out, that the example project has the pictures ordered a bit differently.

Maybe because of User Story #12:
“Each “img” element should have a “src” attribute set to the “avatar_template” of the matched user. if “avatar_template” starts with “/”, prepend “avatarUrl” directly to it.”

My function doesn’t check for a “/” at the beginning, is it because of that?

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fCC Forum Leaderboard</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <header>
      <nav>
        <img
          class="fcc-logo"
          src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg"
          alt="freeCodeCamp logo"
        />
      </nav>
      <h1 class="title">Latest Topics</h1>
    </header>
    <main>
      <div class="table-wrapper">
        <table>
          <thead>
            <tr>
              <th id="topics">Topics</th>
              <th id="avatars">Avatars</th>
              <th id="replies">Replies</th>
              <th id="views">Views</th>
              <th id="activity">Activity</th>
            </tr>
          </thead>
          <tbody id="posts-container"></tbody>
        </table>
      </div>
    </main>
    <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --main-bg-color: #2a2a40;
  --black: #000;
  --dark-navy: #0a0a23;
  --dark-grey: #d0d0d5;
  --medium-grey: #dfdfe2;
  --light-grey: #f5f6f7;
  --peach: #f28373;
  --salmon-color: #f0aea9;
  --light-blue: #8bd9f6;
  --light-orange: #f8b172;
  --light-green: #93cb5b;
  --golden-yellow: #f1ba33;
  --gold: #f9aa23;
  --green: #6bca6b;
}

body {
  background-color: var(--main-bg-color);
}

nav {
  background-color: var(--dark-navy);
  padding: 10px 0;
}

.fcc-logo {
  width: 210px;
  display: block;
  margin: auto;
}

.title {
  margin: 25px 0;
  text-align: center;
  color: var(--light-grey);
}

.table-wrapper {
  padding: 0 25px;
  overflow-x: auto;
}

table {
  width: 100%;
  color: var(--dark-grey);
  margin: auto;
  table-layout: fixed;
  border-collapse: collapse;
  overflow-x: scroll;
}

#topics {
  text-align: start;
  width: 60%;
}

th {
  border-bottom: 2px solid var(--dark-grey);
  padding-bottom: 10px;
  font-size: 1.3rem;
}

td:not(:first-child) {
  text-align: center;
}

td {
  border-bottom: 1px solid var(--dark-grey);
  padding: 20px 0;
}

.post-title {
  font-size: 1.2rem;
  color: var(--medium-grey);
  text-decoration: none;
}

.category {
  padding: 3px;
  color: var(--black);
  text-decoration: none;
  display: block;
  width: fit-content;
  margin: 10px 0 10px;
}

.career {
  background-color: var(--salmon-color);
}

.feedback,
.html-css {
  background-color: var(--light-blue);
}

.support {
  background-color: var(--light-orange);
}

.general {
  background-color: var(--light-green);
}

.javascript {
  background-color: var(--golden-yellow);
}

.backend {
  background-color: var(--gold);
}

.python {
  background-color: var(--green);
}

.motivation {
  background-color: var(--peach);
}

.avatar-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.avatar-container img {
  width: 30px;
  height: 30px;
}

@media (max-width: 750px) {
  .table-wrapper {
    padding: 0 15px;
  }

  table {
    width: 700px;
  }

  th {
    font-size: 1.2rem;
  }

  .post-title {
    font-size: 1.1rem;
  }
}

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

function timeAgo(time){
  const curr = new Date();
  const custom = new Date(time);
  let timePassed = (curr - custom) / 1000 / 60;

  if (timePassed < 60) return Math.floor(timePassed) + "m ago";
  timePassed /= 60;

  if (timePassed < 24) return Math.floor(timePassed) + "h ago";
  timePassed /= 24;
  return Math.floor(timePassed) + "d ago";
}

function viewCount(num){
  if (num >= 1000) return Math.floor(num / 1000) + "k";
  return num;
}

function forumCategory(id){
  if (!allCategories[id]){
    allCategories[id] = {
      category: "General",
      className: "general"
    }
  }

  return `<a class="category ${allCategories[id].className}" href="${forumCategoryUrl + allCategories[id].className + "/" + id}">${allCategories[id].category}</a>`;
}

function avatars(posters, users){
  let final = "";
  users
    .filter((user) => {
      for (const poster of posters){
        if (user.id !== poster.user_id){
          continue;
        } else{
          return user.id === poster.user_id;
        }
      }
    })
    .forEach((user) => {
      final += `<img src="${avatarUrl + user.avatar_template.replace(/\{size\}/, 30)}" alt="${user.name}">`;
    });
  
  return final;
}

function showLatestPosts(list){
  const users = list.users;
  const topics = list.topic_list.topics;

  for (const topic of topics){
    const id = topic.id;
    const title = topic.title;
    const views = topic.views;
    const postsCount = topic.posts_count;
    const slug = topic.slug;
    const posters = topic.posters;
    const categoryId = topic.category_id;
    const bumpedAt = topic.bumped_at;
    postsContainer.innerHTML += `
    <tr>
      <td>
        <a class="post-title" href="${forumTopicUrl + slug}/${id}">${title}</a>
        ${forumCategory(categoryId)}
      </td>
      <td>
        <div class="avatar-container">
          ${avatars(posters, users)}
        </div>
      </td>
      <td>
        ${postsCount - 1}
      </td>
      <td>
        ${views}
      </td>
      <td>
        ${timeAgo(bumpedAt)}
      </td>
    </tr>`;
  }
}

async function fetchData(){
  fetch(forumLatest)
    .then((res) => res.json())
    .then((data) => showLatestPosts(data))
    .catch((err) => console.log(err));
}
fetchData();

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0

Challenge Information:

Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-fcc-forum-leaderboard/673c91f0b934834bc4a3ecc2.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

it seems it’s getting the wrong images, the test is saying it finds the actual value when there should the expected value

actual:   "https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/jwilkins.oboe_30.png"
expected: "https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/ilenia_30.png"

this can be an issue with the rendered HTML, like are you resetting the elements, before showLatestPosts creates its output, or with the functions that create the HTML

3

I’m sorry, I don’t understand your explanation, below the “actual: expected:” block, could you clarify?

4

the tests are checking the code that result on the page (but don’t depend on the API, so don’t worry even if you see al blank), if they are getting the wrong value for the image, this can be that your code is not removing the existing HTML before creating the new one, or there is an issue in creating the correct HTML

btw, this test is testing with this data

const data = {
  users: [
    {
      avatar_template:
        '/user_avatar/QuincyLarson_{size}.png',
      id: 6,
      name: 'Quincy Larson',
      username: 'QuincyLarson'
    },
    {
      avatar_template:
        '/user_avatar/jwilkins.oboe_{size}.png',
      id: 285941,
      name: 'Jessica Wilkins',
      username: 'jwilkins.oboe'
    },
    {
      avatar_template:
        '/user_avatar/ilenia_{size}.png',
      id: 170865,
      name: 'Ilenia',
      username: 'ilenia'
    }
  ],
  topic_list: {
    topics: [
      {
        bumped_at: '2024-04-15T16:01:26.403Z',
        category_id: 1,
        id: 684569,
        posters: [{ user_id: 6 }, { user_id: 170865 }, { user_id: 285941 }],
        posts_count: 8,
        slug: 'the-freecodecamp-podcast-is-back-now-with-video',
        title: 'The freeCodeCamp Podcast is back – now with video',
        views: 542
      },
      {
        bumped_at: '2024-04-19T13:52:03.523Z',
        category_id: 421,
        id: 686149,
        posters: [{ user_id: 170865 }],
        posts_count: 1,
        slug: 'problem-with-making-changes-to-styles-js',
        title: 'Problem with making changes to styles. (JS)',
        views: 9
      }
    ]
  }
};

looking at the rendered data, I think the avatars are in the wrong order, the tests expect jwilkins.oboe’s avatar to be last, instead it’s in the middle

image
image202×302 10 KB

5

oooh, I think I now see what the problem exactly is.

in the topic list which you shared, jwilkins is before Ilenia in the “users” array, but in the posters array, Ilenia’s id is before jwilkins’ id and my code isn’t checking the order in which they appear in the posters array, but in the users array

6

got it, that was the exact problem, I had to arrange the pictures in the order they appear in the “posters” array, not the “users” array