Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

JavaScript
1

Tell us what’s happening:

I cant pass Test 24. and 33. Both are with the Avatar function. I don´t get how the Test want´s me to check that the avatar has a relative path. I tried with !...startsWith("http") and i tried with startsWith("/")
and startsWith("/user_avatar/") nothing works and I am kinda lost right now. i even tried replacing the /user_avatar/ with "" but it doesnt work either…How am i supossed to solve it?

Your code so far

<!-- file: index.html -->
haven´t been touched (reseted lesson and copy pasted it)

/* 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://sea1.discourse-cdn.com/freecodecamp';
const postContainer = 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 now = new Date();
    const past = new Date(date);
    const diff = Math.floor((now - past) / 1000);
    if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
    if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
    return `${Math.floor(diff / 86400)}d ago`;
};

const viewCount = views => views >= 1000 ? Math.floor(views / 1000) + 'k' : views;

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

const avatars = (posters, users) => posters.map(({ user_id }) => {
    const user = users.find(({ id }) => id === user_id);
    if (!user) return '';
    const size = user.avatar_template.replace('{size}', '30');
    const src = user.avatar_template.startsWith("/")  ? `${avatarUrl}/${size}` : size;
    return `<img src="${src}" alt="${user.name}" />`;
}).join('');

const showLatestPosts = obj => {
    postContainer.innerHTML = obj.topic_list.topics.map(topic => {
        const calledTimeAgo = timeAgo(topic.bumped_at);
        console.log(obj.users)
        const calledAvatars = avatars(topic.posters, obj.users);
        const calledViews = viewCount(topic.views);
        const calledForumCategory = forumCategory(topic.category_id);

        return `<tr>
            <td><a class="post-title" href="${forumTopicUrl}${topic.slug}/${topic.id}">${topic.title}</a>${calledForumCategory}</td>
            <td><div class="avatar-container">${calledAvatars}</div></td>
            <td>${topic.posts_count - 1}</td>
            <td>${calledViews}</td>
            <td>${calledTimeAgo}</td>
        </tr>`;
    }).join('');
};

async function fetchData() {
    try {
        const response = await fetch(forumLatest);
        const data = await response.json();
        return showLatestPosts(data);
    } catch (error) {
        return 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/136.0.0.0 Safari/537.36

Challenge Information:

Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

2

Try logging src…is that what you expect to see?