Tell us what’s happening:
Test 11 (adding a bookmark to local storage) is failing. The errors logged to the console don’t have enough information for me to tell what lines they’re referring to, so I’m relying on my local environment, where everything runs fine. I console log the local storage after adding to it, and everything’s in the right order. Similarly for 18, 19, 20, 22, 23 — everything seems to perform to requirements. Any guidance will be greatly appreciated.
Your code so far
/* file: script.js */
let bookmarks = [];
let selectedCategory = '';
const mainSection = document.getElementById("main-section");
const formSection = document.getElementById("form-section");
const bookmarkListSection = document.getElementById("bookmark-list-section");
const categoryList = document.getElementById("category-list");
const addBookmarkButton = document.getElementById("add-bookmark-button");
const closeFormButton = document.getElementById("close-form-button");
const addBookmarkFormButton = document.getElementById("add-bookmark-button-form")
const viewCategoryButton = document.getElementById("view-category-button");
const closeListButton = document.getElementById("close-list-button");
const deleteBookmarkButton = document.getElementById("delete-bookmark-button");
const getBookmarks = () => {
const storedBookmarks = localStorage.getItem("bookmarks");
if (storedBookmarks) {
try {
bookmarks = JSON.parse(storedBookmarks);
if (!Array.isArray(bookmarks)) {
bookmarks = [];
} else {
bookmarks = bookmarks.filter(item => item && typeof item === 'object' && 'name' in item && 'category' in item && 'url' in item);
}
} catch (error) {
bookmarks = [];
}
}
return bookmarks
}
const displayOrCloseForm = () => {
mainSection.classList.toggle("hidden");
formSection.classList.toggle("hidden");
}
const displayOrHideCategory = () => {
mainSection.classList.toggle("hidden");
bookmarkListSection.classList.toggle("hidden");
}
addBookmarkButton.addEventListener("click", () => {
displayOrCloseForm();
const chosenCategory = document.getElementById("category-dropdown");
const selectedValue = chosenCategory.value;
const categoryNames = document.querySelectorAll(".category-name");
categoryNames.forEach((category) => category.innerText = selectedValue);
});
addBookmarkFormButton.addEventListener("click", () => {
const nameInputEl = document.getElementById("name");
const categoryInputEl = document.querySelector("h2.category-name");
const urlInputEl = document.getElementById("url");
const bookmark = {
name: nameInputEl.value,
category: categoryInputEl.innerText,
url: urlInputEl.value
}
bookmarks.push(bookmark);
localStorage.setItem("bookmarks", JSON.stringify(bookmarks))
nameInputEl.value = '';
urlInputEl.value = '';
displayOrCloseForm()
})
viewCategoryButton.addEventListener("click", () => {
const chosenCategory = document.getElementById("category-dropdown");
selectedCategory = chosenCategory.value;
viewCategoryList();
});
const viewCategoryList = () => {
categoryList.innerHTML = ''; // Clear previous bookmarks
const filteredBookmarks = bookmarks.filter(bookmark => bookmark.category === selectedCategory);
if (filteredBookmarks.length > 0) {
filteredBookmarks.forEach(bookmark => {
const radioId = bookmark.name;
categoryList.innerHTML += `
<div>
<input type="radio" id="${radioId}" name="bookmark" value="${bookmark.name}" />
<label for="${radioId}">
<a href="${bookmark.url}" target="_blank">${bookmark.name}</a>
</label>
</div>
`;
});
} else {
categoryList.innerHTML = "<p>No Bookmarks Found</p>";
}
if (bookmarkListSection.classList.contains("hidden")) {
displayOrHideCategory();
}
}
const deleteBookmark = () => {
const selectedRadio = document.querySelector('input[name="bookmark"]:checked');
if (!selectedRadio) {
alert("Please select a bookmark to delete.");
return;
}
const bookmarkToDelete = selectedRadio.value;
const bookmark = bookmarks.find(b => b.name === bookmarkToDelete);
if (bookmark) {
selectedCategory = bookmark.category;
bookmarks = bookmarks.filter(bookmark => bookmark.name !== bookmarkToDelete);
localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
alert(`${bookmarkToDelete} has been deleted.`);
viewCategoryList();
}
}
closeFormButton.addEventListener("click", displayOrCloseForm);
closeListButton.addEventListener("click", displayOrHideCategory);
deleteBookmarkButton.addEventListener("click", deleteBookmark);
document.addEventListener("DOMContentLoaded", () => {
getBookmarks();
});
<!-- file: index.html —>
didn’t alter
/* file: styles.css */
didn’t alter
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.2 Safari/605.1.15 Ddg/26.2
Challenge Information:
Build a Bookmark Manager App - Build a Bookmark Manager App
