nothing happens when you viewcategory of a dropdown thats empty
Exactly. What should happen?
Can you find the console tab with the errors? It’s pretty important that you’re able to do this.
Can you screenshot the “Issues” tab you see?
Can you try this?
To open the Chrome Console, you can use the keyboard shortcut Ctrl + Shift + J on Windows or Linux, and Command + Option + J on Mac. This will bring up the Console panel in Chrome DevTools
it should display no bookmark found
Yes. In what section would it be displaying that?
Ok but you have to click “run tests” at this point so the tests can generate the errors.
bookmarklist section
Yes. And what function displays that section?
displayOrHideCategory();
Yes. Please now take a look at your event listener again. Can you see what might be preventing your code from ever reaching that function call?
OMG thank you soo much viewcategory event doesnt need the function
I’m not sure you’ve figured it out based on your reply. Mind sharing your updated code?
please can you explain the devtool error?
If the only time you see that error is when you run the tests, then it just means the tests are sending some garbage to see how your code handles it.
I’ll create a github issue for this since I don’t think the tests should have passed. It was the return statement that was breaking that event handler for empty bookmark categories since it prevented your code from ever reaching displayOrHideCategory().
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 closeFormBtn = document.getElementById('close-form-button')
const addBookmarkButtonForm = document.getElementById('add-bookmark-button-form')
const dropdown = document.getElementById('category-dropdown');
const url = document.getElementById('url');
const bookmarkListSection = document.getElementById('bookmark-list-section');
const viewCategoryBtn = document.getElementById('view-category-button');
const categoryList = document.getElementById('category-list')
//const name=document.getElementById('name')
const closeListBtn = document.getElementById('close-list-button')
const deleteBookmarkBtn = document.getElementById('delete-bookmark-button')
const getBookmarks = () => {
try{
const stored = localStorage.getItem('bookmarks')
const parsed = JSON.parse(stored)
if (Array.isArray(parsed) && parsed.every(item => typeof item === 'object' && typeof item.name==='string' && typeof item.url==='string')) {
return parsed
}
} catch(err) {
console.error('Error parsing bookmarks:', err);
}
return []
}
console.log(getBookmarks())
const displayOrCloseForm = () => {
mainSection.classList.toggle('hidden')
formSection.classList.toggle('hidden')
}
addBookmarkBtn.addEventListener('click', () => {
const selectedValue = dropdown.options[dropdown.selectedIndex].value;
categoryName.innerText = selectedValue;
displayOrCloseForm()
})
closeFormBtn.addEventListener('click', () => {
displayOrCloseForm()
})
addBookmarkButtonForm.addEventListener('click', () => {
const nameInput = document.getElementById('name')
const bookmarkObj = getBookmarks()
const bookmarksData = {
name: nameInput.value.trim(),
category: dropdown.options[dropdown.selectedIndex].value,
url: url.value.trim(),
}
if (!bookmarksData.name || !bookmarksData.url) {
alert('fill in both name and url');
return
}
bookmarkObj.push(bookmarksData)
localStorage.setItem('bookmarks', JSON.stringify(bookmarkObj))
nameInput.value = ''
url.value = ''
displayOrCloseForm()
})
const displayOrHideCategory = () => {
mainSection.classList.toggle('hidden')
bookmarkListSection.classList.toggle('hidden')
}
viewCategoryBtn.addEventListener('click', () => {
// const name=document.getElementById('name')
const selectedCategory = dropdown.options[dropdown.selectedIndex].value
categoryName.innerText = selectedCategory
const bookmarks = getBookmarks()
const filtered = bookmarks.filter(book => book.category === selectedCategory)
categoryList.innerHTML = ''//clear pre content
if (filtered.length === 0) {
categoryList.innerHTML = `<p>No Bookmarks Found</p>`
return;
} else {
filtered.forEach((bookmark) => {
categoryList.innerHTML += `
<input type="radio" id="${bookmark.name}" name="${selectedCategory}" value="${bookmark.name}"/>
<label for="${bookmark.name}">
<a href="${bookmark.url}">${bookmark.name}</a>
</label>
`;
});
}
//displayOrHideCategory();
})
closeListBtn.addEventListener('click', () => {
displayOrHideCategory();
})
deleteBookmarkBtn.addEventListener('click', () => {
const selectedCategory = dropdown.options[dropdown.selectedIndex].value;
const selectedRadio = document.querySelector(`input[name="${selectedCategory}"]:checked`);
if (!selectedRadio) {
alert('Please select a bookmark to delete.');
return;
}
const selectedName = selectedRadio.value;
//const selectedCategory = dropdown.options[dropdown.selectedIndex].text;
const allBookmarks = getBookmarks();
const filtered = allBookmarks.filter(book => !(book.name === selectedName && book.category === selectedCategory));
localStorage.setItem('bookmarks', JSON.stringify(filtered));
viewCategoryBtn.click();
});
ohh thats true when you take out the return it works but why the test still pass?when the only thing i did was remove the function
Yes. The tests should not have passed your code like that. And I’ll be creating an issue to try to get that fixed.