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 testexpected: 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
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