From e588ca5e1f60b1175a4c516830588f52d2efcc40 Mon Sep 17 00:00:00 2001 From: c0d1ng_ma5ter Date: Fri, 30 May 2025 15:06:51 -0600 Subject: [PATCH] fix(curriculum): remove `localStorage.clear()` from To-Do App (#60488) Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> --- .../meta.json | 22 +- .../_meta/workshop-todo-app/meta.json | 22 +- .../64ff23daf176a92de95f24dc.md | 413 ------------------ .../64ff24b80431f62ec6b93f65.md | 12 +- .../65003986d17d1e1865b269c0.md | 4 +- .../650046832f92c01a35834bca.md | 4 +- .../650048b0764f9c1b798200e2.md | 4 +- .../65004ba581d03d1d5628b41c.md | 4 +- .../6632420f81f3cc554a5e540b.md | 4 +- .../66ad0f178ed5791ed898fe56.md | 4 +- .../671682cd6d7aa95f0078f35f.md | 4 +- .../67168a7243b6396cb69c1bdf.md | 4 +- .../64ff068e0426eb288874ed79.md | 2 +- .../64ff23daf176a92de95f24dc.md | 413 ------------------ .../64ff24b80431f62ec6b93f65.md | 12 +- .../65003986d17d1e1865b269c0.md | 4 +- .../650046832f92c01a35834bca.md | 4 +- .../650048b0764f9c1b798200e2.md | 4 +- .../65004ba581d03d1d5628b41c.md | 4 +- .../6632420f81f3cc554a5e540b.md | 4 +- .../66ad0f178ed5791ed898fe56.md | 4 +- .../671682cd6d7aa95f0078f35f.md | 4 +- .../67168a7243b6396cb69c1bdf.md | 4 +- 23 files changed, 57 insertions(+), 903 deletions(-) delete mode 100644 curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff23daf176a92de95f24dc.md delete mode 100644 curriculum/challenges/english/25-front-end-development/workshop-todo-app/64ff23daf176a92de95f24dc.md diff --git a/curriculum/challenges/_meta/learn-localstorage-by-building-a-todo-app/meta.json b/curriculum/challenges/_meta/learn-localstorage-by-building-a-todo-app/meta.json index f43fa5947aa..08385c057fa 100644 --- a/curriculum/challenges/_meta/learn-localstorage-by-building-a-todo-app/meta.json +++ b/curriculum/challenges/_meta/learn-localstorage-by-building-a-todo-app/meta.json @@ -236,44 +236,40 @@ "title": "Step 57" }, { - "id": "64ff23daf176a92de95f24dc", + "id": "64ff24b80431f62ec6b93f65", "title": "Step 58" }, { - "id": "64ff24b80431f62ec6b93f65", + "id": "65003986d17d1e1865b269c0", "title": "Step 59" }, { - "id": "65003986d17d1e1865b269c0", + "id": "650046832f92c01a35834bca", "title": "Step 60" }, { - "id": "650046832f92c01a35834bca", + "id": "650048b0764f9c1b798200e2", "title": "Step 61" }, { - "id": "650048b0764f9c1b798200e2", + "id": "65004ba581d03d1d5628b41c", "title": "Step 62" }, { - "id": "65004ba581d03d1d5628b41c", + "id": "6632420f81f3cc554a5e540b", "title": "Step 63" }, { - "id": "6632420f81f3cc554a5e540b", + "id": "66ad0f178ed5791ed898fe56", "title": "Step 64" }, { - "id": "66ad0f178ed5791ed898fe56", + "id": "671682cd6d7aa95f0078f35f", "title": "Step 65" }, - { - "id": "671682cd6d7aa95f0078f35f", - "title": "Step 66" - }, { "id": "67168a7243b6396cb69c1bdf", - "title": "Step 67" + "title": "Step 66" } ], "helpCategory": "JavaScript", diff --git a/curriculum/challenges/_meta/workshop-todo-app/meta.json b/curriculum/challenges/_meta/workshop-todo-app/meta.json index dc57afe5d16..0bdb530f033 100644 --- a/curriculum/challenges/_meta/workshop-todo-app/meta.json +++ b/curriculum/challenges/_meta/workshop-todo-app/meta.json @@ -237,44 +237,40 @@ "title": "Step 57" }, { - "id": "64ff23daf176a92de95f24dc", + "id": "64ff24b80431f62ec6b93f65", "title": "Step 58" }, { - "id": "64ff24b80431f62ec6b93f65", + "id": "65003986d17d1e1865b269c0", "title": "Step 59" }, { - "id": "65003986d17d1e1865b269c0", + "id": "650046832f92c01a35834bca", "title": "Step 60" }, { - "id": "650046832f92c01a35834bca", + "id": "650048b0764f9c1b798200e2", "title": "Step 61" }, { - "id": "650048b0764f9c1b798200e2", + "id": "65004ba581d03d1d5628b41c", "title": "Step 62" }, { - "id": "65004ba581d03d1d5628b41c", + "id": "6632420f81f3cc554a5e540b", "title": "Step 63" }, { - "id": "6632420f81f3cc554a5e540b", + "id": "66ad0f178ed5791ed898fe56", "title": "Step 64" }, { - "id": "66ad0f178ed5791ed898fe56", + "id": "671682cd6d7aa95f0078f35f", "title": "Step 65" }, - { - "id": "671682cd6d7aa95f0078f35f", - "title": "Step 66" - }, { "id": "67168a7243b6396cb69c1bdf", - "title": "Step 67" + "title": "Step 66" } ], "helpCategory": "JavaScript" diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff23daf176a92de95f24dc.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff23daf176a92de95f24dc.md deleted file mode 100644 index e0d9215924e..00000000000 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff23daf176a92de95f24dc.md +++ /dev/null @@ -1,413 +0,0 @@ ---- -id: 64ff23daf176a92de95f24dc -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Using `localStorage.clear()` won't just delete a single item from local storage but will remove all items. - -Remove `localStorage.removeItem()` and use `localStorage.clear()` instead. You don't need to pass in anything. You should also see `null` in the console. - -# --hints-- - -You should remove `localStorage.removeItem("data")`. - -```js -assert.notMatch(code, /localStorage\.removeItem\(\s*('|")data\1\s*\)\s*;?/) -``` - -You should remove everything from the browser `local storage` with `localStorage.clear()`. - -```js -assert.match(code, /localStorage\.clear\(\s*\)\s*;?/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - - Learn localStorage by Building a Todo App - - - - -
-

Todo App

-
- - - -
-

Discard unsaved changes?

-
- - -
-
- -
-
-
- - - - -``` - -```css -:root { - --white: #fff; - --light-grey: #f5f6f7; - --dark-grey: #0a0a23; - --yellow: #f1be32; - --golden-yellow: #feac32; -} - -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - background-color: var(--dark-grey); -} - -main { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -h1 { - color: var(--light-grey); - margin: 20px 0 40px 0; -} - -.todo-app { - background-color: var(--white); - width: 300px; - height: 350px; - border: 5px solid var(--yellow); - border-radius: 8px; - padding: 15px; - position: relative; - display: flex; - flex-direction: column; - gap: 10px; -} - -.btn { - cursor: pointer; - 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; -} - -.btn:hover { - background-image: linear-gradient(#ffcc4c, #f89808); -} - -.large-btn { - width: 80%; - font-size: 1.2rem; - align-self: center; - justify-self: center; -} - -.close-task-form-btn { - background: none; - border: none; - cursor: pointer; -} - -.close-icon { - width: 20px; - height: 20px; -} - -.task-form { - display: flex; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: var(--white); - border-radius: 5px; - padding: 15px; - width: 300px; - height: 350px; - flex-direction: column; - justify-content: space-between; - overflow: auto; -} - -.task-form-header { - display: flex; - justify-content: flex-end; -} - -.task-form-body { - display: flex; - flex-direction: column; - justify-content: space-around; -} - -.task-form-footer { - display: flex; - justify-content: center; -} - -.task-form-label, -#title-input, -#date-input, -#description-input { - display: block; -} - -.task-form-label { - margin-bottom: 5px; - font-size: 1.3rem; - font-weight: bold; -} - -#title-input, -#date-input, -#description-input { - width: 100%; - margin-bottom: 10px; - padding: 2px; -} - -#confirm-close-dialog { - padding: 10px; - margin: 10px auto; - border-radius: 15px; -} - -.confirm-close-dialog-btn-container { - display: flex; - justify-content: center; - margin-top: 10px; -} - -.discard-message-text { - font-weight: bold; - font-size: 1.5rem; -} - -#tasks-container { - height: 100%; - overflow-y: auto; -} - -.task { - margin: 5px 0; -} - -.hidden { - display: none; -} - -@media (min-width: 576px) { - .todo-app, - .task-form { - width: 400px; - height: 450px; - } - - .task-form-label { - font-size: 1.5rem; - } - - #title-input, - #date-input { - height: 2rem; - } - - #title-input, - #date-input, - #description-input { - padding: 5px; - margin-bottom: 20px; - } -} -``` - -```js -const taskForm = document.getElementById("task-form"); -const confirmCloseDialog = document.getElementById("confirm-close-dialog"); -const openTaskFormBtn = document.getElementById("open-task-form-btn"); -const closeTaskFormBtn = document.getElementById("close-task-form-btn"); -const addOrUpdateTaskBtn = document.getElementById("add-or-update-task-btn"); -const cancelBtn = document.getElementById("cancel-btn"); -const discardBtn = document.getElementById("discard-btn"); -const tasksContainer = document.getElementById("tasks-container"); -const titleInput = document.getElementById("title-input"); -const dateInput = document.getElementById("date-input"); -const descriptionInput = document.getElementById("description-input"); - -const taskData = []; -let currentTask = {}; - -const addOrUpdateTask = () => { - const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); - const taskObj = { - id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, - title: titleInput.value, - date: dateInput.value, - description: descriptionInput.value, - }; - - if (dataArrIndex === -1) { - taskData.unshift(taskObj); - } else { - taskData[dataArrIndex] = taskObj; - } - - updateTaskContainer() - reset() -}; - -const updateTaskContainer = () => { - tasksContainer.innerHTML = ""; - - taskData.forEach( - ({ id, title, date, description }) => { - tasksContainer.innerHTML += ` -
-

Title: ${title}

-

Date: ${date}

-

Description: ${description}

- - -
- ` - } - ); -}; - - -const deleteTask = (buttonEl) => { - const dataArrIndex = taskData.findIndex( - (item) => item.id === buttonEl.parentElement.id - ); - - buttonEl.parentElement.remove(); - taskData.splice(dataArrIndex, 1); -} - -const editTask = (buttonEl) => { - const dataArrIndex = taskData.findIndex( - (item) => item.id === buttonEl.parentElement.id - ); - - currentTask = taskData[dataArrIndex]; - - titleInput.value = currentTask.title; - dateInput.value = currentTask.date; - descriptionInput.value = currentTask.description; - - addOrUpdateTaskBtn.innerText = "Update Task"; - - taskForm.classList.toggle("hidden"); -} - -const reset = () => { - titleInput.value = ""; - dateInput.value = ""; - descriptionInput.value = ""; - taskForm.classList.toggle("hidden"); - currentTask = {}; -} - -openTaskFormBtn.addEventListener("click", () => - taskForm.classList.toggle("hidden") -); - -closeTaskFormBtn.addEventListener("click", () => { - const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value; - const formInputValuesUpdated = titleInput.value !== currentTask.title || dateInput.value !== currentTask.date || descriptionInput.value !== currentTask.description; - - if (formInputsContainValues && formInputValuesUpdated) { - confirmCloseDialog.showModal(); - } else { - reset(); - } -}); - -cancelBtn.addEventListener("click", () => confirmCloseDialog.close()); - -discardBtn.addEventListener("click", () => { - confirmCloseDialog.close(); - reset() -}); - -taskForm.addEventListener("submit", (e) => { - e.preventDefault(); - - addOrUpdateTask(); -}); - -const myTaskArr = [ - { task: "Walk the Dog", date: "22-04-2022" }, - { task: "Read some books", date: "02-11-2023" }, - { task: "Watch football", date: "10-08-2021" }, -]; - -localStorage.setItem("data", JSON.stringify(myTaskArr)); - ---fcc-editable-region-- -localStorage.removeItem("data"); - ---fcc-editable-region-- - -const getTaskArr = localStorage.getItem("data") -console.log(getTaskArr) - -const getTaskArrObj = JSON.parse(localStorage.getItem("data")); -console.log(getTaskArrObj); -``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff24b80431f62ec6b93f65.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff24b80431f62ec6b93f65.md index c62c3d4a363..32849319c5e 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff24b80431f62ec6b93f65.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff24b80431f62ec6b93f65.md @@ -1,8 +1,8 @@ --- id: 64ff24b80431f62ec6b93f65 -title: Step 59 +title: Step 58 challengeType: 0 -dashedName: step-59 +dashedName: step-58 --- # --description-- @@ -29,12 +29,6 @@ You should remove any reference to `localStorage.getItem` for the item `"data"`. assert.notMatch(code, /localStorage\.getItem\(\s*('|")data\1\s*\)/); ``` -You should remove any reference to `localStorage.clear()` from your code. - -```js -assert.notMatch(code, /localStorage\.clear\(\s*\)\s*;?/); -``` - You should remove any remaining references to `getTaskArrObj` anywhere in the code. ```js @@ -417,7 +411,7 @@ const myTaskArr = [ localStorage.setItem("data", JSON.stringify(myTaskArr)); -localStorage.clear(); +localStorage.removeItem("data"); const getTaskArr = localStorage.getItem("data") console.log(getTaskArr) diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65003986d17d1e1865b269c0.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65003986d17d1e1865b269c0.md index 7a57da22bc8..ab90657a91f 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65003986d17d1e1865b269c0.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65003986d17d1e1865b269c0.md @@ -1,8 +1,8 @@ --- id: 65003986d17d1e1865b269c0 -title: Step 60 +title: Step 59 challengeType: 0 -dashedName: step-60 +dashedName: step-59 --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/650046832f92c01a35834bca.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/650046832f92c01a35834bca.md index a6f1ae09e97..78f257954ec 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/650046832f92c01a35834bca.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/650046832f92c01a35834bca.md @@ -1,8 +1,8 @@ --- id: 650046832f92c01a35834bca -title: Step 61 +title: Step 60 challengeType: 0 -dashedName: step-61 +dashedName: step-60 --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/650048b0764f9c1b798200e2.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/650048b0764f9c1b798200e2.md index 628a3a8056e..70e93543e9d 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/650048b0764f9c1b798200e2.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/650048b0764f9c1b798200e2.md @@ -1,8 +1,8 @@ --- id: 650048b0764f9c1b798200e2 -title: Step 62 +title: Step 61 challengeType: 0 -dashedName: step-62 +dashedName: step-61 --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65004ba581d03d1d5628b41c.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65004ba581d03d1d5628b41c.md index 1670f9b7ce0..1efe5c0a385 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65004ba581d03d1d5628b41c.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65004ba581d03d1d5628b41c.md @@ -1,8 +1,8 @@ --- id: 65004ba581d03d1d5628b41c -title: Step 63 +title: Step 62 challengeType: 0 -dashedName: step-63 +dashedName: step-62 --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/6632420f81f3cc554a5e540b.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/6632420f81f3cc554a5e540b.md index 17a88eddaf4..1e6c4cd3b7c 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/6632420f81f3cc554a5e540b.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/6632420f81f3cc554a5e540b.md @@ -1,8 +1,8 @@ --- id: 6632420f81f3cc554a5e540b -title: Step 64 +title: Step 63 challengeType: 0 -dashedName: step-64 +dashedName: step-63 --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/66ad0f178ed5791ed898fe56.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/66ad0f178ed5791ed898fe56.md index 27c13ed6ed9..9ae23e3f4cc 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/66ad0f178ed5791ed898fe56.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/66ad0f178ed5791ed898fe56.md @@ -1,8 +1,8 @@ --- id: 66ad0f178ed5791ed898fe56 -title: Step 65 +title: Step 64 challengeType: 0 -dashedName: step-65 +dashedName: step-64 --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/671682cd6d7aa95f0078f35f.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/671682cd6d7aa95f0078f35f.md index 784e0ec2670..f572f3c975d 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/671682cd6d7aa95f0078f35f.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/671682cd6d7aa95f0078f35f.md @@ -1,8 +1,8 @@ --- id: 671682cd6d7aa95f0078f35f -title: Step 66 +title: Step 65 challengeType: 0 -dashedName: step-66 +dashedName: step-65 --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/67168a7243b6396cb69c1bdf.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/67168a7243b6396cb69c1bdf.md index 1e9ce996d2f..4b5e745bc40 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/67168a7243b6396cb69c1bdf.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/67168a7243b6396cb69c1bdf.md @@ -1,8 +1,8 @@ --- id: 67168a7243b6396cb69c1bdf -title: Step 67 +title: Step 66 challengeType: 0 -dashedName: step-67 +dashedName: step-66 --- # --description-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/64ff068e0426eb288874ed79.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/64ff068e0426eb288874ed79.md index 702554252a5..0b8d8839dce 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/64ff068e0426eb288874ed79.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/64ff068e0426eb288874ed79.md @@ -7,7 +7,7 @@ dashedName: step-57 # --description-- -You can use `localStorage.removeItem()` to remove a specific item and `localStorage.clear()` to clear all items in the local storage. +You can use `localStorage.removeItem()` to remove a specific item from the local storage. Remove the `data` item from local storage and open the console to observe the result. You should see `null`. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/64ff23daf176a92de95f24dc.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/64ff23daf176a92de95f24dc.md deleted file mode 100644 index e0d9215924e..00000000000 --- a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/64ff23daf176a92de95f24dc.md +++ /dev/null @@ -1,413 +0,0 @@ ---- -id: 64ff23daf176a92de95f24dc -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Using `localStorage.clear()` won't just delete a single item from local storage but will remove all items. - -Remove `localStorage.removeItem()` and use `localStorage.clear()` instead. You don't need to pass in anything. You should also see `null` in the console. - -# --hints-- - -You should remove `localStorage.removeItem("data")`. - -```js -assert.notMatch(code, /localStorage\.removeItem\(\s*('|")data\1\s*\)\s*;?/) -``` - -You should remove everything from the browser `local storage` with `localStorage.clear()`. - -```js -assert.match(code, /localStorage\.clear\(\s*\)\s*;?/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - - Learn localStorage by Building a Todo App - - - - -
-

Todo App

-
- - - -
-

Discard unsaved changes?

-
- - -
-
- -
-
-
- - - - -``` - -```css -:root { - --white: #fff; - --light-grey: #f5f6f7; - --dark-grey: #0a0a23; - --yellow: #f1be32; - --golden-yellow: #feac32; -} - -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - background-color: var(--dark-grey); -} - -main { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -h1 { - color: var(--light-grey); - margin: 20px 0 40px 0; -} - -.todo-app { - background-color: var(--white); - width: 300px; - height: 350px; - border: 5px solid var(--yellow); - border-radius: 8px; - padding: 15px; - position: relative; - display: flex; - flex-direction: column; - gap: 10px; -} - -.btn { - cursor: pointer; - 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; -} - -.btn:hover { - background-image: linear-gradient(#ffcc4c, #f89808); -} - -.large-btn { - width: 80%; - font-size: 1.2rem; - align-self: center; - justify-self: center; -} - -.close-task-form-btn { - background: none; - border: none; - cursor: pointer; -} - -.close-icon { - width: 20px; - height: 20px; -} - -.task-form { - display: flex; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: var(--white); - border-radius: 5px; - padding: 15px; - width: 300px; - height: 350px; - flex-direction: column; - justify-content: space-between; - overflow: auto; -} - -.task-form-header { - display: flex; - justify-content: flex-end; -} - -.task-form-body { - display: flex; - flex-direction: column; - justify-content: space-around; -} - -.task-form-footer { - display: flex; - justify-content: center; -} - -.task-form-label, -#title-input, -#date-input, -#description-input { - display: block; -} - -.task-form-label { - margin-bottom: 5px; - font-size: 1.3rem; - font-weight: bold; -} - -#title-input, -#date-input, -#description-input { - width: 100%; - margin-bottom: 10px; - padding: 2px; -} - -#confirm-close-dialog { - padding: 10px; - margin: 10px auto; - border-radius: 15px; -} - -.confirm-close-dialog-btn-container { - display: flex; - justify-content: center; - margin-top: 10px; -} - -.discard-message-text { - font-weight: bold; - font-size: 1.5rem; -} - -#tasks-container { - height: 100%; - overflow-y: auto; -} - -.task { - margin: 5px 0; -} - -.hidden { - display: none; -} - -@media (min-width: 576px) { - .todo-app, - .task-form { - width: 400px; - height: 450px; - } - - .task-form-label { - font-size: 1.5rem; - } - - #title-input, - #date-input { - height: 2rem; - } - - #title-input, - #date-input, - #description-input { - padding: 5px; - margin-bottom: 20px; - } -} -``` - -```js -const taskForm = document.getElementById("task-form"); -const confirmCloseDialog = document.getElementById("confirm-close-dialog"); -const openTaskFormBtn = document.getElementById("open-task-form-btn"); -const closeTaskFormBtn = document.getElementById("close-task-form-btn"); -const addOrUpdateTaskBtn = document.getElementById("add-or-update-task-btn"); -const cancelBtn = document.getElementById("cancel-btn"); -const discardBtn = document.getElementById("discard-btn"); -const tasksContainer = document.getElementById("tasks-container"); -const titleInput = document.getElementById("title-input"); -const dateInput = document.getElementById("date-input"); -const descriptionInput = document.getElementById("description-input"); - -const taskData = []; -let currentTask = {}; - -const addOrUpdateTask = () => { - const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); - const taskObj = { - id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, - title: titleInput.value, - date: dateInput.value, - description: descriptionInput.value, - }; - - if (dataArrIndex === -1) { - taskData.unshift(taskObj); - } else { - taskData[dataArrIndex] = taskObj; - } - - updateTaskContainer() - reset() -}; - -const updateTaskContainer = () => { - tasksContainer.innerHTML = ""; - - taskData.forEach( - ({ id, title, date, description }) => { - tasksContainer.innerHTML += ` -
-

Title: ${title}

-

Date: ${date}

-

Description: ${description}

- - -
- ` - } - ); -}; - - -const deleteTask = (buttonEl) => { - const dataArrIndex = taskData.findIndex( - (item) => item.id === buttonEl.parentElement.id - ); - - buttonEl.parentElement.remove(); - taskData.splice(dataArrIndex, 1); -} - -const editTask = (buttonEl) => { - const dataArrIndex = taskData.findIndex( - (item) => item.id === buttonEl.parentElement.id - ); - - currentTask = taskData[dataArrIndex]; - - titleInput.value = currentTask.title; - dateInput.value = currentTask.date; - descriptionInput.value = currentTask.description; - - addOrUpdateTaskBtn.innerText = "Update Task"; - - taskForm.classList.toggle("hidden"); -} - -const reset = () => { - titleInput.value = ""; - dateInput.value = ""; - descriptionInput.value = ""; - taskForm.classList.toggle("hidden"); - currentTask = {}; -} - -openTaskFormBtn.addEventListener("click", () => - taskForm.classList.toggle("hidden") -); - -closeTaskFormBtn.addEventListener("click", () => { - const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value; - const formInputValuesUpdated = titleInput.value !== currentTask.title || dateInput.value !== currentTask.date || descriptionInput.value !== currentTask.description; - - if (formInputsContainValues && formInputValuesUpdated) { - confirmCloseDialog.showModal(); - } else { - reset(); - } -}); - -cancelBtn.addEventListener("click", () => confirmCloseDialog.close()); - -discardBtn.addEventListener("click", () => { - confirmCloseDialog.close(); - reset() -}); - -taskForm.addEventListener("submit", (e) => { - e.preventDefault(); - - addOrUpdateTask(); -}); - -const myTaskArr = [ - { task: "Walk the Dog", date: "22-04-2022" }, - { task: "Read some books", date: "02-11-2023" }, - { task: "Watch football", date: "10-08-2021" }, -]; - -localStorage.setItem("data", JSON.stringify(myTaskArr)); - ---fcc-editable-region-- -localStorage.removeItem("data"); - ---fcc-editable-region-- - -const getTaskArr = localStorage.getItem("data") -console.log(getTaskArr) - -const getTaskArrObj = JSON.parse(localStorage.getItem("data")); -console.log(getTaskArrObj); -``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/64ff24b80431f62ec6b93f65.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/64ff24b80431f62ec6b93f65.md index c62c3d4a363..32849319c5e 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/64ff24b80431f62ec6b93f65.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/64ff24b80431f62ec6b93f65.md @@ -1,8 +1,8 @@ --- id: 64ff24b80431f62ec6b93f65 -title: Step 59 +title: Step 58 challengeType: 0 -dashedName: step-59 +dashedName: step-58 --- # --description-- @@ -29,12 +29,6 @@ You should remove any reference to `localStorage.getItem` for the item `"data"`. assert.notMatch(code, /localStorage\.getItem\(\s*('|")data\1\s*\)/); ``` -You should remove any reference to `localStorage.clear()` from your code. - -```js -assert.notMatch(code, /localStorage\.clear\(\s*\)\s*;?/); -``` - You should remove any remaining references to `getTaskArrObj` anywhere in the code. ```js @@ -417,7 +411,7 @@ const myTaskArr = [ localStorage.setItem("data", JSON.stringify(myTaskArr)); -localStorage.clear(); +localStorage.removeItem("data"); const getTaskArr = localStorage.getItem("data") console.log(getTaskArr) diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/65003986d17d1e1865b269c0.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/65003986d17d1e1865b269c0.md index 7a57da22bc8..ab90657a91f 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/65003986d17d1e1865b269c0.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/65003986d17d1e1865b269c0.md @@ -1,8 +1,8 @@ --- id: 65003986d17d1e1865b269c0 -title: Step 60 +title: Step 59 challengeType: 0 -dashedName: step-60 +dashedName: step-59 --- # --description-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/650046832f92c01a35834bca.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/650046832f92c01a35834bca.md index a6f1ae09e97..78f257954ec 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/650046832f92c01a35834bca.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/650046832f92c01a35834bca.md @@ -1,8 +1,8 @@ --- id: 650046832f92c01a35834bca -title: Step 61 +title: Step 60 challengeType: 0 -dashedName: step-61 +dashedName: step-60 --- # --description-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/650048b0764f9c1b798200e2.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/650048b0764f9c1b798200e2.md index 261a7be5965..434231610b5 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/650048b0764f9c1b798200e2.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/650048b0764f9c1b798200e2.md @@ -1,8 +1,8 @@ --- id: 650048b0764f9c1b798200e2 -title: Step 62 +title: Step 61 challengeType: 0 -dashedName: step-62 +dashedName: step-61 --- # --description-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/65004ba581d03d1d5628b41c.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/65004ba581d03d1d5628b41c.md index 1670f9b7ce0..1efe5c0a385 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/65004ba581d03d1d5628b41c.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/65004ba581d03d1d5628b41c.md @@ -1,8 +1,8 @@ --- id: 65004ba581d03d1d5628b41c -title: Step 63 +title: Step 62 challengeType: 0 -dashedName: step-63 +dashedName: step-62 --- # --description-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/6632420f81f3cc554a5e540b.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/6632420f81f3cc554a5e540b.md index 17a88eddaf4..1e6c4cd3b7c 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/6632420f81f3cc554a5e540b.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/6632420f81f3cc554a5e540b.md @@ -1,8 +1,8 @@ --- id: 6632420f81f3cc554a5e540b -title: Step 64 +title: Step 63 challengeType: 0 -dashedName: step-64 +dashedName: step-63 --- # --description-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/66ad0f178ed5791ed898fe56.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/66ad0f178ed5791ed898fe56.md index 27c13ed6ed9..9ae23e3f4cc 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/66ad0f178ed5791ed898fe56.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/66ad0f178ed5791ed898fe56.md @@ -1,8 +1,8 @@ --- id: 66ad0f178ed5791ed898fe56 -title: Step 65 +title: Step 64 challengeType: 0 -dashedName: step-65 +dashedName: step-64 --- # --description-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/671682cd6d7aa95f0078f35f.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/671682cd6d7aa95f0078f35f.md index aa1a2a604e1..2e08e665fba 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/671682cd6d7aa95f0078f35f.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/671682cd6d7aa95f0078f35f.md @@ -1,8 +1,8 @@ --- id: 671682cd6d7aa95f0078f35f -title: Step 66 +title: Step 65 challengeType: 0 -dashedName: step-66 +dashedName: step-65 --- # --description-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/67168a7243b6396cb69c1bdf.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/67168a7243b6396cb69c1bdf.md index 155523eff85..b25926af3f4 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/67168a7243b6396cb69c1bdf.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/67168a7243b6396cb69c1bdf.md @@ -1,8 +1,8 @@ --- id: 67168a7243b6396cb69c1bdf -title: Step 67 +title: Step 66 challengeType: 0 -dashedName: step-67 +dashedName: step-66 --- # --description--