gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(curriculum): remove after-user-code bookmark lab (#60406)

Browse Source 
Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com>
This commit is contained in:
Anna
2025-05-28 17:11:17 -04:00
committed by GitHub
parent 2be04b8510
commit 3a762257b5
1 changed files with 71 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md
+71 -47
View File
@@ -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