Learn Fetch and Promises by Building an fCC Authors Page - Step 17

JavaScript
1

Tell us what’s happening:

When I click “check your code” nothing happens. I have tried on firefox and chrome. Changing my answer doesn’t do anything, though i think it is correct. I dont even get the usual words of affirmation that im on the right track, just nothing happens.

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>freeCodeCamp News Author Page</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1 class="title">freeCodeCamp News Author Page</h1>

    <main>
      <div id="author-container"></div>
      <button class="btn" id="load-more-btn">Load More Authors</button>
    </main>

    <script src="./script.js"></script>
  </body>
</html>

/* file: script.js */
const authorContainer = document.getElementById('author-container');
const loadMoreBtn = document.getElementById('load-more-btn');

let startingIndex = 0;
let endingIndex = 8;
let authorDataArr = [];

fetch('https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json')
  .then((res) => res.json())
  .then((data) => {
    authorDataArr = data;
    displayAuthors(authorDataArr.slice(startingIndex, endingIndex));
  })
  .catch((err) => {
    console.error(`There was an error: ${err}`);
  });

const displayAuthors = (authors) => {
  authors.forEach(({ author, image, url, bio }, index) => {
    authorContainer.innerHTML += `
    <div id="${index}" class="user-card">
      <h2 class="author-name">${author}</h2>

// User Editable Region

<img class="user-img" src="${image}" alt="${author} avatar"></img>

// User Editable Region

    </div>
  `;
  });
};

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

:root {
  --main-bg-color: #1b1b32;
  --light-grey: #f5f6f7;
  --dark-purple: #5a01a7;
  --golden-yellow: #feac32;
}

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

.title {
  color: var(--light-grey);
  margin: 20px 0;
}

#author-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.user-card {
  border-radius: 15px;
  width: 300px;
  height: 350px;
  background-color: var(--light-grey);
  margin: 20px;
}

.user-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
}

.purple-divider {
  background-color: var(--dark-purple);
  width: 100%;
  height: 15px;
}

.author-name {
  margin: 10px;
}

.bio {
  margin: 20px;
}

.error-msg {
  color: var(--light-grey);
}

.btn {
  cursor: pointer;
  width: 200px;
  margin: 10px;
  color: var(--main-bg-color);
  font-size: 14px;
  background-color: var(--golden-yellow);
  background-image: linear-gradient(#fecc4c, #ffac33);
  border-color: var(--golden-yellow);
  border-width: 3px;
}

Your browser information:

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

Challenge Information:

Learn Fetch and Promises by Building an fCC Authors Page - Step 17

2

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

3

why do you have an </img> closing tag?

4

none of these worked :confused:

5

good point, but did not change anything to remove

6

here you have an unclosed attribute

7

throw away your internet, then, it’s broken

the code passes, even with the various syntax errors flagged above

8

I really think its an error on fCC’s end. The code I put in doesn’t matter, so I don’t know why you keep looking for errors. I have tried multiple browsers, computers, and using data instead of wifi. Maybe the lesson could be reset for my account or something. It’s clear there is some kind of unusual error going on.

9

sorry if I sounded snarky here btw, just frustrated lol

10

For me that code passes, so the issue is not with the site itself.
There seem to be an incompatibility with what you are using the and the site.

Can you open the browser console (F12), then run the tests, and share if there is any message appearing?

11

image
image2553×949 266 KB

12

image
i believe this is what comes up right when i hit the check code button

14

I assume you were able to make it to this step (step 17) without issue. Are you able to pass any other steps on that project? If you skip ahead to step 18, 19, etc - can you pass those?

15

Just tried step 18 and no, it has the same problem. I click check your code and nothing happens. However I did move on to the next lesson where you build a forum leaderboard and completed that entire lesson.

16

The seed of step 17 should fetch the authors and log them to the console. I don’t see them in your console screen shot. Are you seeing them anywhere? Something you could try is disabling the cache - go to the network tab and find and tick the “disable cache” checkbox. Maybe refresh the page and try again?

Kinda seems like it might be just hanging waiting for that fetch - or going really slow. Or just not working.

You could also check the status of that request in the network tab. It will be to that URL: https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json

17

image
image864×183 8.07 KB

I found this after clicking the button a few times if it helps. Just tried the disable cache but that wasn’t working either.

18

that’s also weird, the tests use a mocked fetch, the tests are not actually fetching, it should work

this the file for reference freeCodeCamp/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-fetch-and-promises-by-building-an-fcc-authors-page/641da803d9892447d059804e.md at 9b8d3b7a6a2fdf3bae579d28f1d1957dbb2964ad · freeCodeCamp/freeCodeCamp · GitHub

19

I was actually wrong about the authors showing up in the console at the start of step 17 - that’s on step 16.

So what seems to be maybe happening here, is that the tests are setting the image src to http://not-a-real-url.nowhere/no-image.jpg - and the test frame tries to request that image - and some browsers handle it differently or something. Mine seems to auto upgrade it to https:

Screenshot 2025-04-14 at 4.17.36 PM
Screenshot 2025-04-14 at 4.17.36 PM3282×104 27.2 KB

Seems like yours is doing that as well, but I am still able to pass the step - and yours is causing some kind of block or error or something. It could be something beyond the browser itself and something on the network or a VPN - not sure.

Anyway, GPT suggested to set that image data to 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==' - it’s a 1x1 transparent pixel - and said that browsers don’t request images if they use a data source like that. So that could solve the issue.

20

Would you mind walking me through how to do that? Never done something like this before. Appreciate both of yalls help

21

That’s not something you would do on your end - that’s something we would need to fix.

You could try looking in your browser security settings and finding something like an “HTTPS everywhere” option and disabling it - just to complete those last few steps - then turn it back on. Not sure if that would work - like I said, it could be above the browser.