I am trying to pass step 5 in this lab. I have tried various methods but cant seem to get it right. Please help me!
/* file: script.js */
<!-- file: index.html -->
/* file: styles.css */
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36 Edg/148.0.0.0
Build a Bookmark Manager App - Build a Bookmark Manager App
Hi @leodjekane2,
Please update the message to include your code. The code was too long to be automatically inserted by the help button.
When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
const formSection = document.getElementById("form-section")
const mainSection = document.getElementById("main-section")
const addBookMarkBtn = document.getElementById("add-bookmark-button")
const categoryDrop = document.getElementById("category-dropdown")
const closeForm = document.getElementById("close-form-button")
const addBookMarkButton = document.getElementById("add-bookmark-button-form")
const nae = document.getElementById("name")
const ul = document.getElementById("url")
const viewCategoryBtn = document.getElementById("view-category-button")
const bookMarkSection = document.getElementById("bookmark-list-section")
const categoryList = document.getElementById("category-list")
const closeButton = document.getElementById("close-list-button")
const deleteBookmark = document.getElementById("delete-bookmark-button")
function getBookmarks(){
let bookmarks = localStorage.getItem("bookmarks")
if (!bookmarks){
return \[\]
}
const parsed = JSON.parse(bookmarks)
if (!Array.isArray(parsed) || !parsed.every(b => typeof b === "object" && b !== null && b.name && b.url && b.category)){
return \[\]
}
return parsed
}
function displayOrCloseForm(){
formSection.classList.toggle("hidden")
mainSection.classList.toggle("hidden")
}
addBookMarkBtn.addEventListener("click", () =>{
document.querySelector(".category-name").innerText = categoryDrop.value
displayOrCloseForm()
})
closeForm.addEventListener("click", () =>{
displayOrCloseForm()
})
addBookMarkButton.addEventListener("click", (e) =>{
let bookMarkObj = {
name: nae.value,
category: categoryDrop.value,
url: ul.value
}
let bookMarkArr = getBookmarks()
bookMarkArr.push(bookMarkObj)
localStorage.setItem("bookmarks", JSON.stringify(bookMarkArr))
nae.value = ""
ul.value = ""
displayOrCloseForm()
})
function displayOrHideCategory(){
mainSection.classList.toggle("hidden")
bookMarkSection.classList.toggle("hidden")
}
viewCategoryBtn.addEventListener("click", () =>{
document.querySelector(".category-name").innerText = categoryDrop.value
categoryList.innerHTML = ""
let arr = getBookmarks()
arr.forEach(obj =>{
if (obj.category === categoryDrop.value){
const newDiv = document.createElement("div")
newDiv.innerHTML = \`[${obj.name}](${obj.url})\`
categoryList.appendChild(newDiv)
}
})
if (categoryList.innerHTML === ""){
categoryList.innerHTML = \`No Bookmarks Found\`
}
displayOrHideCategory()
})
closeButton.addEventListener("click", () =>{
displayOrHideCategory()
})
deleteBookmark.addEventListener("click", e =>{
let radio = document.querySelector('input\[name="k"\]:checked')
let id = radio.id
let categorys = categoryDrop.value
let arr = getBookmarks()
let filterdArr = arr.filter(obj => !(obj.name === id && categorys === obj.category))
localStorage.setItem("bookmarks", JSON.stringify(filterdArr))
radio.parentElement.remove()
if (categoryList.innerHTML === ""){
categoryList.innerHTML = \`No Bookmarks Found\`
}
})
edited by moderator for readability
See all the extra \ characters in your code? That’s what happens when your code is not formatted as asked, even when we try to go in and do that for you.
Please review User Story #6:
When you click
#add-bookmark-button-form, you should update thebookmarkskey stored in the local storage by adding a bookmark object to the end of the array. The object should havenameset to the value of the#nameinput,categoryset to the value of the selected option from the category dropdown, andurlset to the value of the#urlinput.
Is your code doing that?
If getBookmarks returns an empty array, would categoryList contain an empty string?
Please review User Story #10:
If none of the bookmarks in local storage have the category, you should set the inner HTML of the
#category-listto apelement with the textNo Bookmarks Found.
Are you implementing that correctly?
That should get you started…