Hey can someone give me hand please? :). I cant get the final step.
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 categoryList = document.getElementById('category-list')
const categoryDropdown = document.getElementById('category-dropdown')
const closeFormBtn = document.getElementById('close-form-button')
const addBookmarkBtnForm = document.getElementById('add-bookmark-button-form')
const bookmarkListSection = document.getElementById('bookmark-list-section')
const viewCategoryBtn = document.getElementById('view-category-button')
const closeListBtn = document.getElementById('close-list-button')
const deleteBookmarkBtn = document.getElementById('delete-bookmark-button')
let radioInput
const getBookmarks = () => {
const data = localStorage.getItem('bookmarks');
if (!data || !data.trim().startsWith('[')) {
return [];
}
const parsed = JSON.parse(data);
// Return [] if it's NOT an array or contains invalid items
if (
!Array.isArray(parsed) ||
!parsed.every(b => typeof b === 'object' && b !== null)
) {
return [];
}
return parsed;
};
const displayOrCloseForm = () => {
mainSection.classList.toggle('hidden')
formSection.classList.toggle('hidden')
}
closeListBtn.addEventListener('click', () => {
displayOrHideCategory()
})
addBookmarkBtn.addEventListener('click', () => {
categoryName.innerText = `${categoryDropdown.value}`
displayOrCloseForm()
})
closeFormBtn.addEventListener('click', () => {
displayOrCloseForm()
})
deleteBookmarkBtn.addEventListener('click', () => {
let bookmarks = JSON.parse(localStorage.getItem('bookmarks'))
bookmarks = bookmarks.filter(bookmark => {
bookmark.name !== radioInput
})
localStorage.setItem('bookmarks', JSON.stringify(bookmarks))
})
addBookmarkBtnForm.addEventListener('click', (e) => {
e.preventDefault()
const name = document.getElementById('name')
const url = document.getElementById('url')
let newBookmark = {
name: name.value,
category: categoryDropdown.value,
url: url.value
}
let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || []
bookmarks.push(newBookmark)
localStorage.setItem('bookmarks', JSON.stringify(bookmarks))
name.value= ''
url.value=''
displayOrCloseForm()
}
)
const displayOrHideCategory = () => {
bookmarkListSection.classList.toggle('hidden')
mainSection.classList.toggle('hidden')
}
viewCategoryBtn.addEventListener('click', () => {
categoryName.innerText = `${categoryDropdown.value}`
displayOrHideCategory()
let bookmarks = JSON.parse(localStorage.getItem('bookmarks'))
if(!Array.isArray(bookmarks) || bookmarks.length === 0){
return categoryList.innerHTML = '<p>No Bookmarks Found</p>'
}
const filtered = bookmarks.filter(item => item.category === categoryDropdown.value)
if(filtered.length === 0){
categoryList.innerHTML = '<p>No Bookmarks Found</p>'
} else {
categoryList.innerHTML = '';
filtered.forEach(bookmark => {
const radio = document.createElement('input')
radio.type = 'radio'
radio.id = bookmark.name
radio.value = bookmark.name
radio.name = categoryDropdown.value
const label = document.createElement('label')
label.htmlFor = bookmark.name
label.innerHTML = `<a href='${bookmark.url}'>${bookmark.name}</a>`
categoryList.appendChild(radio)
categoryList.appendChild(label)
radioInput = radio.value
})
}
})
The final step of what? How are you stuck?
What happening is when i try to find the selected radio button to filter out the bookmarks saved in state, it just deletes all of the bookmarks
It would help if you post a link to the project and talk about the debugging youâve tried.
It would help if you talk about the debugging youâve tried.
i figured it out i think. I didn;t do enough debugging. My bad
Hi . I cant get step 5 to pass.bookmarks key in the localStorage does not contain a valid array of bookmark objects, the getBookmarks function should return an empty array.
How do you check if an array contains valid objects?
This is what i did but dont know how to do it.
function getBookmarks() {
const bookmarks = JSON.parse(localStorage.getItem(âbookmarksâ))
if (bookmarks === null || !Array.isArray(bookmarks) ) {
return
} else {
return bookmarks
}
The original way i wrote it in the first post is something i got from chatgtp that doesnât make much sense to me
Please donât copy code from ChatGPT.
1 Like
Ok i wont. I really try not to because I want to understand what is going on. I rarely do it.
ILM
April 24, 2025, 8:27am
14
you also need to check that it has the needed keys
I decided to start from scratch. When you say check for a key, are you refferring to the array of objects? Or are you talking about key in the key value pair in in the object
const mainSection = document.getElementById('main-section')
const formSection = document.getElementById('form-section')
localStorage.removeItem('bookmarks')
function getBookmarks() {
const bookmarks = JSON.parse(localStorage.getItem('bookmarks'))
if (bookmarks === null || !Array.isArray(bookmarks) ) {
return []
} else {
return bookmarks
}
}
function displayOrCloseForm() {
mainSection.classList.toggle('hidden')
formSection.classList.toggle('hidden')
}
console.log(getBookmarks())
thanks. also, how do i check to see if the array contains objects?
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
let bookmarks = getBookmarks()
let filtered = bookmarks.filter(bookmark => bookmark.name !== radioValue)
bookmarks = filtered
localStorage.setItem('bookmarks', JSON.stringify(bookmarks))
categoryList.innerHTML = ``
bookmarks.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>
`
})
})
/***********************************************************************************/
Everything seems to work yet the last step wont pass.
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.
Iâve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the âpreformatted textâ tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (').
Thanks! I will use three backticks like you suggested, before and after. I thought i deleted this original post but i guess i didnât. Still learning how your forum works.
ILM
April 25, 2025, 6:05pm
20
create two bookmarks with the same name on different categories, is your able to delete one and not the other?
1 Like
You are very clever, i didnât think of that
