Build a Bookmark Manager App (last step)

tastybites · April 25, 2025, 8:18pm

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 categoryDropdown = document.getElementById('category-dropdown')
const closeFormBtn = document.getElementById('close-form-button')
const addBookmarkBtnForm = document.getElementById('add-bookmark-button-form')
const inputName = document.getElementById('name')
const inputUrl = 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')

/*****************************getBoomarks function*********************************/
 function getBookmarks() {
   try{
     const storedBookmarks =localStorage.getItem('bookmarks')
     const bookmarks = storedBookmarks ? JSON.parse(storedBookmarks) : []
     if(Array.isArray(bookmarks) && bookmarks.every(item => item.name && item.category && item.url)){
       return bookmarks
     } else {
       return []
     }
   }
   catch (error){
    return []
   }
}
/***********************************************************************************/

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

/****************************addBookmarbtn event listener**************************/ 
addBookmarkBtn.addEventListener('click', () => {
  categoryName.innerText = categoryDropdown.value
  displayOrCloseForm()
})
/***********************************************************************************/
 
/***************************close-form-button event listener*************************/ 
closeFormBtn.addEventListener('click', () => {
  displayOrCloseForm()
})
/***********************************************************************************/

/***************************add-bookmark-button-form event listener********************/ 
addBookmarkBtnForm.addEventListener('click', () => {
  const bookmarks = getBookmarks()
  const bookmark = {
  name:  inputName.value,
  category: categoryDropdown.value,
  url: inputUrl.value 
  }
  bookmarks.push(bookmark)
  localStorage.setItem('bookmarks', JSON.stringify(bookmarks))
  inputName.value = ""
  categoryDropdown.value = ''
  inputUrl.value =''
  displayOrCloseForm()
})
/***********************************************************************************/

/***************************displayOrHideCategory function*************************/ 
function displayOrHideCategory(){
  mainSection.classList.toggle('hidden')
  bookmarkListSection.classList.toggle('hidden')
}
/***********************************************************************************/

/***************************viewCategoryBtn event listener*************************/ 
viewCategoryBtn.addEventListener('click', () => {
  categoryName.innerText = categoryDropdown.value
  const bookmarks = getBookmarks()
  const filtered = bookmarks.filter(item => item.category === categoryDropdown.value )
  displayOrHideCategory()
  categoryList.innerHTML = ``
  if(filtered.length === 0) {
    categoryList.innerHTML = `<p>No Bookmarks Found</p>`  
  } else {
    filtered.forEach(item => {
      categoryList.innerHTML += `
      <input type='radio' id='${item.name}' name='bookmark' value='${item.name}'></input>
      <label for='${item.name}'><a href="${item.url}" target="_blank">${item.name}</a></label>
      ` 
  })
}
})
/***********************************************************************************/

/***************************closeListBtn event listener*************************/ 
closeListBtn.addEventListener('click', () => {
  displayOrHideCategory()
})
/***********************************************************************************/

/***************************deleteBookmarkBtn event listener*************************/ 
deleteBookmarkBtn.addEventListener('click', () => {
  const selectedRadio = document.querySelector('input[type="radio"]:checked')
  const radioValue = selectedRadio.value
  const radioCategory = selectedRadio.name
  let bookmarks = getBookmarks()
  let filtered = bookmarks.filter(bookmark => bookmark.name !== radioValue)
  let newfiltered = bookmarks.filter(bookmark => bookmark.name === radioValue)
  let newNewFiltered = newfiltered.filter(bookmark => bookmark.category !== radioCategory)
  filtered.push(newNewFiltered)
  bookmarks = filtered
  localStorage.setItem('bookmarks', JSON.stringify(bookmarks))
  categoryList.innerHTML = ``
  bookmarks.forEach(item => {
    categoryList.innerHTML += `
    <input type='radio' id='${item.name}' name='${item.category}' value='${item.name}'></input>
    <label for='${item.name}'><a href="${item.url}" target="_blank">${item.name}</a></label>
    ` 
  })
})
/********/

