Tell us what’s happening:
The last test doesn’t pass. I tried two deletion methods. 1. First, deleting the buttons and updating the store. It worked, but didn’t count. 2. Updating the store, then redrawing. The problem is that it deletes buttons with identical properties.
Your code so far
/* file: script.js */
const mainSection = document.querySelector('#main-section');
const formSection = document.querySelector('#form-section');
const addBookmarklButton = document.querySelector('#add-bookmark-button');
const viewCategoryButton = document.querySelector('#view-category-button');
const dropdownButton = document.querySelector('#category-dropdown');
const closeButton = document.querySelector('#close-form-button');
const addBookmarkButtonForm = document.querySelector('#add-bookmark-button-form');
const categoryList = document.querySelector('#category-list');
const deleteBookmarkButton = document.querySelector('#delete-bookmark-button');
const categoryName = document.querySelector('.category-name');
const nameInput = document.querySelector('#name');
const linkInput = document.querySelector('#url');
const listSection = document.querySelector('#bookmark-list-section');
const closeListButton = document.querySelector('#close-list-button');
function getBookmarks() {
const data = localStorage.getItem('bookmarks');
if (!data) return [];
try {
const parsed = JSON.parse(data);
return Array.isArray(parsed) && parsed.every(item => typeof item === 'object' &&
item !== null &&
'name' in item &&
'category' in item &&
'url' in item ) ? parsed : [];
} catch (e) {
return [];
}
}
function displayOrCloseForm(){
mainSection.classList.toggle('hidden');
formSection.classList.toggle('hidden');
}
addBookmarklButton.addEventListener('click', ()=>{
categoryName.textContent=dropdownButton.value;
displayOrCloseForm();
})
closeButton.addEventListener('click', ()=>{
displayOrCloseForm();
})
addBookmarkButtonForm.addEventListener('click',()=>{
const currentObj={
}
currentObj.name=nameInput.value;
currentObj.category=dropdownButton.value;
currentObj.url=linkInput.value;
const bookmark = getBookmarks();
bookmark.push(currentObj);
localStorage.setItem('bookmarks', JSON.stringify(bookmark));
nameInput.value='';
linkInput.value='';
displayOrCloseForm(formSection);
});
function displayOrHideCategory() {
mainSection.classList.toggle('hidden');
listSection.classList.toggle('hidden');
}
closeListButton.addEventListener('click', ()=>{
displayOrHideCategory();
})
function updateRadio(){
const bookmarks = getBookmarks();
const filterList = bookmarks.filter((item)=>{return item. category===dropdownButton.value});
if(filterList.length===0){
categoryList.innerHTML='<p>No Bookmarks Found</p>'
console.log(getBookmarks())
} else {
categoryList.innerHTML='';
filterList.forEach((item)=>{
(categoryList.innerHTML+=`
<input type="radio" id="${item.name}" value="${item.name}" name="${dropdownButton.value}">
<label for="${item.name}"><a href="${item.url}">${item.name}</a></label>`)
})
}
}
viewCategoryButton.addEventListener('click', ()=>{
displayOrHideCategory();
updateRadio();
})
deleteBookmarkButton.addEventListener('click', ()=>{
const checkedRadio = document.querySelector('input[type="radio"]:checked');
const selectedLabel = document.querySelector(`label[for="${checkedRadio.id}"]`);
const link = selectedLabel.querySelector('a');
// if(checkedRadio){
// const selectedLabel = document.querySelector(`label[for="${checkedRadio.id}"]`);
// selectedLabel.remove();
// checkedRadio.remove();
// }
const bookmarks = getBookmarks();
const newBookmarks =bookmarks.filter(({name, category, url})=>name!==checkedRadio.id);
localStorage.setItem('bookmarks', JSON.stringify(newBookmarks));
updateRadio();
console.log(getBookmarks());
})
<!-- 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/142.0.0.0 Safari/537.36
Challenge Information:
Build a Bookmark Manager App - Build a Bookmark Manager App
