Build a Bookmark Manager App - Build a Bookmark Manager App

Curriculum Help
1

Tell us what’s happening:

I’ve pass all all the test except test 5. Help me out, guys.

Your code so far

/* file: script.js */
// Container Sections
const mainSection = document.getElementById("main-section");
const formSection = document.getElementById("form-section");
const bookmarkListSection = document.getElementById("bookmark-list-section");

// Buttons
const openFormBtn = document.getElementById("add-bookmark-button");
const closeFormBtn = document.getElementById("close-form-button");
const addBookmarkFormBtn = document.getElementById("add-bookmark-button-form");
const closeListBtn = document.getElementById("close-list-button");
const viewCategoryBtn = document.getElementById("view-category-button");
const categoryList = document.getElementById("category-list");
const deleteBtn = document.getElementById("delete-bookmark-button");


// Form Inputs
const nameInput = document.getElementById("name");
const urlInput = document.getElementById("url");
const categoryDropdown = document.getElementById("category-dropdown");

// Class-based elements (Returns a NodeList of all elements with this class)
const categoryNames = document.querySelectorAll(".category-name");

function getBookmarks() {
   
    
    try {
     
       const bookmarks = JSON.parse(localStorage.getItem("bookmarks"))||[]
        if (!Array.isArray(bookmarks) || !bookmarks) {
            return []
        }

       // console.log(bookmarks)
       return bookmarks;
}
  catch(error) {
    console.error("Invalid JSON in localStorage", error)
 }
}

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

openFormBtn.addEventListener("click",() => {
   displayOrCloseForm();
    });

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

addBookmarkFormBtn.addEventListener("click", () =>{
    if (!nameInput.value.trim() || !urlInput.value.trim()) {
        alert("Please, provide valid name and URL.");
        return
    }

    const bookmarkObj = {
        name: nameInput.value.trim(),
        category: selectedCategory,
        url:urlInput.value
    }
    const bookmarks = getBookmarks();
    bookmarks.push(bookmarkObj)
    nameInput.value = ""
    urlInput.value = ""
    localStorage.setItem("bookmarks",JSON.stringify(bookmarks));
    displayOrCloseForm();
})

let selectedCategory =  categoryDropdown.value;

function filterBookmarks() {
     const currentCategory = document.getElementById("category-dropdown").value;
   const bookmarks = getBookmarks();
   const filtered=bookmarks.filter((bookmark) => bookmark.category ===  currentCategory)
   return filtered;
};

function displayBookmarks() {
    categoryList.innerHTML=""
    const filteredBookmarks =  filterBookmarks();
    if(!filteredBookmarks.length) {
        categoryList.innerHTML = "<p>No Bookmarks Found</p>"
    }
    else{
    filteredBookmarks.forEach((bookmark)=>{
        const safeId = bookmark.name.replace(/\s+/g, '-').toLowerCase();
         categoryList.innerHTML += `<input type="radio" id="${safeId}" value="${bookmark.name}" name="bookmark-category-${bookmark.category}"> <label for="${safeId}"><a href="${bookmark.url}">${bookmark.name}</a></label>`
    })
    };

};

function deleteBookmark() {
   const bookmarks = getBookmarks();
   const selectedCategory = document.getElementById("category-dropdown").value;
   document.querySelectorAll("input[type='radio']").forEach((input)=>{
       if(input.checked) {
        const label =  document.querySelector(`label[for="${input.id}"]`)
       const bookmarkIndex = bookmarks.findIndex((bookmark)=>bookmark.name===input.value&&bookmark.category===selectedCategory);
       if (bookmarkIndex===-1) {
         return;
       }
        
       bookmarks.splice(bookmarkIndex,1);
       localStorage.setItem("bookmarks",JSON.stringify(bookmarks));
   }})
   displayBookmarks();
}

deleteBtn.addEventListener("click",() => {
    deleteBookmark()
    });

const displayOrHideCategory =() => {
    if (bookmarkListSection === null) {
        return
    }
    mainSection.classList.toggle("hidden")
    bookmarkListSection.classList.toggle("hidden");
}
viewCategoryBtn.addEventListener("click",()=>{
    displayOrHideCategory()
    displayBookmarks()
    }
);
closeListBtn.addEventListener("click",()=>{
    displayOrHideCategory();
    });


categoryNames.forEach((name) => { name.innerText = selectedCategory[0].toUpperCase() + selectedCategory.slice(1)})
   
categoryDropdown.addEventListener("change", (e) =>{
   selectedCategory = e.target.value;
   categoryNames.forEach((name) => { name.innerText = selectedCategory[0].toUpperCase() + selectedCategory.slice(1)});
})

 


<!-- file: index.html -->


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Challenge Information:

Build a Bookmark Manager App - Build a Bookmark Manager App

2
  1. The bookmarks key stored in the local storage should be an array of bookmark objects. Each bookmark object should have three keys: name, category, and url.

Based on this user story, you should verify that all bookmark objects have the required keys.