Build an fCC Authors Page - Step 8

JavaScript
1

Tell us what’s happening:

freeCodeCamp News Author Page
Step 8
Now, it is time to create the function that will be responsible for displaying the authors on the page.
Start by creating a function called displayAuthors that takes an authors parameter. Your function should then loop through the authors array and add a card for each author to the #authorContainer element.

The card should have the following structure:

Example Code

${author}

Tips:

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 */

// User Editable Region

function displayAuthors(authors) {
  const authorContainer = document.getElementById("authorContainer");
  authorContainer.innerHTML = "";

  authors.forEach((author, index) => {
    authorContainer.innerHTML += `
      <div id="${index}" class="user-card">
        <h2 class="author-name">${author[0].name}</h2>
      </div>
    `;
  });
}

// 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/142.0.0.0 Safari/537.36

Challenge Information:

Build an fCC Authors Page - Step 8

2

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!

3

i trying to pass the test 3, i trying to know where the code is wrong in displayAuthors()

4

Look at the code that’s already been written. Does this line look familiar?

Also, note that you are logging the data returned by the fetch so you can see what type of data you are working with in the console. Given the way you have written your code, what type of data structure is author? You can always log typeof author inside the forEach() to find out. Then, knowing that, what do you need to do to actually get at the author property?

5

thank is finally resolved