Build a Bookmark Manager App - Build a Bookmark Manager App

JavaScript
1

Tell us what’s happening:

I’ve tried everything I could think of. The app is working properly, but can’t pass test 23 and I keep getting this strange error message, even if I deleted the localStorage bookmarks several times.
I’ve checked the localStorage in the application tab and it’s ok.
Error parsing data from localStorage: [SyntaxError: Unexpected token ‘i’, “invalid” is not valid JSON]

Your code so far

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


/* file: script.js */

const mainSection = document.getElementById("main-section");
const formSection = document.getElementById("form-section");
const addBookmarkBtn = document.getElementById("add-bookmark-button");
const categoryName = document.querySelector(".category-name");
const categoryDropdown = document.getElementById("category-dropdown");
const closeFormBtn = document.getElementById("close-form-button");
const addBookmarkBtnForm = document.getElementById("add-bookmark-button-form");
const newName = document.getElementById("name");
const url = document.getElementById("url");
const bookmarkListSection = document.getElementById("bookmark-list-section");
const viewCategoryBtn = document.getElementById("view-category-button");
const categoryList = document.getElementById("category-list");
const closeListBtn = document.getElementById("close-list-button");
const deleteBookmarkBtn = document.getElementById("delete-bookmark-button");

const getBookmarks = () => {
  const data = localStorage.getItem("bookmarks");

  if (!data) return [];

  try {
    const parsed = JSON.parse(data);

    if (
      Array.isArray(parsed) &&
      (parsed.length === 0 ||
        parsed.every(
          (item) =>
            typeof item === "object" &&
            "name" in item &&
            "category" in item &&
            "url" in item &&
            item !== null &&
            !Array.isArray(item)
        ))
    ) {
      return parsed;
    }
  } catch (error) {
    console.error("Error parsing data from localStorage:", error);
  }
  return [];
};

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

addBookmarkBtn.addEventListener("click", () => {
  categoryName.innerText = categoryDropdown.value;
  displayOrCloseForm();
});

closeFormBtn.addEventListener("click", () => displayOrCloseForm());

addBookmarkBtnForm.addEventListener("click", () => {
  const bookmarks = getBookmarks();
  bookmarks.push({
    name: newName.value,
    category: categoryDropdown.value,
    url: url.value,
  });
  localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
  newName.value = "";
  url.value = "";
  displayOrCloseForm();
});

const displayOrHideCategory = () => {
  mainSection.classList.toggle("hidden");
  bookmarkListSection.classList.toggle("hidden");
};

function updateList(filtered, categoryList) {
  categoryList.innerHTML = "";
  let html = '';
  filtered.forEach((bookmark) => {
    html += `<label for='${bookmark.name}'>
      <a href='${bookmark.url}'>${bookmark.name}</a>
      </label>
      <input type='radio' id='${bookmark.name}' value='${bookmark.name}' name='bookmark'><br>`;
  });
  categoryList.innerHTML = html
}

viewCategoryBtn.addEventListener("click", () => {
  const bookmarks = getBookmarks();
  categoryName.innerText = categoryDropdown.value;
  displayOrHideCategory();
  const filtered = bookmarks.filter(
    (bookmark) => bookmark.category === categoryDropdown.value
  );

  if (filtered.length > 0) {
    updateList(filtered, categoryList)
  } else {
    categoryList.innerHTML = `<p>No Bookmarks Found</p>`;
  }
});

closeListBtn.addEventListener("click", () => {
  bookmarkListSection.classList.toggle("hidden");
  mainSection.classList.toggle("hidden");
});

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

  if (!checkedRadio) {
    return (categoryList.innerHTML += `<p>No bookmark selected</p>`);
  }

  const deletedBookmark = bookmarks.filter(
    (bookmark) => bookmark.name !== checkedRadio.value
  );
  localStorage.setItem("bookmarks", JSON.stringify(deletedBookmark)); 

 const filtered = deletedBookmark.filter(
    (bookmark) => bookmark.category === categoryDropdown.value
  );
  updateList(filtered, categoryList)
});```

```css
/* 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/135.0.0.0 Safari/537.36

Challenge Information:

Build a Bookmark Manager App - Build a Bookmark Manager App

2

Assume that your bookmarks array looks like this:

[
  {name: "duplicated-name", category: "news", url: "example1.com"}, 
  {name: "duplicated-name", category: "entertainment", url: "example2.com"}
]

With your current code, both bookmarks will be deleted since they have the same name, even though they differ in category.

That’s why test #23 is failing:

you should delete the bookmark corresponding to the selected radio button and appropriate category from the local storage

1 Like
3

Thanks man, I finally passed!