Build a Bookmark Manager App - Build a Bookmark Manager App

JavaScript
1

Tell us what’s happening:

Hello, I am not passing step 23 even though it is working as it should.
I also inspected local storage to make sure it is deleting bookmarks from specified categories and not deleting from all categories, which it is not.
any suggestions???

thanks

Your code so far

/* file: script.js */
const dropdown = document.querySelectorAll("#category-dropdown")
const addBookmarkBtn = document.querySelector("#add-bookmark-button")
const viewCategoryBtn = document.querySelector("#view-category-button")
const addBookmarkForm = document.querySelector("#form-section")
const mainSection = document.querySelector("#main-section")
const goBackBtnForm = document.querySelector("#close-form-button")
const categoryHeader = document.querySelectorAll(".category-name")
const addBookmarkBtnForm = document.querySelector("#add-bookmark-button-form")
const categoryList = document.getElementById("category-list");
const goBackListBtn = document.getElementById("close-list-button")
const deleteBookmarkBtn = document.getElementById("delete-bookmark-button")







function getBookmarks() {
    try {
        const storedBookmarks = localStorage.getItem("bookmarks");
        const bookmarks = storedBookmarks ? JSON.parse(storedBookmarks) : [];

        if (Array.isArray(bookmarks) && bookmarks.every(b => b.name && b.category && b.url)) {
            return bookmarks;
        } else {
            return [];
        }
    } catch (error) {
        console.error("Error retrieving bookmarks from localStorage:", error);
        return [];
    }
}




const displayOrCloseForm = () => {
  addBookmarkForm.classList.toggle("hidden")
  mainSection.classList.toggle("hidden")
}

const displayOrHideCategory = () => {
  const bookmarkList = document.querySelector("#bookmark-list-section")
   
   bookmarkList.classList.toggle("hidden")
   mainSection.classList.toggle("hidden")
}


const displayHeader = () => {
    let headerText = dropdown[0].value
   headerText =  headerText.charAt(0).toUpperCase() + headerText.slice(1);
    categoryHeader[1].innerText = headerText
    categoryHeader[0].innerText = headerText
}

 
addBookmarkBtn.addEventListener("click", () => {
  displayOrCloseForm()
  displayHeader()

})

goBackBtnForm.addEventListener("click", () => {
  displayOrCloseForm()
})

addBookmarkBtnForm.addEventListener("click",() => {
  const nameInput = document.querySelector("#name")
  const urlInput = document.querySelector("#url")
  const bookmarks = getBookmarks();

  const newBookmark = {
    name: nameInput.value.trim(),
    category: dropdown[0].value,
    url: urlInput.value.trim()
    };

    bookmarks.push(newBookmark);
    localStorage.setItem("bookmarks", JSON.stringify(bookmarks));

    nameInput.value = "";
    urlInput.value = "";
    displayOrCloseForm()
})


viewCategoryBtn.addEventListener("click", () => {
  displayOrHideCategory()
  displayHeader()

  categoryList.innerHTML = "";

  const bookmarks = getBookmarks();
  const chosenCategory = dropdown[0].value
  const filtered = bookmarks.filter(e => e.category === chosenCategory);

  if (filtered.length === 0){
    categoryList.innerHTML = `<p>No Bookmarks Found</p>`;
  } else {
    filtered.forEach(e => {
      categoryList.innerHTML += `
            <input
                type="radio"
                name="bookmark"
                id="${e.name}"
                value="${e.name}"
                category="${chosenCategory}"
            >
            <label for="${e.name}">
            <a href="${e.url}" target="_blank">${e.name}</a>
            </label>
      `
    })
  }

 
})

goBackListBtn.addEventListener("click", displayOrHideCategory)

deleteBookmarkBtn.addEventListener("click", () => {
  const bookmarks = getBookmarks();
  const selectedBookmarkName = document.querySelector('input[name="bookmark"]:checked');

  const selectedCategory = selectedBookmarkName.getAttribute("category")


    if (selectedBookmarkName) { 
      
      const updatedBookmarks = bookmarks.filter(b => !(b.name === selectedBookmarkName.value && b.category === selectedCategory)
      );

      localStorage.setItem('bookmarks', JSON.stringify(updatedBookmarks));

    }
    displayOrHideCategory()
})

<!-- 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/141.0.0.0 Safari/537.36

Challenge Information:

Build a Bookmark Manager App - Build a Bookmark Manager App

2

Problem might be that after deleting bookmark, the display go back to the category selection, instead of updating the bookmarks list of the displayed category.

3

yup that seemed to be the issue. I had to refactor my code so that the display updates instead of going back to category selection.

thank you!