diff --git a/curriculum/challenges/english/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md b/curriculum/challenges/english/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md index 0a728d52515..f77b8ba0815 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md +++ b/curriculum/challenges/english/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md @@ -29,6 +29,44 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 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 = ""; +} +``` + # --hints-- You should have a `getBookmarks` function. @@ -106,6 +144,8 @@ assert.notEqual(hidden, hiddenAfterCall); 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`. ```js +const addBookMarkButtonTest = document.getElementById("add-bookmark-button"); +const categoryDropdownTest = document.getElementById("category-dropdown"); addBookMarkButtonTest.dispatchEvent(new Event("click")); const categoryName = document.querySelector(".category-name").innerText; assert.strictEqual(categoryName.toLowerCase(), categoryDropdownTest.value.toLowerCase()); @@ -114,6 +154,7 @@ assert.strictEqual(categoryName.toLowerCase(), categoryDropdownTest.value.toLowe When you click `#add-bookmark-button`, you should call `displayOrCloseForm` to display the form section and hide the main section. ```js +const addBookMarkButtonTest = document.getElementById("add-bookmark-button"); assert.strictEqual(getHidden("form"), "form"); addBookMarkButtonTest.dispatchEvent(new Event("click")); assert.strictEqual(getHidden("form"), "main"); @@ -122,6 +163,7 @@ assert.strictEqual(getHidden("form"), "main"); When you click `#close-form-button`, you should call `displayOrCloseForm` to hide the form section and display the main section. ```js +const closeFormButtonTest = document.getElementById("close-form-button"); assert.strictEqual(getHidden("form"), "main"); closeFormButtonTest.dispatchEvent(new Event("click")); assert.strictEqual(getHidden("form"), "form"); @@ -131,6 +173,10 @@ When you click `#add-bookmark-button-form`, you should update the `bookmarks` ke ```js setLocalStorage(); +const addBookmarkButtonFormTest = document.getElementById("add-bookmark-button-form"); +const categoryDropdownTest = document.getElementById("category-dropdown"); +const bookmarkNameTest = document.getElementById("name"); +const bookmarkURLTest = document.getElementById("url"); try { bookmarkNameTest.value = "test example5"; bookmarkURLTest.value = "test example5.com"; @@ -152,6 +198,9 @@ try { When you click `#add-bookmark-button-form`, you should reset the value of `#name` and `#url` to an empty string. ```js +const addBookmarkButtonFormTest = document.getElementById("add-bookmark-button-form"); +const bookmarkNameTest = document.getElementById("name"); +const bookmarkURLTest = document.getElementById("url"); try { bookmarkNameTest.value = "test example2"; bookmarkURLTest.value = "test example2.com"; @@ -168,6 +217,10 @@ try { When you click `#add-bookmark-button-form`, you should run `displayOrCloseForm` to hide the form section and show the main section. ```js +const addBookmarkButtonFormTest = document.getElementById("add-bookmark-button-form"); +const addBookMarkButtonTest = document.getElementById("add-bookmark-button"); +const bookmarkNameTest = document.getElementById("name"); +const bookmarkURLTest = document.getElementById("url"); try { bookmarkNameTest.value = "test example3"; bookmarkURLTest.value = "test example3.com"; @@ -199,6 +252,8 @@ assert.notEqual(hidden, hiddenAfterCall) 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`. ```js +const viewCategoryButtonTest = document.getElementById("view-category-button"); +const categoryDropdownTest = document.getElementById("category-dropdown"); viewCategoryButtonTest.dispatchEvent(new Event("click")); const categoryName = document.querySelector(".category-name").innerText; assert.strictEqual(categoryName.toLowerCase(), categoryDropdownTest.value.toLowerCase()); @@ -208,6 +263,8 @@ When you click `#view-category-button`, you should add a `p` element with the te ```js try { + const viewCategoryButtonTest = document.getElementById("view-category-button"); + const categoryDropdownTest = document.getElementById("category-dropdown"); setLocalStorage() categoryDropdownTest.value = "miscellaneous"; viewCategoryButtonTest.dispatchEvent(new Event("click")); @@ -223,6 +280,8 @@ When you click the `#view-category-button`, you should modify the `#category-lis ```js try { + const viewCategoryButtonTest = document.getElementById("view-category-button"); + const categoryDropdownTest = document.getElementById("category-dropdown"); setLocalStorage(); categoryDropdownTest.value = "news"; viewCategoryButtonTest.dispatchEvent(new Event("click")); @@ -243,6 +302,8 @@ Each radio button added to `#category-list`'s inner HTML should have a correspon ```js setLocalStorage(); +const viewCategoryButtonTest = document.getElementById("view-category-button"); +const categoryDropdownTest = document.getElementById("category-dropdown"); try { categoryDropdownTest.value = "news"; viewCategoryButtonTest.dispatchEvent(new Event("click")); @@ -259,6 +320,8 @@ Each `label` element should contain an anchor element with the bookmark name as ```js setLocalStorage(); +const viewCategoryButtonTest = document.getElementById("view-category-button"); +const categoryDropdownTest = document.getElementById("category-dropdown"); try { categoryDropdownTest.value = "news"; viewCategoryButtonTest.dispatchEvent(new Event("click")); @@ -276,6 +339,8 @@ try { When you click `#close-list-button`, you should hide `#bookmark-list-section` and display the main section. ```js +const viewCategoryButtonTest = document.getElementById("view-category-button"); +const closeListButtonTest = document.getElementById("close-list-button"); viewCategoryButtonTest.dispatchEvent(new Event("click")); assert.strictEqual(getHidden("bookmark list"), "main"); closeListButtonTest.dispatchEvent(new Event("click")); @@ -286,6 +351,9 @@ When you click the `#close-list-button` and then open any category, the `#catego ```js setLocalStorage(); +const viewCategoryButtonTest = document.getElementById("view-category-button"); +const closeListButtonTest = document.getElementById("close-list-button"); +const categoryDropdownTest = document.getElementById("category-dropdown"); try { categoryDropdownTest.value = "miscellaneous"; viewCategoryButtonTest.dispatchEvent(new Event("click")); @@ -328,6 +396,9 @@ When you click the `#delete-bookmark-button`, you should delete the bookmark cor ```js setLocalStorage(); +const viewCategoryButtonTest = document.getElementById("view-category-button"); +const deleteBookmarkButtonTest = document.getElementById("delete-bookmark-button"); +const categoryDropdownTest = document.getElementById("category-dropdown"); try { categoryDropdownTest.value = "news"; viewCategoryButtonTest.dispatchEvent(new Event("click")); @@ -361,53 +432,6 @@ try { # --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