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

JavaScript
1

Tell us what’s happening:

For some reason this isn’t working. I’ve double checked everything. Tried resetting.

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

const authorContainer = document.getElementByID("author-container");
const loadMoreBtn = document.getElementByID("load-more-btn");

// User Editable Region

Your browser information:

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

Challenge Information:

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

2
  • there is a typo, double check method name

happy coding :slight_smile:

3

Thanks, I found it. The D in ID has to be lower case. Which is weird because ID is an acronym, which are all uppercase in English.

4

Probably because an id is a lower case HTML attribute, so it becomes more about camel case rules for the naming, than English rules. Sure, an id is an abbreviation, but it also isn’t uppercase in the HTML.

There are both methods and properties that end with all uppercase, like getElementsByTagNameNS where NS is namespace, or the documentURI property. But they do not refer to lowercase HTML attributes.

2 Likes
5

Thanks for explaining that!