Tell us what’s happening:
For Test #23, I’m receiving this error message: “When you click the #delete-bookmark-button, you should delete the bookmark corresponding to the selected radio button and appropriate category from the local storage and update the displayed bookmark list.”
Socrates also advised the following:
I’m unclear on the instructions being provided re: how to solve for this. Can someone please provide a little bit of added direction?
Thank you!
Your code so far
const mainSection = document.getElementById("main-section");
const formSection = document.getElementById("form-section");
const bookmarkListSection = document.getElementById("bookmark-list-section");
const addBookmarkButton = document.getElementById("add-bookmark-button");
const categoryName = document.querySelector(".category-name");
const categoryDropdown = document.getElementById("category-dropdown");
const categoryList = document.getElementById("category-list");
const viewCategoryButton = document.getElementById("view-category-button");
const closeFormButton = document.getElementById("close-form-button");
const addBookmarkButtonForm = document.getElementById("add-bookmark-button-form");
const closeListButton = document.getElementById("close-list-button");
const deleteBookmarkButton = document.getElementById("delete-bookmark-button");
const bookmarkName = document.getElementById("name");
const bookmarkUrl = document.getElementById("url");
function getBookmarks() {
try {
const parsed = JSON.parse(localStorage.getItem("bookmarks"));
if (
Array.isArray(parsed)
&& parsed.every(
(item) =>
item.hasOwnProperty("category") &&
item.hasOwnProperty("name") &&
item.hasOwnProperty("url")
)
) {
return parsed;
}
return [];
} catch {
return [];
}
};
function displayOrCloseForm () {
mainSection.classList.toggle("hidden");
formSection.classList.toggle("hidden");
}
function displayOrHideCategory () {
mainSection.classList.toggle("hidden");
bookmarkListSection.classList.toggle("hidden");
}
addBookmarkButton.addEventListener("click", () => {
categoryName.innerText = categoryDropdown.value;
displayOrCloseForm();
});
closeFormButton.addEventListener("click", displayOrCloseForm);
addBookmarkButtonForm.addEventListener("click", () => {
const existingBookmarks = JSON.parse(localStorage.getItem("bookmarks"));
existingBookmarks.push({
name: bookmarkName.value,
category: categoryDropdown.value,
url: bookmarkUrl.value
});
localStorage.setItem("bookmarks", JSON.stringify(existingBookmarks))
const name = document.getElementById("name");
const URL = document.getElementById("url");
name.value = "";
url.value = "";
displayOrCloseForm();
})
viewCategoryButton.addEventListener("click", () => {
const existingBookmarks = JSON.parse(localStorage.getItem("bookmarks"));
categoryName.innerText = categoryDropdown.value;
const containsCategory = existingBookmarks.some(obj => obj.category === categoryDropdown.value);
if (!containsCategory) {
categoryList.innerHTML = "<p>No Bookmarks Found</p>"
} else if (containsCategory) {
let innerHTML = ""
const matchedBookmarks = existingBookmarks.filter(bookmark => bookmark.category === categoryDropdown.value);
matchedBookmarks.forEach(bookmark => {
innerHTML += `<input type="radio" name="categoryPicked" value=${bookmark.name} id=${bookmark.name}> <label for=${bookmark.name}><a href=${bookmark.url}>${bookmark.name}</a></label>`;
})
categoryList.innerHTML = innerHTML;
}
displayOrHideCategory();
});
closeListButton.addEventListener("click", () => {displayOrHideCategory()})
deleteBookmarkButton.addEventListener("click", () => {
const existingBookmarks = JSON.parse(localStorage.getItem("bookmarks"));
const selectedBookmark = document.querySelector('input[type="radio"]:checked');
const bookmarkIndex = existingBookmarks.findIndex(bookmark => bookmark.name === selectedBookmark.value);
existingBookmarks.splice(bookmarkIndex, 1);
localStorage.setItem("bookmarks", JSON.stringify(existingBookmarks));
const containsCategory = existingBookmarks.some(obj => obj.category === categoryDropdown.value);
if (!containsCategory) {
categoryList.innerHTML = "<p>No Bookmarks Found</p>"
} else if (containsCategory) {
let innerHTML = ""
const matchedBookmarks = existingBookmarks.filter(bookmark => bookmark.category === categoryDropdown.value);
matchedBookmarks.forEach(bookmark => {
innerHTML += `<input type="radio" name="categoryPicked" value=${bookmark.name} id=${bookmark.name}> <label for=${bookmark.name}><a href=${bookmark.url}>${bookmark.name}</a></label>`;
})
categoryList.innerHTML = innerHTML;
}
})
<!-- file: index.html -->
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36
Challenge Information:
Build a Bookmark Manager App - Build a Bookmark Manager App