Tell us what’s happening:
I’m building a complete bookmark manager app. At the 2 points, which are
addBookmarkBtnForm.addEventListener( … ) and
viewCategoryBtn.addEventListener( … )
there are some issues leading to not adding bookmark form and viewing category.
I don’t find any problems in these code.
Please give a piece of advice for correcting my code.
I appreciate your help!
Your code so far:
const nameInput = document.getElementById("name");
const urlInput = document.getElementById("url");
const categoryDropdown = document.getElementById("category-dropdown");
const addBookmarkBtnForm = document.getElementById("add-bookmark-button-form");
const deleteBookmarkBtn = document.getElementById("delete-bookmark-button");
const categoryList = document.getElementById("category-list");
const mainSection = document.getElementById("main-section");
const formSection = document.getElementById("form-section");
const addBookmarkBtn = document.getElementById("add-bookmark-button");
const closeFormBtn = document.getElementById("close-form-button");
const categoryNames = document.querySelectorAll(".category-name");
const bookmarkListSection = document.getElementById("bookmark-list-section");
const viewCategoryBtn = document.getElementById("view-category-button");
const closeListbtn = document.getElementById("close-list-button");
//1.Data layer (local storage)
//step1: creat getBookMarks()
function getBookMarks() {
return JSON.parse(localStorage.getItem("bookmarks")) || [];
}
//step2: bookmark structure
//2. UI toggle function
//step3: create displayOrCloseForm()
function displayOrCloseForm() {
mainSection.classList.toggle("hidden");
formSection.classList.toggle("hidden");
}
//step4: create displayOrHideCategory()
function displayOrHideCategory() {
mainSection.classList.toggle("hidden");
bookmarkListSection.classList.toggle("hidden");
}
//create reset()
function reset() {
nameInput.value = "";
urlInput.value = "";
}
//3. Add bookmark flow
//step5: handle #add-bookmark-button click
addBookmarkBtn.addEventListener("click", () => {
categoryNames.forEach(name => {
name.textContent = categoryDropdown.options[categoryDropdown.selectedIndex].text;
});
displayOrCloseForm();
});
//step6: #close-form-button click
closeFormBtn.addEventListener("click", displayOrCloseForm);
//step7: handle #add-bookmark-button-form click
addBookmarkBtnForm.addEventListener("click", () => {
const newBookmarkObj = {name: nameInput.value, category: categoryDropdown.value, url: urlInput.value};
const updatedArr = getBookMarks();
updatedArr.unshift(newBookmarkObj);
localStorage.setItem("bookmarks", JSON.stringify(updatedArr));
reset();
displayOrCloseForm();
});
//step8: handle #view-category-button
viewCategoryBtn.addEventListener("click", () => {
categoryList.innerHTML = "";
const selected = categoryDropdown.value;
const filtered = getBookMarks().filter(b => b.category === selected);
categoryNames.forEach(name => {
name.textContent = categoryDropdown.options[categoryDropdown.selectedIndex].text;
});
//step9: display results in #category-list
if (!filtered.length) {
categoryList.innerHTML = `<p>No Bookmarks Found</p>`;
} else {
filtered.forEach((bookmark) => {
categoryList.innerHTML += `<input type="radio" name="bookmark" id="${bookmark.name}" value="${bookmark.name}">
<label for="${bookmark.name}">
<a href="${bookmark.url}">${bookmark.name}</a>
</label>`;
});
}
//step10: show category list
displayOrHideCategory();
})
//5.close category list
//step11: handle #close-list-button click
closeListbtn.addEventListener("click", displayOrHideCategory);
//6. Delete bookmark
//step12: handle #delete-bookmark-button click
deleteBookmarkBtn.addEventListener("click", () => {
const radioBtns = categoryList.querySelectorAll('input[type="radio"]');
const selectedRadio = radioBtns.find((radio) => radio.selected === "true");
const selectedBookmarkIndex = getBookMarks().findIndex((bookmark) => bookmark.name === selectedRadio.id);
getBookMarks().splice(selectedBookmarkIndex, 1);
localStorage.setItem("bookmarks", JSON.stringify(getBookMarks()));
});
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="new.js"></script>
</body>
</html>