Tell us what’s happening:
Within the paragraph element, replace bio with a ternary operator. For the condition, check if the length of bio is greater than 50. If it is, use the .slice() method to extract the first 50 characters of bio and add an ellipsis at the end. Otherwise, show the full bio .
Error:
Sorry, your code does not pass. Hang in there.
If the bio text is greater than 50 characters, you should extract the first 50 characters with slice() and replace the rest with .... Don’t forget that indexes are zero-based.
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) => {
authorDataArr = data;
displayAuthors(authorDataArr.slice(startingIndex, endingIndex));
})
.catch((err) => {
console.error(`There was an error: ${err}`);
});
const fetchMoreAuthors = () => {
startingIndex += 8;
endingIndex += 8;
displayAuthors(authorDataArr.slice(startingIndex, endingIndex));
if (authorDataArr.length <= endingIndex) {
loadMoreBtn.disabled = true;
loadMoreBtn.textContent = 'No more data to load';
}
};
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 class="purple-divider"></div>
/* User Editable Region */
<p class="bio">${bio.length>50?bio.slice(0,50): bio}</p>
/* User Editable Region */
<a class="author-link" href="${url}" target="_blank">${author}'s author page</a>
</div>
`;
});
};
loadMoreBtn.addEventListener('click', fetchMoreAuthors);
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Challenge Information:
Learn Fetch and Promises By Building an fCC Authors Page - Step 27