Build a Bookmark Manager App - Build a Bookmark Manager App

I Built This
1

Tell us what’s happening:

I am confused with this one

So the only step I was missing was Step 5 and after some digging through the forum, I found this code that helped me solve it, but I don’t understand what’s wrong with my code?
Am I forced to use the try…catch method or why didn’t it work?

The getBookmarks function is at the beginning, I made comments what my code was and what the code was that worked

Your code so far

/* file: script.js */
const mainSection = document.getElementById("main-section");
const formSection = document.getElementById("form-section");
const addBookmarkBtn = document.getElementById("add-bookmark-button");
const addBookmarkBtnForm = document.getElementById("add-bookmark-button-form");
const closeFormBtn = document.getElementById("close-form-button");
const categoryList = document.getElementById("category-list");
const categoryName = document.querySelector(".category-name");
const categoryDropdown = document.getElementById("category-dropdown");
const bookmarkName = document.getElementById("name");
const bookmarkURL = document.getElementById("url");
const bookmarkListSection = document.getElementById("bookmark-list-section");
const viewCategoryBtn = document.getElementById("view-category-button");
const closeListBtn = document.getElementById("close-list-button");
const deleteBookmarkBtn = document.getElementById("delete-bookmark-button");

// US: 1
function getBookmarks(){
  // The Code that I got from the other User
  try{
    const bookmarks = localStorage.getItem("bookmarks");
    const valid = bookmarks ? JSON.parse(bookmarks) : [];

    if (valid.every(entry => entry.name && entry.category && entry.url)){
      return valid;
    } else{
      return [];
    }
  }
  catch (error){
    return [];
  }

  /* The Code that I used
  const bookmarks = JSON.parse(localStorage.getItem("bookmarks"));

  if (!bookmarks){
    return [];
  }

  for (const marks of bookmarks){
    if (
      !Object.hasOwn(marks, "name") ||
      !Object.hasOwn(marks, "category") ||
      !Object.hasOwn(marks, "url")
      ){
      return [];
    }
  }

  return bookmarks;
  */
}

// US: 3
function displayOrCloseForm(){
  mainSection.classList.toggle("hidden");
  formSection.classList.toggle("hidden");
}

// US: 4
addBookmarkBtn.addEventListener("click", () => {
  categoryName.textContent = document.querySelector(`[value=${categoryDropdown.value}]`).textContent;
  displayOrCloseForm();
});

// US: 5
closeFormBtn.addEventListener("click", displayOrCloseForm);

// US: 6
addBookmarkBtnForm.addEventListener("click", () => {
  const bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
  const userBookmark = {
    name: bookmarkName.value,
    category: categoryDropdown.value,
    url: bookmarkURL.value
  }
  bookmarks.push(userBookmark);
  localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
  bookmarkName.value = "";
  bookmarkURL.value = "";
  displayOrCloseForm();
});

// US: 8
function displayOrHideCategory(){
  mainSection.classList.toggle("hidden");
  bookmarkListSection.classList.toggle("hidden");
}

// US: 9/10/11/12
viewCategoryBtn.addEventListener("click", () => {
  categoryList.innerHTML = "";
  const bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
  categoryName.innerText = categoryDropdown.value;
  
  for (const marks of bookmarks){
    if (marks.category === categoryDropdown.value){
      categoryList.innerHTML += `
      <div>
        <input id="${marks.name}" type="radio" name="bookmarks" value="${marks.name}">
        <label for="${marks.name}">
          <a href="${marks.url}">
            ${marks.name}
          </a>
        </label>
      </div>`;
    }
  }
  
  if (!categoryList.innerHTML){
    categoryList.innerHTML = "<p>No Bookmarks Found</p>";
  }
  
  displayOrHideCategory();
});

// US: 13
closeListBtn.addEventListener("click", () => {
  bookmarkListSection.classList.toggle("hidden");
  mainSection.classList.toggle("hidden");
});

// US: 14
deleteBookmarkBtn.addEventListener("click", () => {
  const bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
  const selected = document.querySelector("input[type=radio]:checked");

  for (let i = 0; i < bookmarks.length; i++){
    if (
      bookmarks[i].name === selected.value &&
      bookmarks[i].category === categoryDropdown.value
      ){
      bookmarks.splice(i, 1);
      break;
    }
  }

  selected.parentNode.remove();
  localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
});



// Update an array inside localStorage

// 1. Stringify an array as a value
/* localStorage.setItem("bookmarks", JSON.stringify([{
  name: "#name input value",
  category: "category dropdown selected option",
  url: "#url input value"
}])); */

// 2. Call the array and parse it inside a variable
// const testing = JSON.parse(localStorage.getItem("bookmarks"));

// 3. Push the value inside the array
// testing.push("yes");

// 4. Stringify the variable and update the corresponding key from Step 1
// localStorage.setItem("bookmarks", JSON.stringify(testing));

// DONE

<!-- 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:151.0) Gecko/20100101 Firefox/151.0

Challenge Information:

Build a Bookmark Manager App - Build a Bookmark Manager App

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hi @Ninge3007,

Since you are asking for feedback on a working solution, I’ve changed the category for this topic and blurred this solution (with [spoiler][/spoiler] tags) so that users who have not completed this challenge can read the discussion in this thread without giving away the solution.

Happy coding

1 Like
3

you need to account for this raising an error for when bookmarks is invalid JSON

if you have an other way that is not try…catch feel free to use it

4

ooh ok ok, I never had an error in that case so I didn’t assume, that I had to account for errors, cheers

5

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.