bookmark-manager-app.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 categoryNameElements = document.querySelectorAll(".category-name");
const categoryList = document.getElementById("category-list");

const nameInput = document.getElementById("name");
const urlInput = document.getElementById("url");

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");


function getBookmarks(){
  try{
    let array = JSON.parse(localStorage.getItem("bookmarks"));
    let validArr;
  array.forEach((bookmark)=>{
    let hasName = Object.hasOwn(bookmark,"name");
    let hasCat = Object.hasOwn(bookmark,"category");
    let hasURL = Object.hasOwn(bookmark,"url");
    if (hasName && hasCat && hasURL){
      validArr = true;
    }
    else{validArr = false}
  }) 
  return validArr ? array : []
  }catch(error){return []}
}


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


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


addBookmarkButton.addEventListener("click", () => {
  const selectedCategory = categoryDropdown.value;
  categoryNameElements.forEach((el) => {
    el.innerText = selectedCategory;
  });
  displayOrCloseForm();
});

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

addBookmarkButtonForm.addEventListener("click", (e) => {
  e.preventDefault();
  const name = nameInput.value;
  const category = categoryDropdown.value;
  const url = urlInput.value;

  const bookmarks = getBookmarks();
  bookmarks.push({ name, category, url });
  localStorage.setItem("bookmarks", JSON.stringify(bookmarks));

  nameInput.value = "";
  urlInput.value = "";

  displayOrCloseForm();
});


viewCategoryButton.addEventListener("click", () => {
  const selectedCategory = categoryDropdown.value;
  categoryNameElements.forEach((el) => {
    el.innerText = selectedCategory;
  });

  const bookmarks = getBookmarks();
  const filteredBookmarks = bookmarks.filter((b) => b.category === selectedCategory);

  if (filteredBookmarks.length === 0) {
    categoryList.innerHTML = `<p>No Bookmarks Found</p>`;
  } else {
    categoryList.innerHTML = "";
    filteredBookmarks.forEach((b) => {
      const radio = document.createElement("input");
      radio.type = "radio";
      radio.id = b.name;
      radio.name = "bookmark-radio";
      radio.value = b.name;

      const label = document.createElement("label");
      label.setAttribute("for", b.name);

      const a = document.createElement("a");
      a.href = b.url;
      a.innerText = b.name;
      a.target = "_blank";

      label.appendChild(a);
      categoryList.appendChild(radio);
      categoryList.appendChild(label);
    });
  }

  displayOrHideCategory();
});

closeListButton.addEventListener("click", () => {
  displayOrHideCategory();
});


deleteBookmarkButton.addEventListener("click", () => {
  const selectedRadio = document.querySelector('input[name="bookmark-radio"]:checked');
  if (!selectedRadio) return;

  const bookmarkName = selectedRadio.value;
  const selectedCategory = categoryDropdown.value;

  let bookmarks = getBookmarks();
  bookmarks = bookmarks.filter(
    (b) => !(b.name === bookmarkName && b.category === selectedCategory)
  );
  localStorage.setItem("bookmarks", JSON.stringify(bookmarks));

  const filteredBookmarks = bookmarks.filter((b) => b.category === selectedCategory);
  if (filteredBookmarks.length === 0) {
    categoryList.innerHTML = `<p>No Bookmarks Found</p>`;
  } else {
    categoryList.innerHTML = "";
    filteredBookmarks.forEach((b) => {
      const radio = document.createElement("input");
      radio.type = "radio";
      radio.id = b.name;
      radio.name = "bookmark-radio";
      radio.value = b.name;

      const label = document.createElement("label");
      label.setAttribute("for", b.name);

      const a = document.createElement("a");
      a.href = b.url;
      a.innerText = b.name;
      a.target = "_blank";

      label.appendChild(a);
      categoryList.appendChild(radio);
      categoryList.appendChild(label);
    });
  }
});