Build a Bookmark Manager App - Test Case 23

Curriculum Help
1

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

/* 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);
    })
}



<!-- 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>

/* 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

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

2

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

3

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?

4

nvm I figured it out, I used an OR operator instead! :+1: