Tell us what’s happening:
I’m trying to solve the last test.
According to my own testing, deleting the bookmark removes it from the list and also the local storage.
However, it seems the test is showing that i still have 2 input elements even though only one is there.
it also seems like the test is looking for a closing tag for the input element (?) even though input elements do not have a closing tag.
n {message: 'expected <input type="radio" …(3)></input>\n…(1) to have a length of 1 but got 2', showDiff: true, actual: 2, expected: 1, stack: 'AssertionError: expected <input type="radio" …(3)>…test-runner/8.0.0/dom-test-evaluator.js:2:255976)'}
Your code so far
/* file: script.js */
const addBookmarkBtn = document.getElementById("add-bookmark-button");
const closeFormBtn = document.getElementById("close-form-button");
const categoryName = document.querySelector('.category-name');
const addBookmarkBtnForm = document.getElementById("add-bookmark-button-form");
const mainSection = document.getElementById("main-section");
const bookmarkListSection = document.getElementById("bookmark-list-section");
const categoryList = document.getElementById("category-list");
const viewCategoryBtn = document.getElementById("view-category-button");
const bookmarkName = document.getElementById("name");
const bookmarkURL = document.getElementById("url");
const closeListBtn = document.getElementById("close-list-button");
const deleteBookmarkBtn = document.getElementById("delete-bookmark-button");
const parseBookmarksFromLocalStorage = (lsBookmarks) => {
try {
const parsedBookmarks = JSON.parse(lsBookmarks);
if (!Array.isArray(parsedBookmarks)) {
throw new Error("Parsed bookmarks is not an array");
}
return parsedBookmarks;
} catch (error) {
console.error("Error parsing bookmarks from localStorage:", error);
return [];
}
}
const getBookmarks = () => {
let lsBookmarks = localStorage.getItem("bookmarks");
// console.log(lsBookmarks);
// check for valid array
const parsedBookmarks = parseBookmarksFromLocalStorage(lsBookmarks);
// parsedBookmars is now either an empty array or an array of bookmarks
// TODO: if parsedBookmarks is not empty, then check if the array contains valid bookmark objects with name, url, and category properties. Otherwise, return an empty array. This is to prevent any malformed data from localStorage from breaking the app.
const validBookmarks = parsedBookmarks.filter(bookmark => {
return bookmark.name && bookmark.url && bookmark.category;
});
return validBookmarks;
}
/*
[{"name":"cnn","url":"https://www.cnn.com","category":"news"},{"name":"fox","url":"https://www.fox.com","category":"enterntainment"}]
[{"name": "example1","category": "news","url": "example1.com"},{"name": "example2","category": "entertainment","url": "example2.com"},{"name": "example3","category": "work","url": "example3.com"},{"name": "example4","category": "news","url": "example4.com"}]
*/
const displayOrCloseForm = () => {
const mainSection = document.getElementById("main-section");
const formSection = document.getElementById("form-section");
// toggle the hidden class on both sections
mainSection.classList.toggle("hidden");
formSection.classList.toggle("hidden");
}
const displayOrHideCategory = () => {
// should toggle the hidden class on the main-section and bookmark-list-section elements
mainSection.classList.toggle("hidden");
bookmarkListSection.classList.toggle("hidden");
}
addBookmarkBtn.addEventListener("click", () => {
console.log('clicked');
// console.log(document.querySelector('.category-name').textContent);
// console.log(document.querySelector('#category-dropdown').value);
categoryName.textContent = document.querySelector('#category-dropdown').value;
displayOrCloseForm();
});
closeFormBtn.addEventListener("click", () => {
displayOrCloseForm();
});
addBookmarkBtnForm.addEventListener("click", () => {
// addBookmark();
const newBookmark = {
name: bookmarkName.value,
url: bookmarkURL.value,
category: categoryName.textContent
}
let bookmarks = getBookmarks();
// if (bookmarks.length > 0) {
// bookmarks = JSON.parse(bookmarks);
// }
bookmarks.push(newBookmark);
localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
bookmarkName.value = "";
bookmarkURL.value = "";
displayOrCloseForm();
});
viewCategoryBtn.addEventListener("click", () => {
updateCategoryView();
displayOrHideCategory();
});
closeListBtn.addEventListener("click", () => {
displayOrHideCategory();
});
deleteBookmarkBtn.addEventListener("click", () => {
const selectedBookmarkRadio = document.querySelector('input[name="bookmarks"]:checked');
const selectedBookmarkLabel = document.querySelector('input[name="bookmarks"]:checked + label');
const selectedCategory = document.querySelector('#category-dropdown').value;
if (selectedBookmarkRadio) {
console.log(`Selected bookmark to delete: ${selectedBookmarkRadio.value}`);
const bookmarkNameToDelete = selectedBookmarkRadio.value;
let bookmarks = getBookmarks();
console.log(bookmarks);
console.log(categoryList.innerHTML);
// remove the bookmark from the category list
selectedBookmarkRadio.remove();
selectedBookmarkLabel.remove();
console.log(`after deletion - categoryList: ${categoryList.innerHTML}`);
// rebuild the bookmarks array without the deleted bookmark and update local storage
bookmarks = bookmarks.filter(bookmark => bookmark.name !== bookmarkNameToDelete || bookmark.category === selectedCategory);
localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
} else {
console.log("No bookmark selected for deletion");
}
updateCategoryView();
});
const updateCategoryView = () => {
const selectedCategory = document.querySelector('#category-dropdown').value;
// console.log(selectedCategory);
// check if local storage bookmarks have the selected category
const bookmarks = getBookmarks();
// console.log(bookmarks);
const filteredBookmarks = bookmarks.filter(bookmark => bookmark.category === selectedCategory);
// console.log(filteredBookmarks);
// clear the category list before displaying the filtered bookmarks
categoryList.innerHTML = "";
if (filteredBookmarks.length > 0) { // category was found in bookmarks from local storate
// Create a document fragment
const fragment = document.createDocumentFragment();
filteredBookmarks.forEach(bookmark => {
const bookmarkRadioButton = document.createElement("input");
bookmarkRadioButton.setAttribute("type", "radio");
bookmarkRadioButton.setAttribute("id", bookmark.name);
bookmarkRadioButton.setAttribute("name", "bookmarks");
bookmarkRadioButton.setAttribute("value", bookmark.name);
fragment.appendChild(bookmarkRadioButton);
const bookmarkLabel = document.createElement("label");
bookmarkLabel.setAttribute("for", bookmark.name);
// bookmarkLabel.textContent = bookmark.name;
const bookmarkAnchor = document.createElement("a");
bookmarkAnchor.setAttribute("href", bookmark.url);
bookmarkAnchor.setAttribute("target", "_blank");
bookmarkAnchor.textContent = bookmark.name;
bookmarkLabel.appendChild(bookmarkAnchor);
fragment.appendChild(bookmarkLabel);
});
categoryList.appendChild(fragment);
} else {
// display a message that there are no bookmarks in the selected category
console.log("No bookmarks found in this category");
categoryList.innerHTML = "<p>No Bookmarks Found</p>";
}
}
<!-- file: index.html -->
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36
Challenge Information:
Build a Bookmark Manager App - Build a Bookmark Manager App