Build a Bookmark Manager App - Build a Bookmark Manager App

JavaScript
1

Tell us what’s happening:

Hello, I have two errors in my code.

  1. When the bookmarks key in localStorage contains a valid array of bookmark objects, the getBookmarks function should return an empty array.

  2. When you click #delete-bookmark-button, it should delete the bookmark corresponding to the selected radio button and the appropriate category from local storage and refresh the list of displayed bookmarks.

Your code so far

/* file: script.js */
const mainSection = document.getElementById('main-section');
const formSection = document.getElementById('form-section');
const bookmarkListSection = document.getElementById('bookmark-list-section');
const categoryDropdown = document.getElementById('category-dropdown');
const addBookmarkButton = document.getElementById('add-bookmark-button');
const closeFormButton = document.getElementById('close-form-button');
const addBookmarkButtonForm = document.getElementById('add-bookmark-button-form');
const viewCategoryButton = document.getElementById('view-category-button');
const closeListButton = document.getElementById('close-list-button');
const deleteBookmarkButton = document.getElementById('delete-bookmark-button');
const categoryNameElements = document.querySelectorAll('.category-name');
const nameInput = document.getElementById('name');
const urlInput = document.getElementById('url');
const categoryList = document.getElementById('category-list');


addBookmarkButton.addEventListener('click', () => {
    updateCategoryName();
    displayOrCloseForm();
});

closeFormButton.addEventListener('click', displayOrCloseForm);

addBookmarkButtonForm.addEventListener('click', () => {
    addBookmark();
    resetForm();
    displayOrCloseForm();
});

viewCategoryButton.addEventListener('click', () => {
    updateCategoryName();
    displayBookmarksByCategory();
    displayOrHideCategory();
});

closeListButton.addEventListener('click', displayOrHideCategory);

deleteBookmarkButton.addEventListener('click', () => {
    deleteBookmark();
    displayBookmarksByCategory();
});


function getBookmarks() {
    const bookmarks = localStorage.getItem('bookmarks');
    if (!bookmarks) {
        return []; 
    }
    try {
        const parsedBookmarks = JSON.parse(bookmarks);
        
        return Array.isArray(parsedBookmarks) ? parsedBookmarks : [];
    } catch {
        
        return [];
    }
}


function addBookmark() {
    const bookmarks = getBookmarks();
    const newBookmark = {
        name: nameInput.value,
        category: categoryDropdown.value,
        url: urlInput.value
    };
    bookmarks.push(newBookmark);
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}


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


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


function updateCategoryName() {
    categoryNameElements.forEach(el => {
        el.textContent = categoryDropdown.options[categoryDropdown.selectedIndex].text;
    });
}


function displayBookmarksByCategory() {
    const selectedCategory = categoryDropdown.value;
    const bookmarks = getBookmarks();
    const filteredBookmarks = bookmarks.filter(bookmark => bookmark.category === selectedCategory);

    categoryList.innerHTML = '';

    if (filteredBookmarks.length === 0) {
        categoryList.innerHTML = '<p>No Bookmarks Found</p>';
    } else {
        filteredBookmarks.forEach(bookmark => {
            const listItem = document.createElement('div');
            listItem.innerHTML = `
                <input type="radio" id="${bookmark.name}" name="bookmark" value="${bookmark.name}">
                <label for="${bookmark.name}">
                    <a href="${bookmark.url}" target="_blank">${bookmark.name}</a>
                </label>
            `;
            categoryList.appendChild(listItem);
        });
    }
}


function deleteBookmark() {
    const selectedBookmark = document.querySelector('input[name="bookmark"]:checked');
    if (selectedBookmark) {
        const selectedBookmarkName = selectedBookmark.value;
        const bookmarks = getBookmarks();
        const updatedBookmarks = bookmarks.filter(bookmark => bookmark.name !== selectedBookmarkName);
        localStorage.setItem('bookmarks', JSON.stringify(updatedBookmarks));
        
        displayBookmarksByCategory();
    }
}


function resetForm() {
    nameInput.value = '';
    urlInput.value = '';
}


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

Challenge Information:

Build a Bookmark Manager App - Build a Bookmark Manager App

2

for the first test, you are not dealing with invalid objects, like

localStorage.setItem("bookmarks", JSON.stringify([{name: "example1", category: "news", notUrl: "example1.com"}]));
console.log(getBookmarks())

getBookmarks in this case returns an array with an object, not an empty array as requested

for the deleting test, what would your code do if you have two bookmarks with the same name?

{
    "bookmarks": [
        {
            "name": "duplicated-name",
            "category": "news",
            "url": "example1.com"
        },
        {
            "name": "duplicated-name",
            "category": "entertainment",
            "url": "example2.com"
        }
    ]
}

is it able to delete one but not the other?