hi, totally blind, using jaws 2026, windows 11 pro, google chrome. now doing the bookmarks manager app, and now got some errors, have done multiple resets, hard refreshes, took me a few hours to then type up in vs code. and so will paste the html, css and java script and my errors. so is fcc editor having a fit or got corrupted. is it the tests, or is it my code. please help me out, frustrated, and have also tried to research, and did look at some other examples to get a handle on why i was getting errors, did look at some code looks almost the same or very similar. so, can any one help me out, and stuck, and also trying my best to learn. i know i am the only blind person on the forum. so doing my best. if any one is willing to help me out and guide me how to get this to work. what i am doing wrong.
thank you.
marvin.
ps: pasting below.
html:
,
<html lang="en">
<head>
Bookmark Manager
</head>
<body>
Bookmark Manager
Select a category:
News
Entertainment
Work
Miscellaneous
View Category
Add Bookmark
Name:
URL:
Go Back
Add Bookmark
Go Back
Delete Bookmark
</body>
</html>
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;
}
javascript:
function getBookmarks() {
const bookmarks = localStorage.getItem('bookmarks');
try {
return bookmarks ? JSON.parse(bookmarks) : \[\];
} catch(error) {
return \[\];
}
}
function displayOrCloseForm() {
document.getElementById('main-section').classList.toggle('hidden');
document.getElementById('form-section').classList.toggle('hidden');
}
function displayOrHideCategory() {
document.getElementById('main-section').classList.toggle('hidden');
document.getElementById('bookmark-list-section').classList.toggle('hidden');
}
document.getElementById('add-bookmark-button').addEventListener('click', () => {
const category = document.getElementById('category-dropdown').value;
document.querySelector('.category-name').innerText = category;
displayOrCloseForm();
});
document.getElementById('close-form-button').addEventListener('click', () => {
displayOrCloseForm();
});
document.getElementById('add-bookmark-button-form').addEventListener('click', () => {
const name = document.getElementById('name').value.trim();
const url = document.getElementById('url').value.trim();
const category = document.getElementById('category-dropdown').value;
if (name && url) {
const bookmarks = getBookmarks();
bookmarks.push({name, category, url});
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
document.getElementById('name').value = '';
document.getElementById('url').value = '';
displayOrCloseForm();
} else {
alert('Please enter both name and url.');
}
});
document.getElementById('view-category-button').addEventListener('click', () => {
const selectedCategory = document.getElementById('category-dropdown').value;
const bookmarks = getBookmarks();
const filtered = bookmarks.filter(b => b.category === selectedCategory);
document.querySelector('.category-name').innerText = selectedCategory;
const listContainer = document.getElementById('category-list');
listContainer.innerHTML = '';
if (filtered.length === 0) {
listContainer.innerHTML = '<p>No Bookmarks Found</p>';
} else {
filtered.forEach((bookmark, index) => {
const id = \`bookmark-${index}\`;
const radio = \`<input type="radio" id="${id}" name="category-bookmark" value="${bookmark.name}">\`;
const label = \`<label for="${id}"><a href="${bookmark.url}" target="\_blank">${bookmark.name}</a></label>\`;
listContainer.innerHTML += \`${radio} ${label}<br>\`;
});
}
displayOrHideCategory();
});
document.getElementById('close-list-button').addEventListener('click', () => {
displayOrHideCategory();
});
document.getElementById('delete-bookmark-button').addEventListener('click', () => {
const selectedRadio = document.querySelector('input\[name="category-bookmark"\]:checked');
if (!selectedRadio) {
alert('Please select a bookmark to delete.');
return;
}
const nameToDelete = selectedRadio.value;
const category = document.querySelector('.category-name').innerText;
let bookmarks = getBookmarks();
bookmarks = bookmarks.filter(b => !(b.name === nameToDelete && b.category === category));
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
const listContainer = document.getElementById('category-list');
const filtered = bookmarks.filter(b => b.category === category);
listContainer.innerHTML = '';
if (filtered.length === 0) {
listContainer.innerHTML = '<p>No Bookmarks Found</p>';
} else {
filtered.forEach((bookmark, index) => {
const id = \`bookmark-${index}\`;
const radio = \`<input type="radio" id="${id}" name="category-bookmark" value="${bookmark.name}">\`;
const label = \`<label for="${id}"> <a href="${bookmark.url}" target="\_blank">${bookmark.name}</a></label>\`;
listContainer.innerHTML += \`${radio} ${label}<br>\`;
});
}
});
errors:
-
Passed:1. You should have a
getBookmarksfunction. -
Passed:2. Your
getBookmarksfunction should return an array. -
Passed:3. Your
getBookmarksfunction should return thebookmarkskey fromlocalStorage. -
Passed:4. When the
bookmarkskey is not set inlocalStorageor is an empty array, thegetBookmarksfunction should return an empty array. -
Failed:5. When the
bookmarkskey in thelocalStoragedoes not contain a valid array of bookmark objects, thegetBookmarksfunction should return an empty array. -
Passed:6. You should have a function named
displayOrCloseForm. -
Passed:7. Your
displayOrCloseFormfunction should toggle thehiddenclass on#main-sectionand#form-section. -
Passed:8. When you click
#add-bookmark-button, you should update the inner text of.category-nameto be the value of the selected option from#category-dropdown. -
Passed:9. When you click
#add-bookmark-button, you should calldisplayOrCloseFormto display the form section and hide the main section. -
Passed:10. When you click
#close-form-button, you should calldisplayOrCloseFormto hide the form section and display the main section. -
Passed:11. When you click
#add-bookmark-button-form, you should update thebookmarkskey stored in the local storage by adding an object to the end of the array. The added 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. -
Passed:12. When you click
#add-bookmark-button-form, you should reset the value of#nameand#urlto an empty string. -
Passed:13. When you click
#add-bookmark-button-form, you should rundisplayOrCloseFormto hide the form section and show the main section. -
Passed:14. You should have a function named
displayOrHideCategory. -
Passed:15. Your
displayOrHideCategoryfunction should toggle thehiddenclass on#main-sectionand#bookmark-list-section. -
Passed:16. When you click
#view-category-button, you should update the inner text of.category-nameto be the value of the selected option from#category-dropdown. -
Passed:17. When you click
#view-category-button, you should add apelement with the textNo Bookmarks Foundto#category-list’s inner HTML if none of the bookmarks in local storage have the selected category. -
Failed:18. When you click the
#view-category-button, you should modify the#category-listelement’s inner HTML by adding a radio button. The radio button should have theidandvalueattributes set to the bookmark name for each bookmark in the selected category. Additionally, each radio button should have the samenameattribute. -
Failed:19. Each radio button added to
#category-list’s inner HTML should have a corresponding label containing an anchor element with the bookmark name and thehrefattribute set to the bookmark URL. -
Passed:20. Each
labelelement should contain an anchor element with the bookmark name as text, and thehrefattribute set to the bookmark URL. -
Passed:21. When you click
#close-list-button, you should hide#bookmark-list-sectionand display the main section. -
Failed:22. When you click the
#close-list-buttonand then open any category, the#category-listshould contain only data relevant for the selected category, without duplicating entries. -
Failed:23. 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.