Tell us what’s happening:
Failing 21 (I haven’t implemented the code for 23 yet). Not sure what else to try with the closeListButton event listener- I’ve tried conditionally toggling the “hidden” classes based on whether the objects have them already but that doesn’t work. Is the issue in the event listener or elsewhere?
Your code so far
/* file: script.js */
let mainSection = document.getElementById("main-section");
let formSection = document.getElementById("form-section");
let addBookmarkButton = document.getElementById("add-bookmark-button");
let categoryName = document.querySelector(".category-name");
let categoryDropdown = document.getElementById("category-dropdown");
let closeFormButton = document.getElementById("close-form-button");
let addBookmarkButtonForm = document.getElementById("add-bookmark-button-form");
let nameElement = document.getElementById("name");
let urlElement = document.getElementById("url");
let viewCategoryButton = document.getElementById("view-category-button");
let categoryList = document.getElementById("category-list");
let closeListButton = document.getElementById("close-list-button");
let bookmarkListSection = document.getElementById("bookmark-list-section");
let deleteBookmarkButton = document.getElementById("delete-bookmark-button");
addBookmarkButton.addEventListener("click", () => {
categoryName.innerText = `${categoryDropdown.value}`;
displayOrCloseForm();
})
closeFormButton.addEventListener("click", () => {
displayOrCloseForm();
})
addBookmarkButtonForm.addEventListener("click", () => {
let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
bookmarks.push({
name: nameElement.value,
category: categoryDropdown.value,
url: urlElement.value,
});
localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
nameElement.value = "";
urlElement.value = "";
displayOrCloseForm();
})
viewCategoryButton.addEventListener("click", () => {
let bookmarks = getBookmarks();
let oneHas = false;
if (bookmarks != []) {
bookmarks.forEach((bookmark) => {;
let hasProperty = Object.hasOwn(bookmark, categoryDropdown.value);
if (hasProperty) {
oneHas = true;
};
});
};
if (!oneHas) {
categoryList.innerHTML = "<p>No Bookmarks Found</p>";
};
bookmarks.forEach((bookmark) => {
if (bookmark.category === categoryDropdown.value) {
categoryList.innerHTML += `<input type="radio" id="${bookmark.name}" value="${bookmark.name}" name="radio-button"></input>
<label for="${bookmark.name}"><a href="${bookmark.url}">${bookmark.name}</label>`;
};
})
})
closeListButton.addEventListener("click", () => {
mainSection.classList.remove("hidden");
bookmarkListSection.classList.add("hidden");
})
function getBookmarks() {
try {
let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
let allValid;
bookmarks.forEach((bookmark) => {
let hasName = Object.hasOwn(bookmark, "name");
let hasCategory = Object.hasOwn(bookmark, "category");
let hasURL = Object.hasOwn(bookmark, "url");
if (hasName && hasCategory && hasURL) {
allValid = true;
} else {
allValid = false;
};
});
return allValid ? bookmarks : [];
} catch(error) {
return [];
};
}
function displayOrCloseForm() {
if (mainSection.classList.contains("hidden")) {
mainSection.classList.remove("hidden");
} else {
mainSection.classList.add("hidden");
};
if (formSection.classList.contains("hidden")) {
formSection.classList.remove("hidden");
} else {
formSection.classList.add("hidden");
}
}
function displayOrHideCategory() {
if (mainSection.classList.contains("hidden")) {
mainSection.classList.remove("hidden");
} else {
mainSection.classList.add("hidden");
};
}
<!-- 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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36
Challenge Information:
Build a Bookmark Manager App - Build a Bookmark Manager App
