Build a Bookmark Manager App - Build a Bookmark Manager App

JavaScript
1

Tell us what’s happening:

I’ve been going around with this for a while and I cannot get my app to pass the final test:

  1. 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.

It appears to fulfil these requirements but perhaps I’m missing something?

Your code so far

const mainSection = document.getElementById('main-section');
const bookmarkListSection = document.getElementById('bookmark-list-section');
const formSection = document.getElementById('form-section');
const categoryDropdown = document.getElementById('category-dropdown');

const addBookmarkButton = document.getElementById('add-bookmark-button');
const closeFormButton = document.getElementById('close-form-button');
const closeListButton = document.getElementById('close-list-button');
const addBookmarkButtonForm = document.getElementById('add-bookmark-button-form');
const viewCategoryButton = document.getElementById('view-category-button');
const deleteBookmarkButton = document.getElementById('delete-bookmark-button');

const getBookmarks = () => {
  try {
    let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
    if (Array.isArray(bookmarks) && bookmarks.every(b=>b.hasOwnProperty('name') && b.hasOwnProperty('url') && b.hasOwnProperty('url'))) {
      return bookmarks;
    } else { return []; }
  } catch {
    return [];
  }
}

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

addBookmarkButton.addEventListener("click", () => {
  document.querySelector('#form-section .category-name').innerText = categoryDropdown.value;
  displayOrCloseForm();
});

closeFormButton.addEventListener("click", displayOrCloseForm);

addBookmarkButtonForm.addEventListener("click", () => {
  const name = document.getElementById('name').value;
  const category = categoryDropdown.value;
  const 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();
});

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

const displayBookmarks = (bookmarks) => {
  let htmlString = '';
  bookmarks.forEach(bookmark => {
    const {name, category, url} = bookmark;
    if (category == categoryDropdown.value) {
      htmlString += `
      <input type="radio" id="${name}" value="${name}" name="${category}">
      <label for="${name}">
        <a href="${url}">${name}</a>
      </label>`
    }
  });

  document.getElementById('category-list').innerHTML = htmlString != '' ? htmlString : `<p>No Bookmarks Found</p>`;
};

viewCategoryButton.addEventListener("click", ()=> {
  document.querySelector('#bookmark-list-section .category-name').innerText = categoryDropdown.value;
  displayOrHideCategory();
  displayBookmarks(getBookmarks());
});

closeListButton.addEventListener("click", displayOrHideCategory);

deleteBookmarkButton.addEventListener("click",()=>{
  const checkedRadioButtonId = document.querySelector('#category-list input:checked');
  if (checkedRadioButtonId) {
  let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
  bookmarks = bookmarks.filter(bookmark=>bookmark.name != checkedRadioButtonId.id);
  localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
  displayBookmarks(getBookmarks());
  }
});



<!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;
}

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

Always the way that you spot what you’ve done wrong immediately after you ask for help… I was only filtering by name and not by category too.