Tell us what’s happening:
Tests 5, 19 and 20 arent passing even though it is working fine. I cant find an issue and have tried it without string concatination etc.
Test 23 isnt passing and the code isnt working like it should. I tried debugging by loging diffrent steps to the console but I cant find a solution. The code just doesnt do as told.
Thanks in advance for any help!
Your code so far
/* file: script.js */
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 closeFormButton = document.getElementById("close-form-button");
const addBookmarkButtonForm = document.getElementById("add-bookmark-button-form");
const nameTag = document.getElementById("name")
const categoryTag = document.getElementById("category");
const urlTag = document.getElementById("url");
const bookmarkListSection = document.getElementById("bookmark-list-section");
const viewCategoryButton = 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");
const bookmarksArr = [
{
name: "hey",
category: "work",
url: "dreamUrl"
},
{
name: "bye",
category: "news",
url: "dreaUrl"
},
{
name: "mind",
category: "entertainment",
url: "dreamUl"
},
{
name: "hey",
category: "miscellaneous",
url: "dremUrl"
}
]
localStorage.setItem("bookmarks", JSON.stringify(bookmarksArr))
const getBookmarks = () => {
const bookmarksArr = JSON.parse(localStorage.getItem("bookmarks"));
// console.log(bookmarksArr)
if(!Array.isArray(bookmarksArr) || !bookmarksArr.every(b => typeof b === 'object' && b !== null)){
return [];
}else {
return bookmarksArr
}
}
const displayOrCloseForm = () => {
mainSection.classList.toggle("hidden");
formSection.classList.toggle("hidden");
}
addBookmarkBtn.addEventListener("click", ()=>{
categoryName.innerText = categoryDropdown.value;
displayOrCloseForm();
})
closeFormButton.addEventListener("click", ()=>{
displayOrCloseForm()
})
addBookmarkButtonForm.addEventListener("click", ()=>{
const bookmarks = getBookmarks();
bookmarks.push({
name: nameTag.value,
category: categoryDropdown.value,
url: urlTag.value
})
localStorage.setItem("bookmarks", JSON.stringify(bookmarks))
nameTag.value = "";
urlTag.value = "";
displayOrCloseForm();
})
const displayOrHideCategory = () => {
mainSection.classList.toggle("hidden");
bookmarkListSection.classList.toggle("hidden");
}
viewCategoryButton.addEventListener("click", ()=>{
const bookmark = getBookmarks();
categoryName.innerText = categoryDropdown.value;
const filtered = bookmark.filter((e)=>e.category.toLowerCase() == categoryDropdown.value.toLowerCase())
if(filtered.length == 0){
categoryList.innerHTML = "<p>No Bookmarks Found</p>"
}else if(filtered){
filtered.forEach((e)=>{
categoryList.innerHTML += `<input type="radio" id="${e.name}" value="${e.name}" name="radioBtn">
<label for="${e.name}"><a href="${e.url}">${e.name}</a></label>`;
})
}
displayOrHideCategory()
})
closeListBtn.addEventListener("click", ()=>{
displayOrHideCategory()
categoryList.innerHTML = ""
});
deleteBookmarkBtn.addEventListener("click", ()=>{
let buttons = document.querySelector('input[type="radio"]:checked');
if(!buttons){
alert("nothing selected");
return
}else{
let bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
bookmarks = bookmarks.filter(bookmark => bookmark.name !== buttons.value)
// console.log(bookmarks)
localStorage.setItem('bookmarks', JSON.stringify(bookmarks))
// console.log(JSON.parse(localStorage.getItem("bookmarks")))
//update list
const newBookmarks = JSON.parse(localStorage.getItem('bookmarks'));
console.log(newBookmarks)
const filter = newBookmarks.filter((bookmark)=> bookmark.category === categoryDropdown.value)
console.log(filter)
if(filter.length == 0){
categoryList.innerHTML = "<p>No Bookmarks Found</p>"
}else{
filter.forEach((e)=>{
categoryList.innerHTML += `<input type="radio" id="${e.name}" value="${e.name}" name="radioBtn">
<label for="${e.name}"><a href="${e.url}">${e.name}</a></label>`;
})}}
})
<!-- 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/149.0.0.0 Safari/537.36 OPR/133.0.0.0
Challenge Information:
Build a Bookmark Manager App - Build a Bookmark Manager App
