Hello everyone!#18 for no apparent reason.#18 , it didn’t pass no matter what I wrote.
/* file: script.js */
<!-- file: index.html -->
/* file: styles.css */
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36
Build a Bookmark Manager App - Build a Bookmark Manager App
ILM
February 4, 2026, 1:35pm
2
Hey there,
Please update the message to include your code. The code was too long to be automatically inserted by the help button.
When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (').
const main = document.getElementById(“main-section”);
const form = document.getElementById(“form-section”);
const addBookmarkBtn = document.getElementById(“add-bookmark-button”);
const addBookmarkForm = document.getElementById(“add-bookmark-button-form”);
const categoryDropdown = document.querySelector(“#category-dropdown”);
const categoryList = document.querySelector(“#category-list”);
const categoryName = document.querySelectorAll(“.category-name”);
const viewCategory = document.getElementById(“view-category-button”);
const closeFormBtn = document.getElementById(“close-form-button”);
const closeListBtn = document.getElementById(“close-list-button”);
const nameInput = document.getElementById(“name”);
const urlInput = document.getElementById(“url”);
const bookmarkList = document.getElementById(“bookmark-list-section”);
const deleteBookmarkBtn = document.getElementById(“delete-bookmark-button”);
// Functions
function getBookmarks() {
try {
const bookmarkStorage = localStorage.getItem("bookmarks");
const parsedBookmarks = bookmarkStorage ? JSON.parse(bookmarkStorage) : \[\];
if (parsedBookmarks instanceof Array && parsedBookmarks.every(item => item.name && item.category && item.url)) {
return parsedBookmarks;
} else {
return \[\];
}
} catch {
return \[\];
}
}
function displayOrCloseForm() {
main.classList.toggle(“hidden”);
form.classList.toggle(“hidden”);
}
function displayOrHideCategory() {
main.classList.toggle(“hidden”);
bookmarkList.classList.toggle(“hidden”);
}
// End Functions
//
addBookmarkBtn.addEventListener(“click”, () => {
categoryName.forEach(item => {
item.innerText = categoryDropdown.value;
});
displayOrCloseForm();
});
//
closeFormBtn.addEventListener(“click”, displayOrCloseForm);
//
//
addBookmarkForm.addEventListener(“click”, (e) => {
e.preventDefault();
const bookmarkArray = getBookmarks();
const bookmarkObj = {
name: nameInput.value,
category: categoryDropdown.value,
url: urlInput.value,
}
bookmarkArray.push(bookmarkObj);
localStorage.setItem(“bookmarks”, JSON.stringify(bookmarkArray));
displayOrCloseForm();
nameInput.value = “”;
categoryDropdown.value = “”;
urlInput.value = “”;
});
//
//
deleteBookmarkBtn.addEventListener(“click”, () => {
let deleteBookmark = JSON.parse(localStorage.getItem(“bookmarks”));
deleteBookmark = deleteBookmark.filter(item => {
console.log(item);
})
})
//
//
viewCategory.addEventListener(“click”, () => {
categoryName.forEach(item => {
item.innerText = categoryDropdown.value;
});
categoryList.innerHTML = ``;
const arrayOfBookmarks = getBookmarks()
const bookmarksByCategory = arrayOfBookmarks.filter(item => item.category === categoryDropdown.value);
if (bookmarksByCategory.length === 0) {
categoryList.innerHTML = \`<p>No Bookmarks Found</p>\`;
} else {
bookmarksByCategory.forEach(item => {
categoryList.innerHTML += \`<input type="radio" id="${item.name}" name="bookmark" value="${item.name}"/>
<label for="${item.name}"><a href="${item.url}" target="\_blank">${item.name}</a></label>\`
})
}
displayOrHideCategory();
});
//
//
closeListBtn.addEventListener(“click”, () => {
displayOrHideCategory()
categoryList.innerHTML = ``;
});
//
//
// form.addEventListener(“submit”, (e) => {
// e.preventDefault();
// })
//
ILM
February 4, 2026, 1:56pm
4
please post again your code
LrdCaptainHelmer:
(“form-section”);
curly quotes are a syntax error, please post your code as it comes from your editor otherwise we can’t do any debugging
const main = document.getElementById("main-section");
const form = document.getElementById("form-section");
const addBookmarkBtn = document.getElementById("add-bookmark-button");
const addBookmarkForm = document.getElementById("add-bookmark-button-form");
const categoryDropdown = document.querySelector("#category-dropdown");
const categoryList = document.querySelector("#category-list");
const categoryName = document.querySelectorAll(".category-name");
const viewCategory = document.getElementById("view-category-button");
const closeFormBtn = document.getElementById("close-form-button");
const closeListBtn = document.getElementById("close-list-button");
const nameInput = document.getElementById("name");
const urlInput = document.getElementById("url");
const bookmarkList = document.getElementById("bookmark-list-section");
const deleteBookmarkBtn = document.getElementById("delete-bookmark-button");
// Functions
function getBookmarks() {
try {
const bookmarkStorage = localStorage.getItem("bookmarks");
const parsedBookmarks = bookmarkStorage ? JSON.parse(bookmarkStorage) : [];
if (parsedBookmarks instanceof Array && parsedBookmarks.every(item => item.name && item.category && item.url)) {
return parsedBookmarks;
} else {
return [];
}
} catch {
return [];
}
}
function displayOrCloseForm() {
main.classList.toggle("hidden");
form.classList.toggle("hidden");
}
function displayOrHideCategory() {
main.classList.toggle("hidden");
bookmarkList.classList.toggle("hidden");
}
// End Functions
//
addBookmarkBtn.addEventListener("click", () => {
categoryName.forEach(item => {
item.innerText = categoryDropdown.value;
});
displayOrCloseForm();
});
//
closeFormBtn.addEventListener("click", displayOrCloseForm);
//
//
addBookmarkForm.addEventListener("click", (e) => {
e.preventDefault();
const bookmarkArray = getBookmarks();
const bookmarkObj = {
name: nameInput.value,
category: categoryDropdown.value,
url: urlInput.value,
}
bookmarkArray.push(bookmarkObj);
localStorage.setItem("bookmarks", JSON.stringify(bookmarkArray));
displayOrCloseForm();
nameInput.value = "";
categoryDropdown.value = "";
urlInput.value = "";
});
//
//
deleteBookmarkBtn.addEventListener("click", () => {
let deleteBookmark = JSON.parse(localStorage.getItem("bookmarks"));
deleteBookmark = deleteBookmark.filter(item => {
console.log(item);
})
})
//
//
viewCategory.addEventListener("click", () => {
categoryName.forEach(item => {
item.innerText = categoryDropdown.value;
});
categoryList.innerHTML = ``;
const arrayOfBookmarks = getBookmarks()
const bookmarksByCategory = arrayOfBookmarks.filter(item => item.category === categoryDropdown.value);
if (bookmarksByCategory.length === 0) {
categoryList.innerHTML = `<p>No Bookmarks Found</p>`;
} else {
bookmarksByCategory.forEach(item => {
categoryList.innerHTML += `<input type="radio" id="${item.name}" name="bookmark" value="${item.name}"/>
<label for="${item.name}"><a href="${item.url}" target="_blank">${item.name}</a></label>`
})
}
displayOrHideCategory();
});
//
//
closeListBtn.addEventListener("click", () => {
displayOrHideCategory()
categoryList.innerHTML = ``;
});
//
//
// form.addEventListener("submit", (e) => {
// e.preventDefault();
// })
//
ILM
February 4, 2026, 4:10pm
7
with the code you have provided I do not see test 18 failing, is this the code you were asking about?
can you clarify what issue you are having?
The test is passing for you?
ILM
February 4, 2026, 9:12pm
9
test 18 is passing yes, an other one is failing tho, so please tell us what you need help with specifically
Here are some debugging steps you can follow. Focus on one test at a time:
Are there any errors or messages in the console?
What is the requirement of the failing test?
Check the related User Story and ensure it’s followed precisely.
What line of code implements this?
What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)
If this does not help you solve the problem, please reply with answers to these questions.
Here is a screenshot of the page and the test that isn’t passing
Maybe it’s a browser problem. I use Brave.
What happens when you click the view category button?
Test 18 passes for me as well.
The code you have shared works on my end. Please ensure that you have disabled any extensions that interface with the freeCodeCamp website (such as Dark Mode and Ad Blocker), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.
or - Try the step in incognito or private mode.
or - Ensure your browser is up-to-date or try a different browser.
or - Turn off high contrast themes on Windows (from accessibility settings menu)
I hope one of these will work for you.
Just tested it on Firefox and it worked.
1 Like
How can I report this problem?
ILM
February 6, 2026, 2:39pm
14
do you have browser extensions that could be interfering?
you need to try with no browser extensions and after clearing cache, if the issue persist, and it’s a recent browser version, then please open a bug report about it on github, including the failure messages that appear in the browser console
