# Build a Bookmark Manager App - Test Case 23

**URL:** <https://forum.freecodecamp.org/t/build-a-bookmark-manager-app-test-case-23/793225>\
**Category:** Curriculum Help\
**Created:** [July 4, 2026, 11:05pm UTC](https://forum.freecodecamp.org/t/build-a-bookmark-manager-app-test-case-23/793225 "2026-07-04T23:05:41Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![amanimashaun](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/amanimashaun/32/417803_2.png) [@amanimashaun](https://forum.freecodecamp.org/u/amanimashaun)\
**Post date:** [July 4, 2026, 11:05pm UTC](https://forum.freecodecamp.org/t/build-a-bookmark-manager-app-test-case-23/793225/1 "2026-07-04T23:05:42Z")

</div>

### Tell us what’s happening:

I keep failing the last test, I believe I set up the radio elements correctly and delete them from the bookmarks but it still fails. Anyone know where I messed up?

### Your code so far

```js
/* 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 categoryList = document.getElementById('category-list');
const categoryDropdown = document.getElementById('category-dropdown');
const closeFormBtn = document.getElementById('close-form-button');
const addBookmarkBtnForm = document.getElementById('add-bookmark-button-form');
const bookmarkListSection = document.getElementById('bookmark-list-section');
const viewCategoryBtn = document.getElementById('view-category-button');
const closeListBtn = document.getElementById('close-list-button')
const deleteBookmarkBtn = document.getElementById("delete-bookmark-button");

function getBookmarks() {
  try {
    let parse = JSON.parse(localStorage.getItem("bookmarks"));
    let validArr;
    parse.forEach((bookmark) => {
      let name = Object.hasOwn(bookmark, "name");
      let category = Object.hasOwn(bookmark, "category");
      let url = Object.hasOwn(bookmark, "url");
      if (name && category && url) {
        validArr = true;
      }
      else { 
        validArr = false 
        }
    })
    return validArr ? parse : []
  } catch (e) { 
    return [] 
    }
}

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

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

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

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

deleteBookmarkBtn.addEventListener("click", () => {
  let radioName;
  let bookmarks = getBookmarks(); 
  if(bookmarks.length === 0) return;

  const radioList = document.querySelectorAll("[type='radio']");

  for(const radio of radioList){
    if(radio.checked){
      radioName = radio.value;
      break;
    }
  }

  let categoryItems = bookmarks.filter((bookmark) => bookmark.category === categoryDropdown.value);
  categoryItems = categoryItems.filter((item) => item.name !== radioName);
  bookmarks = bookmarks.filter((items) => items.name !== radioName)
  categoryList.innerHTML = '';
  updateCategoryList(categoryItems);
  localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
  
  if(categoryItems.length == 0){
    categoryList.innerHTML = '<p>No Bookmarks Found</p>';
  }

})

addBookmarkBtnForm.addEventListener('click', (e) => {
  e.preventDefault();
  const name = document.getElementById('name');
  const url = document.getElementById('url');
  let newBookmark = {
    name: name.value,
    category: categoryDropdown.value,
    url: url.value
  }
  let bookmarks = getBookmarks();
  bookmarks.push(newBookmark);
  localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  name.value = '';
  url.value = '';
  displayOrCloseForm();
}
)
const displayOrHideCategory = () => {
  bookmarkListSection.classList.toggle('hidden');
  mainSection.classList.toggle('hidden');
}

viewCategoryBtn.addEventListener('click', () => {
  categoryName.innerText = `${categoryDropdown.value}`;
  displayOrHideCategory();

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

  if (!Array.isArray(bookmarks) || bookmarks.length === 0) {
    return categoryList.innerHTML = '<p>No Bookmarks Found</p>';
  }

  const filtered = bookmarks.filter(item => item.category === categoryDropdown.value);

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

})

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

```

```html
<!-- file: index.html -->
<!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>

```

```css
/* file: styles.css */
:root {
  --light-grey: #f5f6f7;
  --dark-grey: #0a0a23;
  --yellow: #f1be32;
  --golden-yellow: #feac32;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  display: flex;
  justify-content: center;
}

body {
  background-color: var(--dark-grey);
}

.hidden {
  display: none;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

select,
input,
label {
  margin-left: 10px;
}

div {
  padding: 30px;
  display: flex;
  justify-content: center;
}

.close-form-button {
  background: none;
  border: none;
  cursor: pointer;
}

h1, h2 {
  margin-top: 20px;
  text-align: center;
}

#category-list {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: var(--light-grey);
  align-self: center;
  width: 80%;
  margin-top: 15px;
  border-radius: 10px;
}

#category-list,
h1,
h2,
label {
  color: var(--light-grey);
}

#category-list p {
  color: var(--dark-grey);
}

button {
  cursor: pointer;
  padding: 5px;
  width: 100px;
  margin: 10px;
  color: var(--dark-grey);
  background-color: var(--golden-yellow);
  background-image: linear-gradient(#fecc4c, #ffac33);
  border-color: var(--golden-yellow);
  border-width: 3px;
}

button:hover {
  background-image: linear-gradient(#ffcc4c, #f89808);
}

section {
  margin-top: 60px;
  border: 2px solid var(--golden-yellow);
  width: fit-content;
  border-radius: 10px;
}

```

### Your browser information:

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

### Challenge Information:

Build a Bookmark Manager App - Build a Bookmark Manager App

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/javascript-v9/lab-bookmark-manager-app/build-a-bookmark-manager-app)**
>
> Learn to Code — For Free

GitHub Link: [freeCodeCamp/curriculum/challenges/english/blocks/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md at main · freeCodeCamp/freeCodeCamp · GitHub](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/blocks/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md)

---

<div class="post-metadata">

**Author:** ![dhess](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dhess/32/406235_2.png) [@dhess](https://forum.freecodecamp.org/u/dhess)\
**Post date:** [July 5, 2026, 12:02am UTC](https://forum.freecodecamp.org/t/build-a-bookmark-manager-app-test-case-23/793225/2 "2026-07-05T00:02:58Z")

</div>

Hi @amanimashaun,

Try adding a bookmark with the same name to two different categories. Then delete one of them and view both categories. Is the same bookmark in the category you didn’t delete from still there?

Happy coding

---

<div class="post-metadata">

**Author:** ![amanimashaun](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/amanimashaun/32/417803_2.png) [@amanimashaun](https://forum.freecodecamp.org/u/amanimashaun)\
**Post date:** [July 7, 2026, 12:37am UTC](https://forum.freecodecamp.org/t/build-a-bookmark-manager-app-test-case-23/793225/3 "2026-07-07T00:37:42Z")

</div>

Yeah I noticed that if they have the same name it does delete those bookmarks. I tried adding an AND operator in the bookmark filter portion to check to see if it matches the selected category using `items.category !== categoryDropdown.value` but it still deletes the bookmarks. Any tips?

---

<div class="post-metadata">

**Author:** ![amanimashaun](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/amanimashaun/32/417803_2.png) [@amanimashaun](https://forum.freecodecamp.org/u/amanimashaun)\
**Post date:** [July 7, 2026, 12:44am UTC](https://forum.freecodecamp.org/t/build-a-bookmark-manager-app-test-case-23/793225/4 "2026-07-07T00:44:31Z")

</div>

nvm I figured it out, I used an OR operator instead! 👍