Bookmark Manager
+
+
+
+
+
+
+
+
+
+
+
+ No Bookmarks Found
") +} finally { + resetLocalStorage() + clearCategoryList() +} +``` + +When you click `#view-category-button`, you should modify `#category-list`'s inner HTML by adding a radio button having the `id` and `value` attributes set to the bookmark name for each bookmark in the selected category. + +```js +try { + setLocalStorage(); + categoryDropdownTest.value = "news"; + viewCategoryButtonTest.dispatchEvent(new Event("click")); + const bookmarksDisplayed = document.querySelectorAll('#category-list input[type="radio"]'); + assert.lengthOf(bookmarksDisplayed, 2); + assert.strictEqual(bookmarksDisplayed[0].id, "example1"); + assert.strictEqual(bookmarksDisplayed[0].value, "example1"); + assert.strictEqual(bookmarksDisplayed[1].id, "example4"); + assert.strictEqual(bookmarksDisplayed[1].value, "example4"); +} finally { + resetLocalStorage(); +} +``` + +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. + +```js +setLocalStorage(); +try { + categoryDropdownTest.value = "news"; + viewCategoryButtonTest.dispatchEvent(new Event("click")); + const bookmarkLabelsDisplayed = document.querySelectorAll('#category-list label'); + assert.lengthOf(bookmarkLabelsDisplayed, 2); + assert.strictEqual(bookmarkLabelsDisplayed[0].htmlFor, "example1"); + assert.strictEqual(bookmarkLabelsDisplayed[1].htmlFor, "example4"); +} finally { + resetLocalStorage(); +} +``` + +Each `label` element should contain an anchor element with the bookmark name as text, and the `href` attribute set to the bookmark URL. + +```js +setLocalStorage(); +try { + categoryDropdownTest.value = "news"; + viewCategoryButtonTest.dispatchEvent(new Event("click")); + const bookmarkAnchorsDisplayed = document.querySelectorAll('#category-list label>a'); + assert.lengthOf(bookmarkAnchorsDisplayed, 2); + assert.strictEqual(bookmarkAnchorsDisplayed[0].innerText, "example1"); + assert(bookmarkAnchorsDisplayed[0].href.endsWith("example1.com")); + assert.strictEqual(bookmarkAnchorsDisplayed[1].innerText, "example4"); + assert(bookmarkAnchorsDisplayed[1].href.endsWith("example4.com")); +} finally { + resetLocalStorage(); +} +``` + +When you click `#close-list-button`, you should hide `#bookmark-list-section` and display the main section. + +```js +viewCategoryButtonTest.dispatchEvent(new Event("click")); +assert.strictEqual(getHidden("bookmark list"), "main"); +closeListButtonTest.dispatchEvent(new Event("click")); +assert.strictEqual(getHidden("bookmark list"), "bookmark list"); +``` + +When you click `#delete-bookmark-button`, you should delete the bookmark corresponding to the selected radio button from the local storage and update the displayed bookmark list. + +```js +setLocalStorage(); +try { + categoryDropdownTest.value = "news"; + viewCategoryButtonTest.dispatchEvent(new Event("click")); + const firstRadioButton = document.querySelector('#category-list input[type="radio"]'); + firstRadioButton.checked = true; + deleteBookmarkButtonTest.dispatchEvent(new Event("click")); + let bookmarksDisplayed = document.querySelectorAll('#category-list input[type="radio"]'); + let bookmarkLabelsDisplayed = document.querySelectorAll('#category-list label'); + assert.lengthOf(bookmarksDisplayed, 1); + assert.strictEqual(bookmarksDisplayed[0].id, "example4"); + assert.strictEqual(bookmarksDisplayed[0].value, "example4"); + assert.lengthOf(bookmarkLabelsDisplayed, 1); + assert.strictEqual(bookmarkLabelsDisplayed[0].htmlFor, "example4"); + const expected = [{name: "example2", category: "entertainment", url: "example2.com"}, {name: "example3", category: "work", url: "example3.com"}, {name: "example4", category: "news", url: "example4.com"}]; + assert.deepEqual(getBookmarks(), expected); + +} finally { + resetLocalStorage(); +} +``` + +# --seed-- + +## --after-user-code-- + +```js +const viewCategoryButtonTest = document.getElementById("view-category-button"); +const closeListButtonTest = document.getElementById("close-list-button"); +const closeFormButtonTest = document.getElementById("close-form-button"); +const addBookMarkButtonTest = document.getElementById("add-bookmark-button"); +const addBookmarkButtonFormTest = document.getElementById("add-bookmark-button-form"); +const deleteBookmarkButtonTest = document.getElementById("delete-bookmark-button"); +const bookmarkNameTest = document.getElementById("name"); +const categoryDropdownTest = document.getElementById("category-dropdown"); +const bookmarkURLTest = document.getElementById("url"); +const mainSection = document.querySelector("#main-section"); +const formSection = document.querySelector("#form-section"); +const bookmarkListSection = document.querySelector("#bookmark-list-section"); +const getHidden = (notMain) => { + if (notMain === "form") { + if (mainSection.classList.contains("hidden") && !formSection.classList.contains("hidden")) { + return "main" + } else if (!mainSection.classList.contains("hidden") && formSection.classList.contains("hidden")) { + return notMain; + } + } else if (notMain === "bookmark list") { + if (mainSection.classList.contains("hidden") && !bookmarkListSection.classList.contains("hidden")) { + return "main" + } else if (!mainSection.classList.contains("hidden") && bookmarkListSection.classList.contains("hidden")) { + return notMain; + } + } +} + +const originalLocalStorage = JSON.parse(localStorage.getItem("bookmarks")) || []; +const temp = originalLocalStorage; +function resetLocalStorage() { + localStorage.setItem("bookmarks", JSON.stringify(temp)); +} + +function setLocalStorage() { + localStorage.setItem("bookmarks", JSON.stringify([{name: "example1", category: "news", url: "example1.com"}, {name: "example2", category: "entertainment", url: "example2.com"}, {name: "example3", category: "work", url: "example3.com"}, {name: "example4", category: "news", url: "example4.com"}])); +} + +function clearCategoryList() { + const categoryList = document.getElementById("category-list"); + categoryList.innerHTML = ""; +} +``` + +## --seed-contents-- + +```js + +``` + +```html + + + + + + +No Bookmarks Found
'; + } +} + +viewCategoryButton.addEventListener("click", () => { + fillBookmarkList(); + displayOrHideCategory(); +}) + +closeListButton.addEventListener("click", displayOrHideCategory) + +const deleteBookmark = () => { + const radioBookmarks = document.querySelectorAll('input[type="radio"]'); + for (const radioBookmark of radioBookmarks) { + if (radioBookmark.checked) { + const bookmarks = getBookmarks(); + const indexToRemove = bookmarks.findIndex(i => i.name == radioBookmark.value); + bookmarks.splice(indexToRemove, 1); + localStorage.setItem("bookmarks", JSON.stringify(bookmarks)); + return + } + } +} + +deleteBookmarkButton.addEventListener("click", () => { + deleteBookmark(); + fillBookmarkList(); +}) +``` + +```html + + + + + + +