Build a Bookmark Manager App - Build a Bookmark Manager App

JavaScript
1

Tell us what’s happening:

Not passing the 23rd test and I’m not sure why, any help would be appreciated. :slight_smile:

23. When you click the #delete-bookmark-button, you should delete the bookmark corresponding to the selected radio button and appropriate category from the local storage and update the displayed bookmark list.

Your code so far

/* file: script.js */
```
const mainSection = document.getElementById("main-section")
 const categoryMenu = document.getElementById("category-dropdown");
 const viewCategoryBtn = document.getElementById("view-category-button");
 const addBookmarkBtn = document.getElementById("add-bookmark-button");
 
 const formSection = document.getElementById("form-section");
 const names = document.getElementById("name");
 const url = document.getElementById("url")
 const closeFormBtn = document.getElementById("close-form-button");
 const addBookmarkFormBtn = document.getElementById("add-bookmark-button-form")
 
 const bookmarkListSection = document.getElementById("bookmark-list-section");
 const categoryList = document.getElementById("category-list");
 const closeListBtn = document.getElementById("close-list-button");
 const deleteBtn = document.getElementById("delete-bookmark-button");

 const categoryName = document.querySelectorAll(".category-name")
 let bookmarks;

const getBookmarks = () => { 
 
   try{
     let bookmarksArr = JSON.parse(localStorage.getItem("bookmarks"))
     if(Array.isArray(bookmarksArr) && bookmarksArr.every((item) => 
     item.hasOwnProperty("name") && item.hasOwnProperty("category") && item.hasOwnProperty("url"))){ 
       
    bookmarks = true;
   } else if(!Array.isArray(bookmarks)){
    bookmarks = false
   }
return bookmarks ? bookmarksArr : [];
   }catch(error){
    return []
   }
 }; 
 
 const displayOrCloseForm = () => {
    mainSection.classList.toggle("hidden")
    formSection.classList.toggle("hidden")
 };


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

const updateBookmark = () => {
  let arr = getBookmarks()
  arr.push({
    name: names.value,
    category: categoryMenu.value,
    url: url.value
  })
  localStorage.setItem("bookmarks", JSON.stringify(arr))
  names.value = "";
  url.value = "";
  displayOrCloseForm()
}

const viewCategories = () => {
  const arr = getBookmarks()
categoryName.forEach((item) => item.innerText = categoryMenu.value);
  let html;
  const findIndex = arr.findIndex(item => item.category === categoryMenu.value)
   mainSection.classList.add("hidden")
    bookmarkListSection.classList.remove("hidden")
  if(findIndex === -1){
     html = `<p>No Bookmarks Found</p>`
   }
  arr.forEach(item => {
   if(item.category === categoryMenu.value){
     html += `<div><label for="${item.name}"><input id="${item.name}" value="${item.name}" type="radio" name="bookmark"><a href="${item.url}">${item.name}</a></label></div>\n`
   }
   
  })
  return categoryList.innerHTML = html;
}



 
addBookmarkBtn.addEventListener("click", () => {
  updateBookmark() 
 categoryName.forEach((item) => item.innerText = categoryMenu.value);
})
addBookmarkFormBtn.addEventListener("click", () => {
  displayOrCloseForm()
   if(!names.value || !url.value){
    alert("Please input a value.")
  }else{
    updateBookmark()
  }
  }) 

viewCategoryBtn.addEventListener("click", () => viewCategories())
  
closeFormBtn.addEventListener("click", () => displayOrCloseForm()) 

closeListBtn.addEventListener("click", () => displayOrHideCategory())
 
 
 deleteBtn.addEventListener("click", () => {
  const selectedInput = document.querySelector("input[name='bookmark']:checked");
 
  if(selectedInput){
   const bookmarkArr = getBookmarks();
   const bookmarkName = selectedInput.value;
   const index = bookmarkArr.findIndex(item => item.name === bookmarkName)
   bookmarkArr.splice(index, 1);
   localStorage.setItem("bookmarks", JSON.stringify(bookmarkArr));
   //console.log(bookmarkArr)
   viewCategories();
    
  };  
   
});

 ```

<!-- 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/139.0.0.0 Safari/537.36 Edg/139.0.0.0

Challenge Information:

Build a Bookmark Manager App - Build a Bookmark Manager App

https://www.freecodecamp.org/learn/full-stack-developer/lab-bookmark-manager-app/build-a-bookmark-manager-app

2

hi there,

have you done any testing yourself of your buttons?
I noticed some weird behaviour when I try to add a new bookmark.

image
image717×1017 21.6 KB

Maybe you should look into that first and fix it?

3

I solved the problem with the extra radio button popping up but now I am not passing 13 15 21 and still 23 , I was calling the updateBookmark and it was causing the extra buttons, but now I am not sure why 13 15and 21 aren’t passing,

13. When you click #add-bookmark-button-form, you should run displayOrCloseForm to hide the form section and show the main section.

15. Your displayOrHideCategory function should toggle the hidden class on #main-section and #bookmark-list-section.

