Build a Bookmark Manager App - Build a Bookmark Manager App

JavaScript
1

Tell us what’s happening:

I am failing test 23 with error
23. 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.

When I press the button it removes the selected bookmark from the bookmarks, updates localStorage and redisplays the list.

But when I run it, it fails.

I have looked at other submissions and seem to be doing the same sort of thing

Your code so far

/* file: script.js */
deleteBookmarkBtn.addEventListener("click", () => {
  const buttons = categoryList.querySelectorAll("input");
  let selectedBtn = "";
  for (const btn of buttons) {
    if (btn.checked) {
      selectedBtn = btn;
      break;
    }
  }
  if (selectedBtn) {
    const bookmarks = getBookmarks();
    const bmIndex = bookmarks.findIndex(item => item.name === selectedBtn.id &&
                                                item.category === categoryDropdown.value)
    bookmarks.splice(bmIndex, 1);
    localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
    displayBookmarks(bookmarks);
  } else {
    alert("No Bookmark Selected");
  }
});


<!-- file: index.html -->


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:147.0) Gecko/20100101 Firefox/147.0

Challenge Information:

Build a Bookmark Manager App - Build a Bookmark Manager App

2

Here are some debugging steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. 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.

3

Thank you for replying. I’m using Firefox (although Edge gives same error).

The console error is:

image
image1836×883 124 KB

This is the code where the data is displayed:

const displayBookmarks = (bookmarks) => {
  categoryList.innerHTML = "";
  if (bookmarks.length === 0) {
    categoryList.innerHTML = `<p>No Bookmarks Found</p>`;
  } else {
    bookmarks.forEach(bm => {
      const name = bm.name;
      categoryList.innerHTML +=
        `<input type="radio" id="${name}" name="listbtn" value="${name}" />
        <label for="${name}">
          <a href="${bm.url}" target="_blank">${name}</a>
        </label>`;
    });
  }
}

This is called here:

viewCategoryBtn.addEventListener("click", () => {
  const category = categoryDropdown.value;
  //test 16 ✔
  categoryName[0].innerText = category;
  categoryName[1].innerText = category;

  const bookmarks = getBookmarks();
  const arr = bookmarks.filter(item => item.category === category);
  //step 17 ✔
  displayBookmarks(arr);
  displayOrHideCategory();
});

and in deleteBookmarkBtn.addEventListener

I don’t understand where it’s getting 3 from in the error message

4

I have solved the problem - in deleteBookmarkBtn.addEventListener I needed to filter by category before calling the display function.

Thanks for your help, dhess

1 Like