if you look deletBookmarkBTN even listener, i made some changes. Maybe the filter method is the wrong method to be using.

ILM · April 25, 2025, 9:06pm

tastybites:

  let filtered = bookmarks.filter(bookmark => bookmark.name !== radioValue)
  let newfiltered = bookmarks.filter(bookmark => bookmark.name === radioValue)
  let newNewFiltered = newfiltered.filter(bookmark => bookmark.category !== radioCategory)
  filtered.push(newNewFiltered)

what logic are you using here?

you should also log each variable to check that it is the value you want it to be

tastybites · April 25, 2025, 11:03pm

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 categoryDropdown = document.getElementById('category-dropdown')
const closeFormBtn = document.getElementById('close-form-button')
const addBookmarkBtnForm = document.getElementById('add-bookmark-button-form')
const inputName = document.getElementById('name')
const inputUrl = 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')

/*****************************getBoomarks function*********************************/
 function getBookmarks() {
   try{
     const storedBookmarks =localStorage.getItem('bookmarks')
     const bookmarks = storedBookmarks ? JSON.parse(storedBookmarks) : []
     if(Array.isArray(bookmarks) && bookmarks.every(item => item.name && item.category && item.url)){
       return bookmarks
     } else {
       return []
     }
   }
   catch (error){
    return []
   }
}
/***********************************************************************************/

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

/****************************addBookmarbtn event listener**************************/ 
addBookmarkBtn.addEventListener('click', () => {
  categoryName.innerText = categoryDropdown.value
  displayOrCloseForm()
})
/***********************************************************************************/
 
/***************************close-form-button event listener*************************/ 
closeFormBtn.addEventListener('click', () => {
  displayOrCloseForm()
})
/***********************************************************************************/

/***************************add-bookmark-button-form event listener********************/ 
addBookmarkBtnForm.addEventListener('click', () => {
  const bookmarks = getBookmarks()
  const bookmark = {
  name:  inputName.value,
  category: categoryDropdown.value,
  url: inputUrl.value 
  }
  bookmarks.push(bookmark)
  localStorage.setItem('bookmarks', JSON.stringify(bookmarks))
  inputName.value = ""
  categoryDropdown.value = ''
  inputUrl.value =''
  displayOrCloseForm()
})
/***********************************************************************************/

/***************************displayOrHideCategory function*************************/ 
function displayOrHideCategory(){
  mainSection.classList.toggle('hidden')
  bookmarkListSection.classList.toggle('hidden')
}
/***********************************************************************************/

/***************************viewCategoryBtn event listener*************************/ 
viewCategoryBtn.addEventListener('click', () => {
  
  categoryName.innerText = categoryDropdown.value
  const bookmarks = getBookmarks()

  const filtered = bookmarks.filter(item => item.category === categoryDropdown.value )
  displayOrHideCategory()
  categoryList.innerHTML = ``
  if(filtered.length === 0) {
    categoryList.innerHTML = `<p>No Bookmarks Found</p>`  
  } else {
    filtered.forEach(item => {
      categoryList.innerHTML += `
      <input type='radio' id='${item.name}' name='${item.category}' value='${item.name}'></input>
      <label for='${item.name}'><a href="${item.url}" target="_blank">${item.name}</a></label>
      ` 
  })
}
})
/***********************************************************************************/

/***************************closeListBtn event listener*************************/ 
closeListBtn.addEventListener('click', () => {
  displayOrHideCategory()
})
/***********************************************************************************/

/***************************deleteBookmarkBtn event listener*************************/ 
deleteBookmarkBtn.addEventListener('click', () => {
  const selectedRadio = document.querySelector('input[type="radio"]:checked')
  const radioValue = selectedRadio.value
  const radioCategory = selectedRadio.name
  let bookmarks = getBookmarks()
  let filtered = bookmarks.filter(bookmark => (bookmark.category !== radioCategory && bookmark.value !== radioValue))
  console.log(filtered)
  bookmarks = filtered
  localStorage.setItem('bookmarks', JSON.stringify(bookmarks))
  categoryList.innerHTML = ``
  bookmarks.forEach(item => {
    categoryList.innerHTML += `
    <input type='radio' id='${item.name}' name='${item.category}' value='${item.name}'></input>
    <label for='${item.name}'><a href="${item.url}" target="_blank">${item.name}</a></label>
    ` 
  })
})

