Build a Bookmark Manager App

For this lab, all the HTML and CSS has been provided to you. You will use JavaScript to complete the Bookmark Manager app so that it can store a collection of bookmarks in the local storage and read data from it. **Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. **User Stories:** 1. You should have a `getBookmarks` function that returns the `bookmarks` array stored in the local storage. If the `bookmarks` key has not been set yet, or it doesn't contain a valid array with bookmarks, the `getBookmarks` function should return an empty array. 1. The `bookmarks` key stored in the local storage should be an array of bookmark objects. Each bookmark object should have three keys: `name`, `category`, and `url`. 1. You should have a function named `displayOrCloseForm` that toggles the `hidden` class on `#main-section` and `#form-section`. 1. When you click `#add-bookmark-button`, you should update the inner text of `.category-name` to be the value of the selected option from `#category-dropdown` and call `displayOrCloseForm` to display the form section and hide the main section. 1. When you click `#close-form-button`, you should run your function to hide the form section and display the main section. 1. When you click `#add-bookmark-button-form`, you should update the `bookmarks` key stored in the local storage by adding a bookmark object to the end of the array. The object should have `name` set to the value of the `#name` input, `category` set to the value of the selected option from the category dropdown, and `url` set to the value of the `#url` input. 1. Once the `bookmarks` key is updated, you should reset the value of `#name` and `#url` to an empty string before running your function to hide the form section and show the main section. 1. You should have a function named `displayOrHideCategory` that toggles the `hidden` class on `#main-section` and `#bookmark-list-section`. 1. When you click `#view-category-button`, you should update the inner text of `.category-name` to be the value of the selected option from `#category-dropdown`, modify the inner HTML of `#category-list` according to the user stories below, and call the `displayOrHideCategory` function. 1. If none of the bookmarks in local storage have the category, you should set the inner HTML of the `#category-list` to a `p` element with the text `No Bookmarks Found`. 1. If one or more bookmarks in local storage have the selected category, add a radio button for each bookmark to the innerHTML of the `#category-list`. Give each radio button an `id` and `value` set to the bookmark name, and a `name` that's the same for all the buttons. 1. Each radio button should have a corresponding label containing an anchor element with the bookmark name and the `href` attribute set to the bookmark URL. 1. When you click the `#close-list-button`, you should run your function to hide the `#bookmark-list-section` and display the main section. 1. 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. # --before-all-- ```js const getHidden = (notMain) => { const mainSection = document.querySelector("#main-section"); const formSection = document.querySelector("#form-section"); const bookmarkListSection = document.querySelector("#bookmark-list-section"); 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 = ""; } ```