Build a Bookmark Manager App - Build a Bookmark Manager App

JavaScript
1

Tell us what’s happening:

My code works and the app responds; however, tests are failing. Test 19 & 20 are failing for me. What part of the instructions(regarding these 2 tests) am I making a mistake on?

Note: Test 18 has passed, so the input element is designed correctly.

The console output

  1. Each radio button added to #category-list’s inner HTML should have a corresponding label containing an anchor element with the bookmark name and the href attribute set to the bookmark URL.

  2. Each label element should contain an anchor element with the bookmark name as text, and the href attribute set to the bookmark URL.

Your code so far

/*
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>
        `
 */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0

Challenge Information:

Build a Bookmark Manager App - Build a Bookmark Manager App

2

@chofer Can you share the entire script.js file?

4

I dont know how to share the file but here is my code

const mainSection = document.getElementById("main-section");
const formSection = document.getElementById("form-section");
const bookmarkList = document.getElementById("bookmark-list-section");
const categoryName = document.querySelector(".category-name");
const selectedOption = document.getElementById("category-dropdown");
const addBookmarkBtn = document.getElementById("add-bookmark-button");
const categoryList = document.getElementById("category-list");
const addBookmarkFormBtn = document.getElementById("add-bookmark-button-form");
const viewCategoryBtn = document.getElementById("view-category-button");
const closeListBtn = document.getElementById("close-list-button");
const closeFormBtn = document.getElementById("close-form-button");
const deleteBookmarkBtn = document.getElementById("");
const nameElem = document.getElementById("name");
const urlElem = document.getElementById("url");

function displayBookmarks() {
  let bookmarks = getBookmarks();

  if (bookmarks.some(bookmark => bookmark.category === selectedOption.value)){
    bookmarks.forEach((bookmark)=>{
      if (bookmark.category === selectedOption.value){
        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>
        `
      }
    })
  }
  else{categoryList.innerHTML = `<p>No Bookmarks Found</p>`}
}

function addBookmark(){
  let bookmarks = getBookmarks();
  let bookmark = {
    name:nameElem.value,
    category:categoryName.textContent,
    url:urlElem.value
  }
  bookmarks.push(bookmark)
  localStorage.setItem('bookmarks',JSON.stringify(bookmarks))
}

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

viewCategoryBtn.addEventListener("click",()=>{
  displayOrHideCategory()
  displayBookmarks()
})

addBookmarkFormBtn.addEventListener("click",()=>{
  addBookmark()
  nameElem.value = "";
  urlElem.value = "";
  displayOrCloseForm()
})

closeFormBtn.addEventListener("click",()=>{
  displayOrCloseForm()
})

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

function getBookmarks(){
  try{
    let array = JSON.parse(localStorage.getItem("bookmarks"));
    let validArr;
  array.forEach((bookmark)=>{
    let hasName = Object.hasOwn(bookmark,"name");
    let hasCat = Object.hasOwn(bookmark,"category");
    let hasURL = Object.hasOwn(bookmark,"url");
    if (hasName && hasCat && hasURL){
      validArr = true;
    }
    else{validArr = false}
  }) 
  return validArr ? array : []
  }catch(error){return []}
}

function displayOrCloseForm(){
  mainSection.classList.toggle("hidden")
  formSection.classList.toggle("hidden")
}
function displayOrHideCategory(){
  mainSection.classList.toggle("hidden")
  bookmarkList.classList.toggle("hidden")
}
5

@chofer I ran your code and it seems like you didn’t clear previous entries for categoryList.innerHTML before adding new ones . Try to reset it before the if condition.

1 Like
6

Thank you, this worked!

1 Like