Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

JavaScript
1

Tell us what’s happening:

I can’t pass test 14, 17 and 33

  • I think test 14 and 17 are broken because my function forumCategory() works with the test case (see console logs) and looking into the browser’s console, the error message says the test expected: undefined ( I tried to run the tests with no extensions, both in firefox and chrome)
  • About the test 33, the variable avatarUrl using discourse CDN sea1 the images don’t load for me. Using sea3 it loads all the images correctly but the test fail.

I appreciate your help :slightly_smiling_face:

Your code so far

<!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>

* {
  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;
  }
}

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

const timeAgo = (timestamp) => {
  const givenTime = Date.parse(timestamp);
  const currentTime = Date.now();
  const differenceInMilliseconds = currentTime - givenTime;
  const differenceInSeconds = Math.floor(differenceInMilliseconds / 1000);
  const differenceInMinutes = Math.floor(differenceInSeconds / 60);
  if (differenceInMinutes < 60) {
    return `${differenceInMinutes}m ago`;
  }

  const differenceInHours = Math.floor(differenceInMinutes / 60);
  if (differenceInHours < 24) {
    return `${differenceInHours}h ago`;
  }

  const differenceInDays = Math.floor(differenceInHours / 24);
  return `${differenceInDays}d ago`;
}

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

const forumCategory = (id) => {
  let category = {
    category: "General",
    className: "general"
  };

  const allCategoriesHasId = Object.keys(allCategories).includes(`${id}`);
  if (allCategoriesHasId) {
    category = allCategories[`${id}`];
  }

  return `<a class="category ${category.className}" href="${forumCategoryUrl}${category.className}/${id}">${category.category}</a>`
}

const avatars = (posters, users) => {
  let avatars = "";

  posters.forEach((poster) => {
    const posterUsers = users.filter((user) => poster.user_id === user.id);

    posterUsers.forEach(({name, avatar_template}) => {
      let src = avatar_template.replace("{size}", "30");
      
      const srcHasRelativePath = avatar_template.startsWith("/user_avatar/");
      if (srcHasRelativePath) {
        src = `${avatarUrl}${src}`;
        avatars += `<img src="${src}" alt="${name}" />`;
      }
    });
  });

  return avatars;
}

const showLatestPosts = (forumLatest) => {
  const users = forumLatest.users;
  const topics = forumLatest.topic_list.topics;

  const postsContainer = document.querySelector("#posts-container");
  postsContainer.innerHTML = topics.map(({id, title, views, posts_count, slug, posters, category_id, bumped_at}) => {
    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>`);
  }).join("");
}

const fetchData = async () => {
  try {
    const response = await fetch(forumLatest);
    if (!response.ok) {
      throw new Error("Response was not OK");
    }
    const data = await response.json();
    showLatestPosts(data);
  } catch (err) {
    console.log(err);
  }
}

fetchData();

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:140.0) Gecko/20100101 Firefox/140.0

Challenge Information:

Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

2

I am not sure what the error in the console wants to say, but the test is

let actual = forumCategory(299);
assert.match(actual, /^<\s*a.+?>\s*Career Advice\s*<\/a>$/);
// prevent hardcoding

actual = forumCategory(409);
assert.match(actual, /^<\s*a.+?>\s*Project Feedback\s*<\/a>$/);

yes, it doesn’t expect the going to a new line you have going on in the output there, if you remove that tests 14 and 17 pass

3

I removed the newline in the function return and tests 14 and 17 passed. And test 33 what should I do?

4

it’s generating the wrong image

image

you need to fix that

1 Like
5

I reworked avatars function and now all tests pass, but yet the images don’t appear:

image
image734×235 20.3 KB

Now using avatarUrl with https://sea3.discourse-cdn.com/freecodecamp (instead https://sea1.discourse-cdn.com/freecodecamp):

image
image734×242 25.5 KB

Using sea3 some tests broke.
At least I could finish the lab using sea1!

6

probably Discourse (the software of the forum) changed how they store images, but the data we use in the lab is old

1 Like
7

if you want you can submit a bug report about this

1 Like
9
1 Like
10

Thank you for having opened the issue