My code looks working but can`t past the test. Whats wrong? Build a Bookmark Manager App

JavaScript
1

Tell us what’s happening:

My code in my opinion works correctly, but can`t pass the 23.point. Where is bug in my code?

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 categoryDropdown = document.getElementById('category-dropdown')
const categoryName = document.querySelector('.category-name')
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')

console.log(JSON.parse(localStorage.getItem('bookmarks')))

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 []}
}

function displayOrCloseForm (){
mainSection.classList.toggle('hidden')
formSection.classList.toggle('hidden')
}

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

closeFormBtn.addEventListener('click', displayOrCloseForm)

addBookmarkBtnForm.addEventListener('click', ()=>{
  let bookmarks = getBookmarks()


  const taskObj = {name: `${nameInput.value}`,
  category: `${categoryDropdown.value}`,
  url: `${urlInput.value}`}
  bookmarks.push(taskObj)
  localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
  nameInput.value = ''
  urlInput.value = ''
  displayOrCloseForm()
})

function displayOrHideCategory (){
mainSection.classList.toggle('hidden')
bookmarkListSection.classList.toggle('hidden')
}
function updateCategory (){
  let result=''
getBookmarks().forEach(
    ({ name, category, url}) => {
      if(category===categoryDropdown.value){
        (result += `
        <input type="radio" class="task" id="${name}" value="${name}" name='bookmark' />
        <label for="${name}"><a href="${url}">${name}</a></label>
      `)
    } 
    }
  ); 
  return categoryList.innerHTML = result || `<p>No Bookmarks Found</p>`
}
viewCategoryBtn.addEventListener('click', ()=> {
  updateCategory()
  displayOrHideCategory ()
 })

closeListBtn.addEventListener('click', ()=>{
  bookmarkListSection.classList.toggle('hidden')
  mainSection.classList.toggle('hidden')
})

deleteBookmarkBtn.addEventListener('click', ()=>{
const radio = document.querySelector('input:checked')
let arr = getBookmarks()
for(let i=0; i<arr.length; i++){
  if(arr[i].name === radio.value){
   arr.splice(i, 1)
  }
}
localStorage.setItem("bookmarks", JSON.stringify(arr));
updateCategory ()
})


<!-- 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 (X11; Ubuntu; Linux x86_64; rv:147.0) Gecko/20100101 Firefox/147.0

Challenge Information:

Build a Bookmark Manager App - Build a Bookmark Manager App

2

is your function able to deal with bookmarks sharing the same name but having different categories?

3

Thank you very much. I already figured it out.