/********/

That helped, thanks. I was able to fix the logic and checked console log values and they are correct now. Still not passing. I think it has something to do with the display of bookmarks.. I notice when i delete a bookmark, it goes to screen with leftover bookmarks

tastybites · April 26, 2025, 1:19am

Hi. If you look at the viewCategoryBtn event listener, its not adding the h1 element text when i hit the view categorybtn. I should be adding the category as a title to the bookmark list screen.

tastybites · April 26, 2025, 12:25pm

are other people getting step 23 or am i dumb? Cant seem to filter for the two different cases.

ILM · April 26, 2025, 5:20pm

consider when this whole expression is true and when it is false, it is filtering the right elements?

like, if the bookmark you want to delete is dog breeds in entertainment, and you have these bookmarks:

cat breeds in entertainment
dog breeds in entertainment
dog breeds in miscellaneus
cat breeds in miscellaneus

you need to consider

"entertainment" !== "entertainment" && "cat breeds" !== "dog breeds"
"entertainment" !== "entertainment" && "dog breeds" !== "dog breeds"
"miscellaneus" !== "entertainment" && "dog breeds" !== "dog breeds"
"miscellaneus" !== "entertainment" && "cat breeds" !== "dog breeds"

consider that all those that go to false are being eliminated

you may want to reconsider your logic

tastybites · April 26, 2025, 6:30pm

Much appreciated. Too hard for me.

tastybites · April 26, 2025, 7:42pm

like this

let filtered = bookmarks.filter(bookmark => (
    (bookmark.category !== radioCategory && bookmark.value === radioValue) ||
   (bookmark.category === radioCategory && bookmark.value !== radioValue) ||
   (bookmark.category !== radioCategory && bookmark.value !== radioValue)  
))

ILM · April 26, 2025, 7:44pm

you may want to simplify a bit

what is the combination of two comparisons that would give true only for the bookmark to delete?

now that you have an expression that gives true only for that, flip it with ! (flip the whole expression)

tastybites · April 26, 2025, 7:50pm

like this?

 let filtered = bookmarks.filter(bookmark => (
    !(bookmark.category === radioCategory && bookmark.value === radioValue)
))

ILM · April 26, 2025, 7:51pm

let me know yourself, does it work?

tastybites · April 26, 2025, 7:52pm

it doesn’t work. DOesn’t filter anything

ILM · April 26, 2025, 7:53pm

share your latest full code

tastybites · April 26, 2025, 7:54pm

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 closeFormBtn = document.getElementById('close-form-button')
const addBookmarkBtnForm = document.getElementById('add-bookmark-button-form')
const inputName = document.getElementById('name')
const inputUrl = 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')
const categoryNames = document.getElementById('category-names')
/*****************************getBoomarks function*********************************/
 function getBookmarks() {
   try{
     const storedBookmarks =localStorage.getItem('bookmarks')
     const bookmarks = storedBookmarks ? JSON.parse(storedBookmarks) : []
     if(Array.isArray(bookmarks) && bookmarks.every(item => item.name && item.category && item.url)){
       return bookmarks
     } else {
       return []
     }
   }
   catch (error){
    return []
   }
}
/***********************************************************************************/

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

/****************************addBookmarbtn event listener**************************/ 
addBookmarkBtn.addEventListener('click', () => {
  categoryNames.innerText = categoryDropdown.value
  displayOrCloseForm()
})
/***********************************************************************************/
 
/***************************close-form-button event listener*************************/ 
closeFormBtn.addEventListener('click', () => {
  displayOrCloseForm()
})
/***********************************************************************************/

