Build a Bookmark Manager App - Build a Bookmark Manager App

JavaScript
1

Cuéntanos qué está pasando:

Hello! This is my code. Functionally complies with all the tests, but the freeCodeCamp evaluation system does not approve tests 5 and 23.
5. When the bookmarks key in the localStorage does not contain a valid array of bookmark objects, the getBookmarks function should return an empty array. 23. When you click the #delete-bookmark-button, you should delete the bookmark corresponding to the selected radio button and appropriate category from the local storage and update the displayed bookmark list.
I tried to make several changes that work perfectly, but none served.

Tu código hasta el momento

const mainSection = document.getElementById("main-section");
const formSection = document.getElementById("form-section");
const addBookmarkBtn = document.getElementById("add-bookmark-button");
const closeFormBtn = document.getElementById("close-form-button");
const categoryDropdown = document.getElementById("category-dropdown");
const categoryName = document.querySelectorAll(".category-name");
const addBookmarkBtnForm = document.getElementById("add-bookmark-button-form");
const nameForm = document.getElementById("name");
const urlForm = document.getElementById("url");
const bookmarkListSection = document.getElementById("bookmark-list-section");
const viewCategoryBtn = document.getElementById("view-category-button");
const categoryList = document.getElementById("category-list");
const closeListBtn = document.getElementById("close-list-button");
const deleteBookmarkBtn = document.getElementById("delete-bookmark-button");

let bookmarks;

const getBookmarks = ()=> {
  bookmarks = JSON.parse(localStorage.getItem("bookmarks")) || []; return bookmarks;
}

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

const updateText = () => {
  categoryName.forEach((h2) => {
    h2.innerText = categoryDropdown.value;
  });
  displayOrCloseForm();
}

const updateBookmark = () => {
  const arr = getBookmarks();
  arr.push({
    name: nameForm.value.trim(),
    category: categoryDropdown.value,
    url: urlForm.value.trim()
  });
  localStorage.setItem("bookmarks", JSON.stringify(arr));
  nameForm.value = "";
  urlForm.value = "";
  displayOrCloseForm();
}

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

const updateCategoryList = () => {
  categoryName.forEach((h2) => {
    h2.innerText = categoryDropdown.value;
  });
  let html;
  const arr = getBookmarks();
  const hasCategory = arr.findIndex(bookmark => bookmark.category === categoryDropdown.value);
  if(hasCategory === -1){
    html = "<p>No Bookmarks Found</p>";
  } else {
    arr.forEach(bookmark => {
      if(bookmark.category === categoryDropdown.value){
        html += `<label for="${bookmark.name}"><input type="radio" id="${bookmark.name}" value="${bookmark.name}" name="bookmark"><a href="${bookmark.url}">${bookmark.name}</a></label>\n`;
      }
    })
  }
  categoryList.innerHTML = html;
}

let radio;
 
const deleteBookmark = () => {
  let arr = getBookmarks();
  let index = arr.findIndex(bookmark => bookmark.name === radio);
  arr.splice(index, 1);
  localStorage.setItem("bookmarks", JSON.stringify(arr));
  updateCategoryList();
}

addBookmarkBtn.addEventListener("click", updateText);
closeFormBtn.addEventListener("click", displayOrCloseForm);
addBookmarkBtnForm.addEventListener("click", updateBookmark);
viewCategoryBtn.addEventListener("click", ()=>{
  updateCategoryList();
  displayOrHideCategory(); 
  });
closeListBtn.addEventListener("click", displayOrHideCategory);
deleteBookmarkBtn.addEventListener("click", deleteBookmark);
categoryList.addEventListener("change", (e) => {
  if (e.target && e.target.matches('input[type="radio"]')) {
    radio = e.target.value;
  }
});


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.0">
    <title>Bookmark Manager</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <main>
        <section id="main-section">
            <h1>Bookmark Manager</h1>
            <div id="dropdown">
                <label for="category-dropdown">Select a category:</label>
                <select id="category-dropdown" name="options">
                    <option value="news" selected>News</option>
                    <option value="entertainment">Entertainment</option>
                    <option value="work">Work</option>
                    <option value="miscellaneous">Miscellaneous</option>
                </select>
            </div>
            <div id="buttons">
                <button type="button" id="view-category-button">View Category</button>
                <button type="button" id="add-bookmark-button">Add Bookmark</button>
            </div>
        </section>

        <section id="form-section" class="hidden">
            <form>
                <h2 class="category-name"></h2>
                <div>
                    <label for="name">Name:</label>
                    <input type="text" id="name">
                </div>
                <div>
                    <label for="url">URL:</label>
                    <input type="text" id="url">
                </div>
                <div>
                    <button type="button" id="close-form-button">Go Back</button>
                    <button type="button" id="add-bookmark-button-form">Add Bookmark</button>
                </div>
            </form>
        </section>

        <section id="bookmark-list-section" class="hidden">
            <h2 class="category-name"></h2>
            <div id="category-list">
            </div>
            <div>
                <button type="button" id="close-list-button">Go Back</button>
                <button type="button" id="delete-bookmark-button">Delete Bookmark</button>
            </div>
        </section>

    </main>
    <script src="script.js"></script>
</body>

</html>


:root {
  --light-grey: #f5f6f7;
  --dark-grey: #0a0a23;
  --yellow: #f1be32;
  --golden-yellow: #feac32;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  display: flex;
  justify-content: center;
}

body {
  background-color: var(--dark-grey);
}

.hidden {
  display: none;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

select,
input,
label {
  margin-left: 10px;
}

div {
  padding: 30px;
  display: flex;
  justify-content: center;
}

.close-form-button {
  background: none;
  border: none;
  cursor: pointer;
}

h1, h2 {
  margin-top: 20px;
  text-align: center;
}

#category-list {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: var(--light-grey);
  align-self: center;
  width: 80%;
  margin-top: 15px;
  border-radius: 10px;
}

#category-list,
h1,
h2,
label {
  color: var(--light-grey);
}

#category-list p {
  color: var(--dark-grey);
}

button {
  cursor: pointer;
  padding: 5px;
  width: 100px;
  margin: 10px;
  color: var(--dark-grey);
  background-color: var(--golden-yellow);
  background-image: linear-gradient(#fecc4c, #ffac33);
  border-color: var(--golden-yellow);
  border-width: 3px;
}

button:hover {
  background-image: linear-gradient(#ffcc4c, #f89808);
}

section {
  margin-top: 60px;
  border: 2px solid var(--golden-yellow);
  width: fit-content;
  border-radius: 10px;
}

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Información del Desafío:

Build a Bookmark Manager App - Build a Bookmark Manager App

2

you will need to consider cases in which you get something that is not an array or something that has not all the properties

can you deal with bookmakrs with same name in different categories?

1 Like
3

Hi! Thanks for your reply. I tried this:

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

I also tried this:

function getBookmarks() {
  try {
    const bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
    return Array.isArray(bookmarks) ? bookmarks : [];
  } catch (e) {
    return [];
  }
}

I’ll keep trying. Thank you!!

4

Try not to just guess.

Use console.log() to see what input the tests are sending to your function and see how your function reacts. Look for errors in the console.

5

that doesn’t seem able to check if each bookmark object has all the properties needed