Build a Bookmark Manager App - Build a Bookmark Manager App

JavaScript
1

Tell us what’s happening:

When the bookmarks key in the localStorage does not contain a valid array of bookmark objects, the getBookmarks function should return an empty array. i used JSON.parse(localStorage.getItem(“bookmarks”))|| to handle the case where bookmarks is not set or is invalid, it failed and i have used const storedBookmarks =JSON.parse(localStorage.getItem(“bookmarks”))|| and checked if storedBookmarks is an array using Array.isArray() yet it failed, i used try and catch as well and it failed. hlp

Your code so far

const mainSection = document.getElementById("main-section");
const formSection = document.getElementById("form-section");
const addBookmarkButton = 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 nameInput = document.getElementById("name");
const urlInput = document.getElementById("url");
const bookmarkListSection = document.getElementById("bookmark-list-section");
const viewCategoryButton = document.getElementById("view-category-button");
const categoryList = document.getElementById("category-list");
const closeListButton = document.getElementById("close-list-button");
const deleteBookmarkButton = document.getElementById("delete-bookmark-button");

const getBookmarks=()=>{
  bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
  return Array.isArray(bookmarks) ? bookmarks : [];
  }

let bookmarks = getBookmarks();

  let bookmarksObj={}
const displayOrCloseForm=()=>{
mainSection.classList.toggle("hidden");
formSection.classList.toggle("hidden");
}

addBookmarkButton.addEventListener("click",()=>{
categoryName.innerText = categoryDropdown.value;
displayOrCloseForm();
})

closeFormButton.addEventListener("click",()=>{
displayOrCloseForm();
})

addBookmarkButtonForm.addEventListener("click",(e)=>{
  e.preventDefault();
  
  let bookmarks = getBookmarks();
  bookmarksObj={
  name: nameInput.value,
  category: categoryDropdown.value,
  url: urlInput.value,
}
bookmarks.push(bookmarksObj);
localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
nameInput.value = "";
  urlInput.value = "";
displayOrCloseForm();
})

const  displayOrHideCategory=()=>{
  mainSection.classList.toggle("hidden");
bookmarkListSection.classList.toggle("hidden");
}

viewCategoryButton.addEventListener("click",()=>{
displayOrHideCategory();
categoryName.innerText = categoryDropdown.value;
categoryList.innerHTML = "";
bookmarks = getBookmarks();

const selectedbookmarks = bookmarks.filter((bookmark)=> bookmark.category===categoryDropdown.value)
if(selectedbookmarks.length===0){
categoryList.innerHTML ="<p>No Bookmarks Found</p>"
}else{ 
  selectedbookmarks.forEach((bookmark, index)=>{
categoryList.innerHTML += `<label for="${bookmark.name}">
<input id="${bookmark.name}" type="radio" name ="bookmark" value="${bookmark.name}" data-category="${bookmark.category}"/> 
<a href="${bookmark.url}" style ="text-decoration:none">${bookmark.name}</a></label>`
})
}
})

closeListButton.addEventListener("click",()=>{
 bookmarkListSection.classList.add("hidden");
 mainSection.classList.remove("hidden")
})

deleteBookmarkButton.addEventListener("click",()=>{
bookmarks = getBookmarks();

 const selectedRadio = document.querySelector('input[name="bookmark"]:checked')
 if(!selectedRadio) return;

const selectedName = selectedRadio.value
const selectedCategory = selectedRadio.dataset.category;

let bookmarks = getBookmarks();
const filteredSelectedbookmarks = bookmarks.filter((bookmark)=>!(bookmark.name===selectedName && bookmark.category===selectedCategory))
localStorage.setItem("bookmarks", JSON.stringify(filteredSelectedbookmarks));
viewCategoryButton.click()
})

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

Challenge Information:

Build a Bookmark Manager App - Build a Bookmark Manager App

2

Consider at which point error happens - is it when result of parsing is not an array, or during attempt of parsing invalid JSON itself?

3

Fixed thank you very much