Build a Bookmark Manager App - Build a Bookmark Manager App

JavaScript
1

Tell us what’s happening:

Hello Everyone,

My solution does not seem to pass at tests 5 and 23

Your code so far

/* file: script.js */
const mainSection = document.getElementById("main-section");
const formSection = document.getElementById("form-section");
const bookmarkListSection = document.getElementById("bookmark-list-section");

const addBookmarkBtn = document.getElementById("add-bookmark-button");
const addBookmarkBtnForm = document.getElementById("add-bookmark-button-form");
const closeFormBtn = document.getElementById("close-form-button");
const viewCategoryButton = document.getElementById("view-category-button");
const closeListButton = document.getElementById("close-list-button");
const deleteListButton = document.getElementById("delete-bookmark-button");

const categoryName = document.querySelector(".category-name");
const categoryList = document.getElementById("category-list");

const nameInput = document.getElementById("name");
const categoryNameInput = document.getElementById("category-dropdown");
const urlInput = document.getElementById("url");

const getBookmarks = () => {
  const bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
  if (bookmarks === null || !Array.isArray(bookmarks) || bookmarks.some(bookmark => typeof bookmark !== "object" || !bookmark || Array.isArray(bookmark))) {
    return [];
  }
  return bookmarks;
};

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

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

addBookmarkBtn.addEventListener("click", () => {
  categoryName.innerText = categoryNameInput.value;
  displayOrCloseForm();
});

closeFormBtn.addEventListener("click", displayOrCloseForm);

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

deleteListButton.addEventListener("click", () => {
  const bookmarks = getBookmarks();
  const categoryListBookmarks = Array.from(document.querySelectorAll(`#category-list > input[name="${categoryNameInput.value}"]`));
  for (let i = 0; i < categoryListBookmarks.length; i++) {
    if (categoryListBookmarks[i].checked) {
      bookmarks.splice(bookmarks.findIndex(bookmark => bookmark["name"] === categoryListBookmarks[i].id), 1);
    }
  }
  localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
  updateCategoryView(bookmarks);
});

addBookmarkBtnForm.addEventListener("click", () => {
  const bookmarks = getBookmarks();
  if (nameInput.value === "" || urlInput.value === "") {
    return;
  }
  const bookmarkObj = {
    "name": nameInput.value,
    "category": categoryNameInput.value,
    "url": urlInput.value
  }
  bookmarks.push(bookmarkObj);
  localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
  nameInput.value = "";
  urlInput.value = "";
  displayOrCloseForm();
});

viewCategoryButton.addEventListener("click", () => {
  categoryName.innerText = categoryNameInput.value;
  displayOrHideCategory();
  const bookmarks = getBookmarks();
  updateCategoryView(bookmarks);
});

const updateCategoryView = (bookmarks) => {
  categoryList.innerHTML = "";
  const matchingBookmarks = [];
  for (const bookmark of bookmarks) {
    if (bookmark["category"] === categoryNameInput.value) {
      matchingBookmarks.push(bookmark);
    }
  }
  if (matchingBookmarks.length === 0) {
    categoryList.innerHTML = "<p>No Bookmarks Found</p>";
  } else {
    for (const bookmark of matchingBookmarks) {
      categoryList.innerHTML += `<input type="radio" id="${bookmark["name"]}" value="${bookmark["name"]}" name="${bookmark["category"]}" />
      <label for="${bookmark["name"]}"><a href="${bookmark["url"]}">${bookmark["name"]}</a></label>`;
    }
  }
};

<!-- file: index.html -->
<!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>

/* file: styles.css */
: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;
}

Your browser information:

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

Challenge Information:

Build a Bookmark Manager App - Build a Bookmark Manager App

https://www.freecodecamp.org/learn/full-stack-developer/lab-bookmark-manager-app/build-a-bookmark-manager-app

2

Regarding the last test. Try adding bookmark with the same name to multiple categories. Then delete it from one of the further categories.

3

for test 5, you need to check what values your function is finding in the local storage, and deal with them. The test is testing with various cases of invalid values, and your function does not yet deal with all of them.

You should add the logging before parsing even, then have the browser console open when you run the tests and see what values appear