Build a Bookmark Manager App - Build a Bookmark Manager App

JavaScript
1

Tell us what’s happening:

Hola! Necesito una ayudita por favor! Los test 19 y 20 no los puedo superar. Entiendo que hay un problema con los label. Aparentemente funciona pero no logro entender donde esta el error. gracias!!

Your code so far

//main section
const mainSection = document.getElementById("main-section");
const categoryDropdown = document.getElementById("category-dropdown");
const viewCatagoryBtn = document.getElementById("view-category-button");
const addBookmarkBtn = document.getElementById("add-bookmark-button");

//form section
const formSection = document.getElementById("form-section");
const categoryName = document.querySelector(".category-name");
const inputName = document.getElementById("name");
const url = document.getElementById("url");
const closeFormBTN = document.getElementById("close-form-button");
const addBMarkFormBTN = document.getElementById("add-bookmark-button-form");

//bookmarkList section
const listSection = document.getElementById("bookmark-list-section");
const categoryList = document.getElementById("category-list");
const closeListBTN = document.getElementById("close-list-button");
const deleteBTN = document.getElementById("delete-bookmark-button");
const viewListCategory = document.querySelector("#bookmark-list-section h2");

let bookmarks = [
  { name: "example1", category: "news", url: "example1.com" },
  { name: "example2", category: "entertainment", url: "example2.com" },
  { name: "example3", category: "work", url: "example3.com" },
  { name: "example4", category: "news", url: "example4.com" },
];

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

/*funciones*/

const getBookmarks = () => {
  try {
    let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
    if (
      Array.isArray(bookmarks) &&
      bookmarks.every(
        (el) =>
          el.hasOwnProperty("name") &&
          el.hasOwnProperty("category") &&
          el.hasOwnProperty("url")
      )
    ) {
      return bookmarks;
    } else {
      console.log("bookmarks is not a valid array");
      return [];
    }
  } catch {
    console.log("han fallado todas las pruebas");
    return [];
  }
};

//func. mostrar u ocultar form
const displayOrCloseForm = () => {
  mainSection.classList.toggle("hidden");
  formSection.classList.toggle("hidden");
};

//func. mostrar u ocultar
const displayOrHideCategory = () => {
  mainSection.classList.toggle("hidden");
  listSection.classList.toggle("hidden");
};

/*events*/
/*agrego bookmark en main section*/
addBookmarkBtn.addEventListener("click", () => {
  categoryName.textContent = categoryDropdown.value;
  displayOrCloseForm();
});

/*retroceder del form section al main section*/
closeFormBTN.addEventListener("click", () => {
  displayOrCloseForm();
});

/*retrocede de section list a main section*/
closeListBTN.addEventListener("click", () => {
  categoryList.innerHTML = "";
  displayOrHideCategory();
});

/*agregar un bookmark*/
addBMarkFormBTN.addEventListener("click", () => {
  let name = document.getElementById("name").value;
  const category = categoryDropdown.value;
  let url = document.getElementById("url").value;
  let bookmarks = getBookmarks();
  bookmarks.push({ name, category, url });
  localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
  document.getElementById("name").value = "";
  document.getElementById("url").value = "";
  displayOrCloseForm();
});


/*mostrar/ocultar category*/
viewCatagoryBtn.addEventListener("click", () => {
  viewListCategory.textContent = categoryDropdown.value;
  displayOrHideCategory();

  // let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
  let bookmarks = getBookmarks();

  const filteredBookmarks = bookmarks.filter(
    (el) => el.category === categoryDropdown.value
  );
  console.log(filteredBookmarks);

  if (filteredBookmarks.length === 0) {
    categoryList.innerHTML = "<p>No Bookmarks Found</p>";
  }

  filteredBookmarks.forEach((el) => {
    categoryList.innerHTML += `<input type="radio" id="${el.name}" value="${el.name}" name="${el.category}">
      <label for="${el.name}">
        <a href="${el.url}">${el.name}</a>
      </label>`;
  });
});
/* file: script.js */


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

Challenge Information:

Build a Bookmark Manager App - Build a Bookmark Manager App

2

it doesn’t. I am testing your app, I can’t add bookmarks to it. Try it yourself

3

I tried it and it works, in fact I only need to pass the tests 19-20-23. It’s very strange. Thanks anyway, I’ll try to restart it tomorrow morning and I will ask again more specifically. Good night!!!

4

What have you done to troubleshoot so far?

Testing it manually is not enough. You need to add console.log() statements so you can see what the tests are doing and how your app is responding.

I found the tests on this one to be quite challenging, you really need to examine everything.

5

Good morning!
I start all the exercises in Visual Studio (which makes it easier for me to test the application). I’ve been deleting all the logs to make code look cleaner. I’ll start over and I upload the code again.
By the way, pkdvalis, does the code work in your machine???

6

I was able to add a bookmark, but unable to delete a bookmark in the fCC editor, however:

7

Okay… I haven’t done the delete function yet.
I’ve changed the code a bit, but the label text isn’t working. I’m going to try using createElement and append to insert an input and the label separately. Let’s see if it works.

Anyway, I’m frustrated that I don’t know why the label isn’t working. aixx.

Thank Youuuuuu

8

What does the HTML look like when it’s live?

What does the HTML look like when the test runs?

You need to gather information and prove it. You can’t see these things so you need to open the inspector or console.log() some more evidence.

You also do not know what the tests are doing yet. Maybe the test is deleting a bookmark and does not expect it to be there.