Build a Bookmark Manager App - Works when I test, fails many fCC tests

Curriculum Help
1

Tell us what’s happening:

My code is failing all these tests:
11, 19, 20, 21, 23, 24
The first and main one, number 11, is concerned with saving the bookmarks array into the localStorage, and even though it works on my side, for some reason it’s not passing the test.
I have tried debugging and also gave the code and the issue to Claude, but even Claude is confused. Would appreciate any help with the code.

Your code so far

/* file: script.js */
let bookmarks = [];

const getBookmarks = () => {
  try {
    bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
    if (!Array.isArray(bookmarks)) {
      return [];
    }
    for (const bookmark of bookmarks) {
      if (!bookmark.hasOwnProperty("name") || !bookmark.hasOwnProperty("category") || !bookmark.hasOwnProperty("url")) {
        return [];
      }
    }
    return bookmarks;
  }
  catch (e) {
    return [];
  }
}

bookmarks = getBookmarks();

const mainSection = document.getElementById("main-section");
const formSection = document.getElementById("form-section");

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

const addBookmarkButton = document.getElementById("add-bookmark-button");
const categoryNames = document.querySelectorAll(".category-name");
const categoryDropdown = document.getElementById("category-dropdown");

addBookmarkButton.addEventListener("click", () => {
  categoryNames[0].textContent = categoryDropdown.value[0].toUpperCase() + categoryDropdown.value.slice(1);
  displayOrCloseForm();
});

const closeFormButton = document.getElementById("close-form-button");
closeFormButton.addEventListener("click", () => {
  displayOrCloseForm();
  reset();
});

const addBookmarkButtonForm = document.getElementById("add-bookmark-button-form");
const nameField = document.getElementById("name");
const urlField = document.getElementById("url");


const addBookmarkHelper = () => {
  const currentObj = {
    name: nameField.value,
    category: categoryDropdown.value,
    url: urlField.value
  };
  bookmarks.push(currentObj);
  localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
  reset();
  displayOrCloseForm();
}

const reset = () => {
  nameField.value = '';
  urlField.value = '';
}

addBookmarkButtonForm.addEventListener("click", (event) => {
  event.preventDefault();
  addBookmarkHelper();
})

const bookmarkListSection = document.getElementById("bookmark-list-section");

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

const viewCategoryButton = document.getElementById("view-category-button");
const categoryList = document.getElementById("category-list");

const viewCategoryHelper = () => {
  const categoryBookmarks = bookmarks.filter((bookmark) => bookmark.category === categoryDropdown.value);
  categoryList.innerHTML = '';
  if (categoryBookmarks.length) {
    categoryBookmarks.forEach(bookmark => {
      categoryList.innerHTML += `
      <input type="radio" id="${bookmark.name}" value="${bookmark.name}" name="category-bookmark">
      <label for="${bookmark.name}">
        <a href="${bookmark.url}">${bookmark.name}</a>
      </label>`
    })
  }
  else categoryList.innerHTML = '<p>No Bookmarks Found</p>';
}

viewCategoryButton.addEventListener("click", () => {
  categoryNames[1].textContent = categoryDropdown.value[0].toUpperCase() + categoryDropdown.value.slice(1);
  viewCategoryHelper();
  displayOrHideCategory();
});

const closeListButton = document.getElementById("close-list-button");
closeListButton.addEventListener("click", displayOrHideCategory);

const deleteBookmarkButton = document.getElementById("delete-bookmark-button");
deleteBookmarkButton.addEventListener("click", () => {
  const selectedBookmark = document.querySelector("[name=category-bookmark]:checked");
  for (let i = 0; i < bookmarks.length; i++) {
    const bookmark = bookmarks[i];
    if (selectedBookmark.id === bookmark.name && categoryDropdown.value === bookmark.category) {
      bookmarks.splice(i, 1);
      localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
      viewCategoryHelper();
      return;
    }
  }
})

<!-- 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; Linux x86_64; rv:156.0) Gecko/20100101 Firefox/156.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

Welcome to the forum @youssie,

Your functions should not be dependent on the global bookmarks variable. Use your getBookmarks() function instead.

Happy coding