Build a bookmark manager app

JavaScript
1 
const mainSection = document.getElementById('main-section');
const formSection = document.getElementById('form-section');
const addBookMarkBtn = document.getElementById('add-bookmark-button');
const categoryName = document.querySelectorAll('.category-name');
const categoryDropdown = document.getElementById('category-dropdown');
const closeFormBtn = document.getElementById('close-form-button');
const addBookmarkBtnForm = document.getElementById('add-bookmark-button-form');
const nameInput = document.getElementById('name');
const urlInput = 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 = () => {
  try {
    const data = localStorage.getItem('bookmarks');
    if (!data) return [];

    const parsed = JSON.parse(data);

    const isValidArray = Array.isArray(parsed) && parsed.every(
      item =>
        item &&
        typeof item === 'object' &&
        'name' in item &&
        'url' in item &&
        'category' in item 
    );

    return isValidArray ? parsed : [];
  } catch {
    return [];
  }
};

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

addBookMarkBtn.addEventListener('click', () => {
  categoryName.forEach(header => {
    header.innerText = categoryDropdown.value;
  })
  displayOrCloseForm();
})

closeFormBtn.addEventListener('click', displayOrCloseForm);

function createBookmark() {
  return {
    name: nameInput.value,
    category: categoryDropdown.value,
    url: urlInput.value,
  }
}

function reset() {
  nameInput.value = '';
  urlInput.value = '';
  displayOrCloseForm();
}

addBookmarkBtnForm.addEventListener('click', () => {
  const storage = getBookmarks();
  const bookmarksInput = createBookmark();
  storage.push(bookmarksInput);
  localStorage.setItem('bookmarks', JSON.stringify(storage));
  reset();
})

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

viewCategoryBtn.addEventListener('click', () => {
  const storage = getBookmarks();
  const listOfCategory = storage.filter(b => b.category === categoryDropdown.value);

  categoryName.forEach(header => {
    header.innerText = categoryDropdown.value;
  })

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

  categoryList.innerHTML = '';

  for (let i = 0; i < listOfCategory.length; i++) {
    const bookmark = listOfCategory[i];
    if (categoryDropdown.value === bookmark.category) {
      categoryList.innerHTML += `
        <div class="container">
          <input type="radio" id="${bookmark.name}" value="${bookmark.name}" name="list-of-category"/>
          <label for="${bookmark.name}">
            <a href="${bookmark.url}" target="_blank">${bookmark.name}</a>
          </label>
        </div>
      `;
    }
  }

  if (listOfCategory.length === 0) {
    categoryList.innerHTML = `<p>No Bookmarks Found</p>`;
  }
  displayOrHideCategory();
})

closeListBtn.addEventListener('click', displayOrHideCategory);

deleteBookmarkBtn.addEventListener('click', () => {
  const deleteInput = document.querySelector(`input[name="list-of-category"]:checked`);
  if (!deleteInput) return alert("Please select a bookmark to delete.");

  const storage = getBookmarks();
  const bookmarkName = deleteInput.value; 

  const index = storage.findIndex(b => b.name === bookmarkName);

  if (index !== -1) {
    const deletedBookmark = storage.splice(index, 1)[0];

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

    deleteInput.parentElement.remove();

    const remainingInCategory = storage.some(b => b.category === deletedBookmark.category);

    if (!remainingInCategory) {
      categoryList.innerHTML = `<p>No Bookmarks Found</p>`;
    }

    return;
  }
});

I’m not able to pass Test 23 this is about the delete button.

2

please share your html too

3 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.0">
    <title>Bookmark Manager</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <main>
        <section id="main-section">
            <h1>Bookmark Manager</h1>
            <div id="dropdown">
                <label for="category-dropdown">Select a category:</label>
                <select id="category-dropdown" name="options">
                    <option value="news" selected>News</option>
                    <option value="entertainment">Entertainment</option>
                    <option value="work">Work</option>
                    <option value="miscellaneous">Miscellaneous</option>
                </select>
            </div>
            <div id="buttons">
                <button type="button" id="view-category-button">View Category</button>
                <button type="button" id="add-bookmark-button">Add Bookmark</button>
            </div>
        </section>

        <section id="form-section" class="hidden">
            <form>
                <h2 class="category-name"></h2>
                <div>
                    <label for="name">Name:</label>
                    <input type="text" id="name">
                </div>
                <div>
                    <label for="url">URL:</label>
                    <input type="text" id="url">
                </div>
                <div>
                    <button type="button" id="close-form-button">Go Back</button>
                    <button type="button" id="add-bookmark-button-form">Add Bookmark</button>
                </div>
            </form>
        </section>

        <section id="bookmark-list-section" class="hidden">
            <h2 class="category-name"></h2>
            <div id="category-list">
            </div>
            <div>
                <button type="button" id="close-list-button">Go Back</button>
                <button type="button" id="delete-bookmark-button">Delete Bookmark</button>
            </div>
        </section>

    </main>
    <script src="script.js"></script>
</body>

</html>
4

is your code able to deal with bookmarks that have the same name in different categories?

5

Yes, it is able to do bookmarks with the same name but different categories.

6

are you sure? it looks you are only looking at the name to find the bookmark