Build a Bookmark Manager App - Build a Bookmark Manager App 17-20

JavaScript
1

Tell us what’s happening:

I am displaying the Bookmark information when there is no bookmarks and when there are bookmarks, but it is not passing 17, 18, 19 or 20.

Your code so far

let mainSection = document.getElementById("main-section");
let formSection = document.getElementById("form-section");
let bmListSection = document.getElementById("bookmark-list-section");
let addBmButton = document.getElementById("add-bookmark-button");
let addBmButtonForm = document.getElementById("add-bookmark-button-form");
let closeFormButton = document.getElementById("close-form-button");
let closeListButton = document.getElementById("close-list-button")
let nameInput = document.getElementById("name");
let urlInput = document.getElementById("url");
let categoryDropdown = document.getElementById("category-dropdown");
let viewCategoryButton = document.getElementById("view-category-button");
let categoryList = document.getElementById("category-list");
let categoryTitles = document.querySelectorAll(".category-name");
let categoryTitle = categoryTitles[0];
let categoryTitle2 = categoryTitles[1];

function getBookmarks(){
  try {
        const storedBookmarks = localStorage.getItem("bookmarks");
        const bookmarks = storedBookmarks ? JSON.parse(storedBookmarks) : [];

        if (Array.isArray(bookmarks) && bookmarks.every(bookmark => bookmark.name && bookmark.category && bookmark.url)) {
            return bookmarks;
        } else {
            return [];
        }
    } catch (error) {
        console.error("Error", error);
        return [];
    }
};

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

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

addBmButton.addEventListener("click", () => {
  displayOrCloseForm();
  categoryTitle.innerText = categoryDropdown.value[0].toUpperCase() + categoryDropdown.value.slice(1);
});

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

addBmButtonForm.addEventListener("click", () => {
  if(!nameInput.value || !urlInput.value){
    return alert("Provide a bookmark name and url.");
  };
  let newBookmark = {
    name: nameInput.value,
    category: categoryDropdown.value,
    url: urlInput.value
  };
  let currentBms = getBookmarks();

  currentBms.push(newBookmark);
  
  let newLocalStorageBookmark = JSON.stringify(currentBms);

  localStorage.setItem("bookmarks", newLocalStorageBookmark);
  displayOrCloseForm();
  nameInput.value = "";
  urlInput.value = "";
});


//This part:
viewCategoryButton.addEventListener("click", () => {
  let parsedLS = JSON.parse(localStorage.bookmarks);
  let filteredPLSArr = parsedLS.filter((bm) => {
    return bm.category === categoryDropdown.value;
})
  let bmCount = parsedLS.filter((bm) => {
    return bm.category === categoryDropdown.value;
}).length;
  
  categoryTitle2.innerText = categoryDropdown.value[0].toUpperCase() + categoryDropdown.value.slice(1);
  displayOrHideCategory();
  if(bmCount < 1){
    categoryList.innerHTML = `<p>No Bookmarks Found</p>`;
  } else{
    filteredPLSArr.forEach((bm) => {
      categoryList.innerHTML += `
      <label for=${bm.name}>
        <input type="radio" name=${bm.category} id=${bm.name} value=${bm.name}></input>
        <a href="${bm.url}">${bm.name}</a>
      </label>
      `;
    })
  }
});
//Part Above

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


<!-- file: index.html -->


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:145.0) Gecko/20100101 Firefox/145.0

Challenge Information:

Build a Bookmark Manager App - Build a Bookmark Manager App

2

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

3

Filtering the original function fixed everything

1 Like