Build a Bookmark Manager App - Build a Bookmark Manager App

JavaScript
1

Tell us what’s happening:

Hello everyone,
I’m currently working on the Bookmark Manager App project for the JavaScript learning path. I’ve fixed the deletion logic and it works correctly in my browser, but test 23 is still failing. I’d appreciate any advice or feedback to understand what might be blocking this test. Thanks in advance for your help!

Your code so far

/* file: script.js */
const addBookmarkBtn = document.getElementById('add-bookmark-button');
const addBookmarkBtnForm = document.getElementById('add-bookmark-button-form');
const bookmarkListSection = document.getElementById('bookmark-list-section');
const categoryDropdown = document.getElementById('category-dropdown');
const categoryList = document.getElementById('category-list');
const categoryName = document.querySelectorAll('.category-name');
const closeFormBtn = document.getElementById('close-form-button');
const closeListBtn = document.getElementById('close-list-button');
const deleteBookmarkBtn = document.getElementById('delete-bookmark-button');
const formSection = document.getElementById('form-section');
const mainSection = document.getElementById('main-section');
const viewCategoryBtn = document.getElementById('view-category-button');

//** functions */

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

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

//👁‍🗨
function getBookmarks() {
  try {
    let array = JSON.parse(localStorage.getItem("bookmarks"));
    let validArr;
    array.forEach((bookmark) => {
      let hasName = Object.hasOwn(bookmark, "name");
      let hasCat = Object.hasOwn(bookmark, "category");
      let hasURL = Object.hasOwn(bookmark, "url");
      if (hasName && hasCat && hasURL) {
        validArr = true;
      }
      else { validArr = false; }
    })
    return validArr ? array : [];
  } catch (error) { return []; }
}

// 🔄
const updateCategoryView = () => {
  const bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
  const filtered = bookmarks.filter(item => item.category === categoryDropdown.value)

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

    filtered.forEach(bookmark => {
      const radio = document.createElement('input');
      const label = document.createElement('label');

      radio.type = 'radio';
      radio.id = bookmark.name;
      radio.value = bookmark.name;
      radio.name = categoryDropdown.value;
      label.htmlFor = bookmark.name;
      label.innerHTML = `<a href='${bookmark.url}'>${bookmark.name}</a>`;
      categoryList.appendChild(radio);
      categoryList.appendChild(label);
    });
  }
}

//** events */

//➕
addBookmarkBtn.addEventListener('click', () => {
  categoryName.forEach(item =>
    item.textContent = categoryDropdown.value
  );
  displayOrCloseForm();
});

//➕📋
addBookmarkBtnForm.addEventListener('click', (e) => {
  e.preventDefault();

  const name = document.getElementById('name');
  const url = document.getElementById('url');

  const newBookmark = {
    name: name.value,
    category: categoryDropdown.value,
    url: url.value,
  }

  const bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];

  bookmarks.push(newBookmark);
  localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  name.value = '';
  url.value = '';
  displayOrCloseForm();
});

closeFormBtn.addEventListener('click', () => {
  displayOrCloseForm();
});

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

//🗑
deleteBookmarkBtn.addEventListener('click', () => {
  const radioSelected = document.querySelector(`input[name="${categoryDropdown.value}"]:checked`);
  if (!radioSelected) return;

  let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];

  const dataArrIndex = bookmarks.findIndex(
    item => item.name === radioSelected.id
  );

  if (dataArrIndex !== -1) {
    bookmarks.splice(dataArrIndex, 1);
    localStorage.setItem("bookmarks", JSON.stringify(bookmarks));

    updateCategoryView();
  }
});

viewCategoryBtn.addEventListener('click', () => {
  categoryName.forEach(item =>
    item.textContent = categoryDropdown.value
  );
  displayOrHideCategory();
  updateCategoryView();
});

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

Challenge Information:

Build a Bookmark Manager App - Build a Bookmark Manager App

1 Like
2

Modify the delete function to use both the bookmark name AND category when finding the item to delete, because bookmarks in different categories could have the same name and searching by name alone might delete the wrong bookmark.

2 Likes
3

:grinning_face_with_smiling_eyes:You have a great eye for detail, thank you for taking the time to help me fix this bug. Thanks to you, I was able to move forward without getting stuck. Your help is invaluable! :folded_hands:

2 Likes
4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.