/***************************add-bookmark-button-form event listener********************/ 
addBookmarkBtnForm.addEventListener('click', () => {
  const bookmarks = getBookmarks()
  const bookmark = {
  name:  inputName.value,
  category: categoryDropdown.value,
  url: inputUrl.value 
  }
  bookmarks.push(bookmark)
  localStorage.setItem('bookmarks', JSON.stringify(bookmarks))
  inputName.value = ""
  categoryDropdown.value = ''
  inputUrl.value =''
  displayOrCloseForm()
})
/***********************************************************************************/

/***************************displayOrHideCategory function*************************/ 
function displayOrHideCategory(){
  mainSection.classList.toggle('hidden')
  bookmarkListSection.classList.toggle('hidden')
}
/***********************************************************************************/

/***************************viewCategoryBtn event listener*************************/ 
viewCategoryBtn.addEventListener('click', () => {
  displayOrHideCategory()
  categoryNames.innerText = categoryDropdown.value
  const bookmarks = getBookmarks()

  const filtered = bookmarks.filter(item => item.category === categoryDropdown.value )
  
  categoryList.innerHTML = ``
  if(filtered.length === 0) {
    categoryList.innerHTML = `<p>No Bookmarks Found</p>`  
  } else {
    filtered.forEach(item => {
      categoryList.innerHTML += `
      <input type='radio' id='${item.name}' name='${item.category}' value='${item.name}'></input>
      <label for='${item.name}'><a href="${item.url}" target="_blank">${item.name}</a></label>
      ` 
  })
}
})
/***********************************************************************************/

/***************************closeListBtn event listener*************************/ 
closeListBtn.addEventListener('click', () => {
  displayOrHideCategory()
})
/***********************************************************************************/

/***************************deleteBookmarkBtn event listener*************************/ 
deleteBookmarkBtn.addEventListener('click', () => {
  const selectedRadio = document.querySelector('input[type="radio"]:checked')
  const radioValue = selectedRadio.value
  const radioCategory = selectedRadio.name

  let bookmarks = getBookmarks()

  let filtered = bookmarks.filter(bookmark => (
    !(bookmark.category === radioCategory && bookmark.value === radioValue)
)) 
console.log(filtered)
localStorage.setItem('bookmarks', JSON.stringify(filtered))
categoryList.innerHTML = ``
  filtered.forEach(item => {
    categoryList.innerHTML += `
    <input type='radio' id='${item.name}' name='${item.category}' value='${item.name}'></input>
    <label for='${item.name}'><a href="${item.url}" target="_blank">${item.name}</a></label>
    ` 
  })

})

/********/

ILM · April 26, 2025, 7:56pm

I think you have issues of other type, for example the Add Bookmark button doesn’t work anymore

tastybites · April 26, 2025, 7:57pm

really? It works for me. Im using firefox browser

ILM · April 26, 2025, 7:57pm

and when you run the tests do tests 8 and 9 pass?

tastybites · April 26, 2025, 8:00pm

8 doesn’t pass. I wasn’t able to grab the .category-name dom node. Some kind of bug so i added an id to that element and was able to manipulate dom node

ILM · April 26, 2025, 8:02pm

there are multiple .category-name elements, did you add an id to all of them?

tastybites · April 26, 2025, 8:02pm

i didn’t know that. No i did not add an id to all of them

Topic		Replies	Views
Build a Bookmark Manager App - Build a Bookmark Manager App JavaScript	7	50	May 22, 2025
Build a Bookmark Manager App - Build a Bookmark Manager App JavaScript	2	49	May 17, 2025
Build a Bookmark Manager App - Build a Bookmark Manager App JavaScript	14	109	April 14, 2025
Build a Bookmark Manager App - Build a Bookmark Manager App JavaScript	1	77	April 1, 2025
Build a Bookmark Manager App - Build a Bookmark Manager App JavaScript	4	261	February 25, 2025

Build a Bookmark Manager App (last step)

Related topics