21. When you click #close-list-button, you should hide #bookmark-list-section and display the main section.

this is the section that I changed >>>

addBookmarkBtn.addEventListener("click", () => {
 displayOrCloseForm()
 categoryName.forEach((item) => item.innerText = categoryMenu.value);
 
})
```
4

please share the whole file again.

You should try to debug one issue at a time.
for eg for #15it says you should toggle the hidden class on #main-section
You can check if you are doing this in Chrome Dev Tools. Click the button and inspect the elements mentioned to see if their class list has been updated accordingly or not.

5 
 const mainSection = document.getElementById("main-section");
 const categoryMenu = document.getElementById("category-dropdown");
 const viewCategoryBtn = document.getElementById("view-category-button");
 const addBookmarkBtn = document.getElementById("add-bookmark-button");
 
 const formSection = document.getElementById("form-section");
 const names = document.getElementById("name");
 const url = document.getElementById("url");
 const closeFormBtn = document.getElementById("close-form-button");
 const addBookmarkFormBtn = document.getElementById("add-bookmark-button-form");
 
 const bookmarkListSection = document.getElementById("bookmark-list-section");
 const categoryList = document.getElementById("category-list");
 const closeListBtn = document.getElementById("close-list-button");
 const deleteBtn = document.getElementById("delete-bookmark-button");

 const categoryName = document.querySelectorAll(".category-name");
 let bookmarks;

const getBookmarks = () => { 
 
   try{
     let bookmarksArr = JSON.parse(localStorage.getItem("bookmarks"))
     if(Array.isArray(bookmarksArr) && bookmarksArr.every((item) => 
     item.hasOwnProperty("name") && item.hasOwnProperty("category") && item.hasOwnProperty("url"))){ 
       
    bookmarks = true;
   } else if(!Array.isArray(bookmarks)){
    bookmarks = false;
   };
return bookmarks ? bookmarksArr : [];
   }catch(error){
    return [];
   };
 }; 
 
 const displayOrCloseForm = () => {
    mainSection.classList.toggle("hidden");
    formSection.classList.toggle("hidden");
  
 };


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

const updateBookmark = () => {
  const arr = getBookmarks();
  arr.push({
    name: names.value,
    category: categoryMenu.value,
    url: url.value
  });
 
  localStorage.setItem("bookmarks", JSON.stringify(arr));
  displayOrCloseForm();

  names.value = "";
  url.value = "";
}
 
const viewCategories = () => {
  const arr = getBookmarks();
   mainSection.classList.add("hidden");
   bookmarkListSection.classList.remove("hidden");
   categoryName.forEach((item) => item.innerText = categoryMenu.value);
  let html;
  const findIndex = arr.findIndex(item => item.category === categoryMenu.value);
   
  
  if(findIndex === -1){
     html = `<p>No Bookmarks Found</p>`
   };
  arr.forEach(item => {
   if(item.category === categoryMenu.value){
     html += `<div><label for="${item.name}"><input id="${item.name}" value="${item.name}" type="radio" name="bookmark"><a href="${item.url}">${item.name}</a></label></div>\n`
   };
   
  });
  return categoryList.innerHTML = html;
};



 
addBookmarkBtn.addEventListener("click", () => {
categoryName.forEach((item) => item.innerText = categoryMenu.value);
  displayOrCloseForm()
 });

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

viewCategoryBtn.addEventListener("click", () => viewCategories());
  
closeFormBtn.addEventListener("click", () => displayOrCloseForm());

closeListBtn.addEventListener("click", () => displayOrHideCategory());
 
 
 deleteBtn.addEventListener("click", () => {
  const selectedInput = document.querySelector("input[name='bookmark']:checked");
 
  if(selectedInput){
   const arr = getBookmarks();
   const bookmarkName = selectedInput.value;
   const index = arr.findIndex(item => item.name === bookmarkName);
   arr.splice(index, 1);
   localStorage.setItem("bookmarks", JSON.stringify(arr));
  
   viewCategories();
    
  };  
   
});
```
6

Is the Dev tools what you access through right clicking on the page and clicking Inspect?

7

that is part of the dev tools, but there are other things, like the Console

8

yes that is dev tools. It can help you see what you elements look like after you click the button.

9

I am not sure how to read all of it because it looks like fCC code not mine except for what is in an “iframe” element which has all the code from the page. So I can’t click on my JS code in the Dev tools because it highlights the whole thing. So I tried putting all the code in VScode and using a live server but now I can’t access the JS file. So am I clicking on the element on the webpage, while having the dev tools open and seeing what it does on the dev tool “element” page or what exactly am I looking for?

10

Also I got tests 13 and 15 to pass it’s still just 23 I need help with.

11

you can find the elements in that iframe. If you right click on an element and choose inspect it brings you to that element

image
image1920×1032 135 KB

1 Like
12

thank you, I was able to find the solution to 23, I just had to update the condition to be more specific for the index variable in the deleteBtn eventlistener. Appreciate the help!

14

Please create your own topic to discuss your work rather than posting a reply to someone else’s thread that does not answer their question or help them.