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 f7fad3b3749..606742a95f3 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 @@ -193,56 +193,60 @@ "title": "Step 45" }, { - "id": "64fb1c4dc0feb219149a7c7d", + "id": "659ebe52d74b132a1d75c891", "title": "Step 46" }, { - "id": "64fb285637fa1e1c222033e3", + "id": "64fb1c4dc0feb219149a7c7d", "title": "Step 47" }, { - "id": "64fb29348a60361ccd45c1e2", + "id": "64fb285637fa1e1c222033e3", "title": "Step 48" }, { - "id": "64fefebad99209211ec30537", + "id": "64fb29348a60361ccd45c1e2", "title": "Step 49" }, { - "id": "64ff0313700dad264d19dfe4", + "id": "64fefebad99209211ec30537", "title": "Step 50" }, { - "id": "64ff04cc33779427a6412449", + "id": "64ff0313700dad264d19dfe4", "title": "Step 51" }, { - "id": "64ff068e0426eb288874ed79", + "id": "64ff04cc33779427a6412449", "title": "Step 52" }, { - "id": "64ff23daf176a92de95f24dc", + "id": "64ff068e0426eb288874ed79", "title": "Step 53" }, { - "id": "64ff24b80431f62ec6b93f65", + "id": "64ff23daf176a92de95f24dc", "title": "Step 54" }, { - "id": "65003986d17d1e1865b269c0", + "id": "64ff24b80431f62ec6b93f65", "title": "Step 55" }, { - "id": "650046832f92c01a35834bca", + "id": "65003986d17d1e1865b269c0", "title": "Step 56" }, { - "id": "650048b0764f9c1b798200e2", + "id": "650046832f92c01a35834bca", "title": "Step 57" }, { - "id": "65004ba581d03d1d5628b41c", + "id": "650048b0764f9c1b798200e2", "title": "Step 58" + }, + { + "id": "65004ba581d03d1d5628b41c", + "title": "Step 59" } ], "helpCategory": "JavaScript" diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fb1c4dc0feb219149a7c7d.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fb1c4dc0feb219149a7c7d.md index 5cdab069bd6..877f0ac7278 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fb1c4dc0feb219149a7c7d.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fb1c4dc0feb219149a7c7d.md @@ -1,8 +1,8 @@ --- id: 64fb1c4dc0feb219149a7c7d -title: Step 46 +title: Step 47 challengeType: 0 -dashedName: step-46 +dashedName: step-47 --- # --description-- @@ -300,6 +300,7 @@ const taskData = []; let currentTask = {}; const addOrUpdateTask = () => { + addOrUpdateTaskBtn.innerText = "Add Task"; const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); const taskObj = { id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fb285637fa1e1c222033e3.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fb285637fa1e1c222033e3.md index 6562ce51597..71e36714b71 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fb285637fa1e1c222033e3.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fb285637fa1e1c222033e3.md @@ -1,8 +1,8 @@ --- id: 64fb285637fa1e1c222033e3 -title: Step 47 +title: Step 48 challengeType: 0 -dashedName: step-47 +dashedName: step-48 --- # --description-- @@ -288,6 +288,7 @@ const taskData = []; let currentTask = {}; const addOrUpdateTask = () => { + addOrUpdateTaskBtn.innerText = "Add Task"; const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); const taskObj = { id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fb29348a60361ccd45c1e2.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fb29348a60361ccd45c1e2.md index 196f0b3e947..7dc5a826a5a 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fb29348a60361ccd45c1e2.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fb29348a60361ccd45c1e2.md @@ -1,8 +1,8 @@ --- id: 64fb29348a60361ccd45c1e2 -title: Step 48 +title: Step 49 challengeType: 0 -dashedName: step-48 +dashedName: step-49 --- # --description-- @@ -304,6 +304,7 @@ const taskData = []; let currentTask = {}; const addOrUpdateTask = () => { + addOrUpdateTaskBtn.innerText = "Add Task"; const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); const taskObj = { id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fefebad99209211ec30537.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fefebad99209211ec30537.md index d6587d6959e..ed0ff664f51 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fefebad99209211ec30537.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fefebad99209211ec30537.md @@ -1,8 +1,8 @@ --- id: 64fefebad99209211ec30537 -title: Step 49 +title: Step 50 challengeType: 0 -dashedName: step-49 +dashedName: step-50 --- # --description-- @@ -294,6 +294,7 @@ const taskData = []; let currentTask = {}; const addOrUpdateTask = () => { + addOrUpdateTaskBtn.innerText = "Add Task"; const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); const taskObj = { id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff0313700dad264d19dfe4.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff0313700dad264d19dfe4.md index 26189ef230d..e400e8da725 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff0313700dad264d19dfe4.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff0313700dad264d19dfe4.md @@ -1,8 +1,8 @@ --- id: 64ff0313700dad264d19dfe4 -title: Step 50 +title: Step 51 challengeType: 0 -dashedName: step-50 +dashedName: step-51 --- # --description-- @@ -294,6 +294,7 @@ const taskData = []; let currentTask = {}; const addOrUpdateTask = () => { + addOrUpdateTaskBtn.innerText = "Add Task"; const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); const taskObj = { id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff04cc33779427a6412449.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff04cc33779427a6412449.md index dbe80426e6b..5153762bf5d 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff04cc33779427a6412449.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff04cc33779427a6412449.md @@ -1,8 +1,8 @@ --- id: 64ff04cc33779427a6412449 -title: Step 51 +title: Step 52 challengeType: 0 -dashedName: step-51 +dashedName: step-52 --- # --description-- @@ -296,6 +296,7 @@ const taskData = []; let currentTask = {}; const addOrUpdateTask = () => { + addOrUpdateTaskBtn.innerText = "Add Task"; const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); const taskObj = { id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff068e0426eb288874ed79.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff068e0426eb288874ed79.md index d07d6ddf355..d25f6a34396 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff068e0426eb288874ed79.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff068e0426eb288874ed79.md @@ -1,8 +1,8 @@ --- id: 64ff068e0426eb288874ed79 -title: Step 52 +title: Step 53 challengeType: 0 -dashedName: step-52 +dashedName: step-53 --- # --description-- @@ -288,6 +288,7 @@ const taskData = []; let currentTask = {}; const addOrUpdateTask = () => { + addOrUpdateTaskBtn.innerText = "Add Task"; const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); const taskObj = { id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, 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 index d6534b3869e..4abd5fa4fae 100644 --- 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 @@ -1,8 +1,8 @@ --- id: 64ff23daf176a92de95f24dc -title: Step 53 +title: Step 54 challengeType: 0 -dashedName: step-53 +dashedName: step-54 --- # --description-- @@ -294,6 +294,7 @@ const taskData = []; let currentTask = {}; const addOrUpdateTask = () => { + addOrUpdateTaskBtn.innerText = "Add Task"; const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); const taskObj = { id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, 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 ad4580cfe39..e1a1c41f9c4 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 54 +title: Step 55 challengeType: 0 -dashedName: step-54 +dashedName: step-55 --- # --description-- @@ -286,6 +286,7 @@ const taskData = []; let currentTask = {}; const addOrUpdateTask = () => { + addOrUpdateTaskBtn.innerText = "Add Task"; const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); const taskObj = { id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, 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 bb4758a68b1..a0b0dc64b5c 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 55 +title: Step 56 challengeType: 0 -dashedName: step-55 +dashedName: step-56 --- # --description-- @@ -302,6 +302,7 @@ const taskData = []; let currentTask = {}; const addOrUpdateTask = () => { + addOrUpdateTaskBtn.innerText = "Add Task"; const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); const taskObj = { id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, 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 4d73f9f220a..e7ba527209c 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 56 +title: Step 57 challengeType: 0 -dashedName: step-56 +dashedName: step-57 --- # --description-- @@ -303,6 +303,7 @@ const taskData = []; let currentTask = {}; const addOrUpdateTask = () => { + addOrUpdateTaskBtn.innerText = "Add Task"; const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); const taskObj = { id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, 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 5b5ea709391..137b7fbfba2 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 57 +title: Step 58 challengeType: 0 -dashedName: step-57 +dashedName: step-58 --- # --description-- @@ -290,6 +290,7 @@ const taskData = []; let currentTask = {}; const addOrUpdateTask = () => { + addOrUpdateTaskBtn.innerText = "Add Task"; const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); const taskObj = { id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, 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 b7f1635ee95..ff1914ff2a5 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 58 +title: Step 59 challengeType: 0 -dashedName: step-58 +dashedName: step-59 --- # --description-- @@ -298,6 +298,7 @@ const taskData = JSON.parse(localStorage.getItem("data")) || []; let currentTask = {}; const addOrUpdateTask = () => { + addOrUpdateTaskBtn.innerText = "Add Task"; const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); const taskObj = { id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, @@ -670,6 +671,7 @@ const taskData = JSON.parse(localStorage.getItem("data")) || []; let currentTask = {}; const addOrUpdateTask = () => { + addOrUpdateTaskBtn.innerText = "Add Task"; const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); const taskObj = { id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md new file mode 100644 index 00000000000..907f2a82078 --- /dev/null +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md @@ -0,0 +1,388 @@ +--- +id: 659ebe52d74b132a1d75c891 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +If you try to add a new task, edit that task, and then click on the `Add New Task` button, you will notice a bug. + +The form button will display the incorrect text of `Update Task` instead of `Add Task`. To fix this, you will need to assign the string `Add Task` to `addOrUpdateTaskBtn.innerText` inside your `addOrUpdateTask` function. +# --hints-- + +You should assign the string `Add Task` to `addOrUpdateTaskBtn.innerText`. + +```js +assert.match(code, /addOrUpdateTaskBtn\.innerText\s*=\s*('|")Add Task\1\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 = () => { + --fcc-editable-region-- + + --fcc-editable-region-- + 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; + if (formInputsContainValues) { + confirmCloseDialog.showModal(); + } else { + reset(); + } +}); + +cancelBtn.addEventListener("click", () => confirmCloseDialog.close()); + +discardBtn.addEventListener("click", () => { + confirmCloseDialog.close(); + reset() +}); + +taskForm.addEventListener("submit", (e) => { + e.preventDefault(); + + addOrUpdateTask(); +}); +```