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

Tell us what’s happening:

Step 11
Now it’s time to start building the HTML for the page with your destructured data. You can do this with a combination of the compound assignment operator (+=) and the innerHTML property.

Inside your callback function, use the compound assignment operator to append an empty template literal to the innerHTML of authorContainer.

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: 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;
}
/* 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) => {
    console.log(data);   
  })
  .catch((err) => {
    console.error(`There was an error: ${err}`);
  });

const displayAuthors = (authors) => {
  authors.forEach(({ author, image, url, bio }, index) => {

// User Editable Region

authorContainer = document.getElementById("author-container").innerHTML += '${}'
  });
};

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/124.0.0.0

Challenge Information:

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

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

Inside my callback function, I’m trying to learn how to use the compound assignment operator to append an empty template literal to the innerHTML of an HTML element.

It looks like you have a few issues.
I would suggest resetting the code

You already queried the page to get the author container.
So you don’t need this part here

Also, you want to make sure to use the correct syntax for innerHTML

Also, you can look to other projects you worked on like the music player to see other examples of how to correctly work with innerHTML

For example, here

you worked with innerHTML here

playlistSongs.innerHTML = songsHTML;

Once you fix that, you need to fix this

that is incorrect

the lesson wants you to use an empty template literal

once you fix that, then it will pass

hope that helps

This was so helpful! Thank you! Here’s what passed: authorContainer.innerHTML += ``;