Build a Bookmark Manager App - Build a Bookmark Manager App

JavaScript
1

Tell us what’s happening:

I’m getting errors in the tests: 11, 18, 19, 20, 22, 23.

The problem is that all the functionality seems working fine and those tests seem to be actually passing so I can’t find the issue.

Your code so far

/* file: script.js */
const mainSection = document.getElementById("main-section");
const formSection = document.getElementById("form-section");
const bookmarkListSection = document.getElementById("bookmark-list-section");

const categoryDropdown = document.getElementById("category-dropdown");

const categoryNames = document.querySelectorAll(".category-name");
const categoryList = document.getElementById("category-list");

const addBookmarkBtn = document.getElementById("add-bookmark-button");
const deleteBookmarkBtn = document.getElementById("delete-bookmark-button");
const closeFormBtn = document.getElementById("close-form-button");
const addBookmarkBtnForm = document.getElementById("add-bookmark-button-form");
const viewCategoryBtn = document.getElementById("view-category-button");
const closeListBtn = document.getElementById("close-list-button");

const formName = document.getElementById("name");
const formUrl = document.getElementById("url");

const isValidBookmarkCollection = col => {
  if (!Array.isArray(col)) return false

  return col.every(bookmark => 
    typeof bookmark === "object" &&
    bookmark !== null &&
    ["name", "category", "url"].every(key => key in bookmark)
  );
}

const getBookmarks = () => {
  try {
    const item = JSON.parse(localStorage.getItem("bookmarks"));
    return isValidBookmarkCollection(item)? item : []
  } catch {
    return []
  }
}
//localStorage.removeItem("bookmarks");
//localStorage.setItem("bookmarks", [1,23]);

const bookmarks = getBookmarks();
console.log(bookmarks);

const createBookmark = (name, category, url) => {
  return {
    name: name,
    category: category,
    url: url,
  }
}

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

const updateCategoryName = () => {
  categoryNames.forEach(name => {
    name.innerText = categoryDropdown.value;
  })
}
addBookmarkBtn.addEventListener("click", () => {
  updateCategoryName();
  console.log(categoryDropdown.value)
  displayOrCloseForm();
})

closeFormBtn.addEventListener("click", displayOrCloseForm);

const resetForm = () => {
  formName.value = "";
  formUrl.value = "";
}

const updateBookmarks = () => localStorage.setItem("bookmarks", JSON.stringify(bookmarks));

addBookmarkBtnForm.addEventListener("click", () => {
  bookmarks.push(createBookmark(formName.value, categoryDropdown.value, formUrl.value));

  updateBookmarks()

  resetForm();

  displayOrCloseForm();
})

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

const updateCategoryList = () => {
  const category = categoryDropdown.value;
  console.log(bookmarks)
  const matchedBookmarks = bookmarks.filter(item => item.category === category);

  if (!matchedBookmarks.length) {
    console.log("No match")
    categoryList.innerHTML = "<p>No Bookmarks Found</p>"
  } else {
    categoryList.innerHTML = ""
    matchedBookmarks.forEach(item => {
      categoryList.innerHTML += `<input type="radio" id="${item.name}" value="${item.name}" name="bookmark"/>`
      categoryList.innerHTML += `<label for="${item.name}"><a href="${item.url}">${item.name}</a></label>`
    })
  }
}

viewCategoryBtn.addEventListener("click", () => {
  updateCategoryName();
  updateCategoryList();
  displayOrHideCategory();
})
//displayOrHideCategory();

closeListBtn.addEventListener("click", () => {
  displayOrHideCategory();
});

deleteBookmarkBtn.addEventListener("click", () => {
  const checked = categoryList.querySelector("input[type='radio']:checked");
  
  if (!checked) return

  const bookmarkIndex = bookmarks.findIndex(item => item.name === checked.value);

  if (bookmarkIndex === -1) return;

  bookmarks.splice(bookmarkIndex, 1);

  updateBookmarks();
  updateCategoryList();
});

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0

Challenge Information:

Build a Bookmark Manager App - Build a Bookmark Manager App

Github Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome to the forum @joselu103!

Some things to think about:

When you delete a bookmark item, what if there is another bookmark item with the same name in a different category? Does your code handle that?

When you add a bookmark, what if there is already a bookmark item with the same name and category in the bookmarks array?

Happy coding!

3

Hi @dhess !

Thank you very much for your answer!

You are right I didn’t contemplate the case where two bookmarks had the same name in two categories, I fixed it like this:

const bookmarkIndex = bookmarks.findIndex(item =>
    item.name === checked.value
    && item.category === categoryDropdown.value);

About your second question, my code currently allows duplicate bookmarks, but I didn’t see any instruction that forbids this behavior, and the example project seems to allow it as well.

In fact, I tested the example project by creating two identical bookmarks in the same category, separated by a different one. When I removed the second bookmark, the project actually deleted the first one instead, which suggests it removes the first matching item rather than the specific selected one. That is also how my project currently behaves.

If you have any other suggestions or think I might be missing something, I’d be happy to hear it.

Have a great day!

4

you have this at the top, this is not compatible with the tests which change the local storage after the page first load to test your app with different bookmark sets, instead you should make sure that your app is always working with the most recent local storage data

5

That was it! Thank you very much