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

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>
<img class="user-img" src="${image}" alt="${author} avatar">
    </div>
  `;
  });
};

It ask me to create an img element, Ive done it and it keeps giving me a test timed out error. I dont know why.

I tested it on my end and it is working for me.

Try resetting the lesson and only adding the image again.


Still no luck. Steps 17-19 are giving me the same error.

Can you try another browser?

I am testing your code on google chrome with extensions off and I am not able to reproduce the error you are seeing

1 Like


Oh it worked on chrome! Weird that it doesn’t work safari though. Thank you for helping me!