Build a Bookmark Manager App - Build a Bookmark Manager App

JavaScript
11

Yes, this wording is much clear. I was able to follow the instruction and put my code in the reply section.

Now I am stuck on step 17 on the Tests: case section or step 10 on the User Stories: section. For step 10, I added an event listener to #view-category-button button and inside of it I used a forEach() method to loop through bookmarksArrObj variable, which contains the array of object from localStorage, and if no category is found then it will display No Bookmarks Found. For some reason the test keeps failing. Thank you.

function getBookmarks(){
  const bookmarks = localStorage.getItem("bookmarks");
  if(!bookmarks){
    return [];
  }

  try{
    // You must use try/catch block because JSON.parse() can get a syntax error if
    // the string isn't formatted into as vaild JSON
    // Note: bookmarks varible above has nothing to do with the key bookmarks below
    const hasBookmarks = JSON.parse(localStorage.getItem("bookmarks"));
    // In every() method, [] is consider true
    const hasKeys = hasBookmarks.every((obj) => "name" in obj && "category" in obj && "url" in obj);

    if(Array.isArray(hasBookmarks) && hasKeys){
      return hasBookmarks;
    }
    else{
      return [];
    }
  }
  catch{
    return [];
  }
}

const mainSection = document.getElementById("main-section");
const formSection = document.getElementById("form-section");

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

const addBookmarkBtn = document.getElementById("add-bookmark-button");
const categoryName = document.querySelectorAll(".category-name");
const dropdownMenu = document.getElementById("category-dropdown");

addBookmarkBtn.addEventListener("click", () => {
  categoryName.forEach((element) => element.textContent = dropdownMenu.value[0].toUpperCase() + dropdownMenu.value.slice(1));
  displayOrCloseForm();
});

const closeFormBtn = document.getElementById("close-form-button");

closeFormBtn.addEventListener("click", displayOrCloseForm);

const addFormBookmarkBtn = document.getElementById("add-bookmark-button-form");
const nameOfCategory = document.getElementById("name");
const url = document.getElementById("url");


addFormBookmarkBtn.addEventListener("click", (e) => {
  const bookmarksArrObj = getBookmarks();
  bookmarksArrObj.push({name: nameOfCategory.value, category: dropdownMenu.value, url: url.value});

  localStorage.setItem("bookmarks", JSON.stringify(bookmarksArrObj));

  nameOfCategory.value = "";
  url.value = "";
  displayOrCloseForm();
});

const displayBookmarks = document.getElementById("bookmark-list-section");

function displayOrHideCategory(){
  mainSection.classList.toggle("hidden");
  displayBookmarks.classList.toggle("hidden");
}

const viewCategory = document.getElementById("view-category-button");
const listOfCategory = document.getElementById("category-list");

// Below is the issue
viewCategory.addEventListener("click", () => categoryName.forEach((element) => {element.textContent = dropdownMenu.value[0].toUpperCase() + dropdownMenu.value.slice(1);

  const bookmarksArrObj = getBookmarks();
  let hasCategory = false;
  listOfCategory.innerHTML = "";

  bookmarksArrObj.forEach((obj) => {
    if(obj.category === dropdownMenu.value){
      listOfCategory.innerHTML += `<input id="${obj.name}" value="${obj.name}" name="bookmark" type="radio"/>`;
      hasCategory = true;
    }
  });

  if(hasCategory === false){
    listOfCategory.innerHTML = "<p>No Bookmarks Found</p>";
  }
}));