\s*<\/div>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
new file mode 100644
index 00000000000..81dd3530420
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
@@ -0,0 +1,348 @@
+---
+id: 64ec94f0de20c086e09b0fc3
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Create a `p` element and use template strings to set its content to the `title` you destructured. Right before the content of the `p` element, create a `strong` element with the text `Title:`.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+assert.match(code, //)
+```
+
+You should interpolate `${title}` as the text of your `p` element.
+
+```js
+assert.match(code, /
.*\$\{title\}<\/p>/)
+```
+
+You should create a `strong` element after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)/)
+```
+
+Your `strong` element should have the text `Title:`.
+
+```js
+assert.match(code, /(?<=)Title:\s*<\/strong>\s*/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
new file mode 100644
index 00000000000..4820d100d4d
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
@@ -0,0 +1,336 @@
+---
+id: 64ec959a76336c8767f5cd4d
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Similarly to the previous step, create another `p` element, and interpolate the `date` you destructured as the text content. Inside this paragraph, create a `strong` element with the text `Date:`.
+
+# --hints--
+
+You should create a `p` element and interpolate `${date}` as the text.
+
+```js
+assert.match(code, /.*\$\{date\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Date:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Date:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Edit<\/button/)
+```
+
+You should create a `button` element of type `button` a class `btn` and `Delete` as the text, in that order.
+
+```js
+assert.match(code, /Delete<\/button/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+const reset = () => {
+
+}
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Delete ')
+assert.notMatch(splitter[1], /taskForm\.classList\.toggle\(("|')hidden\1\);?/)
+```
+
+You should call the `reset` function.
+
+```js
+assert.match(code, /reset\(\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+--fcc-editable-region--
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+
+});
+--fcc-editable-region--
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 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;
+--fcc-editable-region--
+ confirmCloseDialog.showModal();
+--fcc-editable-region--
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
\s*Title:<\/strong>\s*\$\{title\}<\/p>\s*Date:<\/strong>\s*\$\{date\}<\/p>\s*Description:<\/strong>\s*\$\{description\}<\/p>\s*Edit<\/button>\s*Delete<\/button>\s*<\/div>\s*`\)\s*\);?\s*\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Edit<\/button>/)
+```
+
+You should add `onclick="deleteTask(this)"` as the first attribute of the delete button.
+
+```js
+assert.match(code, /Delete<\/button>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
Edit
+
Delete
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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,
+ };
+
+ --fcc-editable-region--
+ if (dataArrIndex === -1) {
+ taskData.unshift(taskObj);
+ }
+
+ --fcc-editable-region--
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+const taskData = [];
+--fcc-editable-region--
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(' ').join('-')}`,
+ };
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
new file mode 100644
index 00000000000..0c9fbc152b7
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
@@ -0,0 +1,337 @@
+---
+id: 65099dbd8f137d58e5c0ff16
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Create one more `p` element and interpolate the `description` you destructured as the text. Also, create a `strong` element inside the paragraph with the text `Description:`.
+
+# --hints--
+
+You should create a `p` element with `${description}` as the text.
+
+```js
+assert.match(code, /.*\$\{description\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Description:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Description:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
Colab notebook to go along with this video.
-Here is an additional Colab notebook that shows you one way to put many of these interest and payment forumlas into Python functions. Also you will see an example of using some formulas to output results, notice a trend, and follow up with other formulas to analyze patterns.
+Here is an additional Colab notebook that shows you one way to put many of these interest and payment formulas into Python functions. Also you will see an example of using some formulas to output results, notice a trend, and follow up with other formulas to analyze patterns.
# --question--
diff --git a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md b/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
index 39ab831dad7..144796de1b0 100644
--- a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
+++ b/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
@@ -71,8 +71,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md b/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
index 53ae7b50350..871e1408079 100644
--- a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
+++ b/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
@@ -73,7 +73,7 @@ substringDivisibility(5);
```js
function substringDivisibility(n) {
- function isSubDivisable(digits) {
+ function isSubDivisible(digits) {
const factors = [2, 3, 5, 7, 11, 13, 17];
for (let i = 1; i < digits.length - 2; i++) {
@@ -108,17 +108,17 @@ function substringDivisibility(n) {
}
const allowedDigits = [...new Array(n + 1).keys()];
- const divisablePandigitals = [];
+ const divisiblePandigitals = [];
heapsPermutations(
allowedDigits.length,
allowedDigits,
- isSubDivisable,
- divisablePandigitals
+ isSubDivisible,
+ divisiblePandigitals
);
let sum = 0;
- for (let i = 0; i < divisablePandigitals.length; i++) {
- sum += divisablePandigitals[i];
+ for (let i = 0; i < divisiblePandigitals.length; i++) {
+ sum += divisiblePandigitals[i];
}
return sum;
diff --git a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md b/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
index 7cd5bc67b14..2d583a52355 100644
--- a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
+++ b/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
@@ -67,8 +67,8 @@ class PrimeSeive {
const prime = 2 * i + 3;
primes.push(prime);
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
@@ -101,10 +101,10 @@ class PrimeSeive {
};
function consecutivePrimeSum(limit) {
- // Initalize seive
+ // Initialize seive
const primeSeive = new PrimeSeive(limit);
- // Initalize for longest sum < 100
+ // Initialize for longest sum < 100
let bestPrime = 41;
let bestI = 0;
let bestJ = 5;
diff --git a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md b/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
index cdbfc3e568b..5b55ddd8079 100644
--- a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
+++ b/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
@@ -67,8 +67,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md b/curriculum/challenges/arabic/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
index 78c29aa7952..4fa15980a0d 100644
--- a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
+++ b/curriculum/challenges/arabic/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
@@ -31,10 +31,10 @@ For $1 ≤ k ≤ 200$, find $\sum{m(k)}$.
# --hints--
-`efficientExponentation()` should return `1582`.
+`efficientExponentiation()` should return `1582`.
```js
-assert.strictEqual(efficientExponentation(), 1582);
+assert.strictEqual(efficientExponentiation(), 1582);
```
# --seed--
@@ -42,12 +42,12 @@ assert.strictEqual(efficientExponentation(), 1582);
## --seed-contents--
```js
-function efficientExponentation() {
+function efficientExponentiation() {
return true;
}
-efficientExponentation();
+efficientExponentiation();
```
# --solutions--
diff --git a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md b/curriculum/challenges/arabic/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
index 49d59948762..e402ff347c5 100644
--- a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
+++ b/curriculum/challenges/arabic/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
@@ -67,8 +67,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md b/curriculum/challenges/arabic/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
index 596f703da28..b843f6f2be2 100644
--- a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
+++ b/curriculum/challenges/arabic/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
@@ -35,7 +35,7 @@ concealedSquare();
```js
// Check if n**2 matches the pattern
-function squareMatchs(n) {
+function squareMatches(n) {
// Need BigInt due to size of values
let nSquared = (BigInt(n) * BigInt(n)).toString();
@@ -55,8 +55,8 @@ function concealedSquare() {
for (let x = maxSquareRoot; x >= minSquareRoot; x -= 10) {
// Note: 3*3 = 9 and 7*7 = 49 are only trailing digits
// that can produce 9 as trailing digit in square
- if (squareMatchs(x + 3)) return (x + 3)*10;
- if (squareMatchs(x + 7)) return (x + 7)*10;
+ if (squareMatches(x + 3)) return (x + 3)*10;
+ if (squareMatches(x + 7)) return (x + 7)*10;
}
return -1;
}
diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index 30f40214c57..2d669ab8a2c 100644
--- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -54,7 +54,24 @@ assert.match(code, /myStorage\.car\.inside/);
應該用 `const` 聲明 `gloveBoxContents`。
```js
-assert.match(code, /const\s+gloveBoxContents\s*=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]|const\s*{\s*('|")glove box\2:\s*gloveBoxContents\s*}\s*=\s*myStorage\.car\.inside;/);
+assert.match(code, /const\s+gloveBoxContents\s*=/);
+```
+
+You should not change the `myStorage` object.
+
+```js
+const expectedMyStorage = {
+ "car":{
+ "inside":{
+ "glove box":"maps",
+ "passenger seat":"crumbs"
+ },
+ "outside":{
+ "trunk":"jack"
+ }
+ }
+};
+assert.deepStrictEqual(myStorage, expectedMyStorage);
```
# --seed--
diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
index 510a2d80048..fb19823bd27 100644
--- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
+++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
@@ -10,7 +10,7 @@ dashedName: catch-misspelled-variable-and-function-names
`console.log()` 和 `typeof` 方法是檢查中間值和程序輸出類型的兩種主要方法。 現在是時候瞭解一下 bug 出現的常見的情形。 一個語法級別的問題是打字太快帶來的低級拼寫錯誤。
-變量或函數名的錯寫、漏寫或大小寫弄混都會讓瀏覽器嘗試查找並不存在的東西，並報出“引用錯誤”。 JavaScript 變量和函數名稱區分大小寫。
+Transposed, missing, or miscapitalized characters in a variable or function name will have the browser looking for an object that doesn't exist - and complain in the form of a reference error. JavaScript 變量和函數名稱區分大小寫。
# --instructions--
diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
index 4457789ddae..b61338463fa 100644
--- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
+++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
@@ -58,8 +58,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/issue-tracker.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/issue-tracker.md
index 5188f476ae8..f4e3680426f 100644
--- a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/issue-tracker.md
+++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/issue-tracker.md
@@ -231,13 +231,13 @@ async (getUserInput) => {
};
const url = getUserInput('url') + '/api/issues/fcc-project';
const itemToUpdate = await $.post(url, initialData);
- const updateSucccess = await $.ajax({
+ const updateSuccess = await $.ajax({
url: url,
type: 'PUT',
data: { _id: itemToUpdate._id, issue_text: 'New Issue Text' }
});
- assert.isObject(updateSucccess);
- assert.deepEqual(updateSucccess, {
+ assert.isObject(updateSuccess);
+ assert.deepEqual(updateSuccess, {
result: 'successfully updated',
_id: itemToUpdate._id
});
diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/rosetta-code/24-game.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/rosetta-code/24-game.md
index a6da5861b7e..193b53ba281 100644
--- a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/rosetta-code/24-game.md
+++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/rosetta-code/24-game.md
@@ -82,7 +82,7 @@ const OPERATORS_ = {
"/": (a, b) => a / b,
}
-const PRECIDENCE_ = {
+const PRECEDENCE_ = {
"+": 1,
"-": 1,
"*": 2,
@@ -114,7 +114,7 @@ function evaluate_(expression) {
case "*":
case "/":
while (stack.length &&
- PRECIDENCE_[c] <= PRECIDENCE_[stack[stack.length-1]]) {
+ PRECEDENCE_[c] <= PRECEDENCE_[stack[stack.length-1]]) {
postfix += stack.pop();
}
stack.push(c);
diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
index b6a78ff636a..46b65350213 100644
--- a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
+++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
@@ -175,7 +175,7 @@ function dealFreeCell(seed) {
const rng = FreeCellRNG(seed);
const deck = getDeck();
- const deltCards = [[], [], [], [], [], [], []];
+ const dealtCards = [[], [], [], [], [], [], []];
let currentColumn = 0;
let currentRow = 0;
@@ -195,7 +195,7 @@ function dealFreeCell(seed) {
card = deck.pop();
// Deal this card
- deltCards[currentRow].push(card);
+ dealtCards[currentRow].push(card);
currentColumn += 1;
if (currentColumn === 8) {
currentColumn = 0;
@@ -203,6 +203,6 @@ function dealFreeCell(seed) {
}
}
- return deltCards;
+ return dealtCards;
}
```
diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/rosetta-code/department-numbers.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/rosetta-code/department-numbers.md
index 50d9ef1e732..d9216a81055 100644
--- a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/rosetta-code/department-numbers.md
+++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/rosetta-code/department-numbers.md
@@ -101,7 +101,7 @@ function combinations(possibleNumbers, total) {
function combinations(possibleNumbers, total) {
let firstNumber;
let secondNumber;
- let thridNumber;
+ let thirdNumber;
const allCombinations = [];
for (let i = 0; i < possibleNumbers.length; i += 1) {
@@ -112,10 +112,10 @@ function combinations(possibleNumbers, total) {
secondNumber = possibleNumbers[j];
if (j !== i && firstNumber + secondNumber <= total) {
- thridNumber = total - firstNumber - secondNumber;
+ thirdNumber = total - firstNumber - secondNumber;
- if (thridNumber !== firstNumber && thridNumber !== secondNumber && possibleNumbers.includes(thridNumber)) {
- allCombinations.push([firstNumber, secondNumber, thridNumber]);
+ if (thirdNumber !== firstNumber && thirdNumber !== secondNumber && possibleNumbers.includes(thirdNumber)) {
+ allCombinations.push([firstNumber, secondNumber, thirdNumber]);
}
}
}
diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/rosetta-code/lu-decomposition.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/rosetta-code/lu-decomposition.md
index 45759df22aa..9255204dd79 100644
--- a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/rosetta-code/lu-decomposition.md
+++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/rosetta-code/lu-decomposition.md
@@ -80,7 +80,7 @@ $PA = LU$
# --instructions--
-The task is to implement a routine which will take a square nxn matrix $A$ and return a lower triangular matrix $L$, a upper triangular matrix $U$ and a permutation matrix $P$, so that the above equation is fullfilled. The returned value should be in the form `[L, U, P]`.
+The task is to implement a routine which will take a square nxn matrix $A$ and return a lower triangular matrix $L$, a upper triangular matrix $U$ and a permutation matrix $P$, so that the above equation is fulfilled. The returned value should be in the form `[L, U, P]`.
# --hints--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
index b9c000c01b6..2fa9af8b9e6 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
@@ -9,7 +9,7 @@ dashedName: step-82
企鵝的嘴和腳的 `color` 相同。
-創建一個名爲 `--penguin-picorna` 的新自定義 CSS 變量，並用它替換所有相關的屬性。
+Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it.
# --hints--
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
index c335f2d7bc9..a1c1c26f120 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
@@ -11,7 +11,7 @@ Inside `pick`, use `let` to initialize a variable named `numbers` and set it to
# --hints--
-Your `pick` function should initalize `numbers` to an empty array `[]`.
+Your `pick` function should initialize `numbers` to an empty array `[]`.
```js
assert.match(pick.toString(), /numbers\s*=\s*\[\]/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md
new file mode 100644
index 00000000000..4b042aa87ba
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md
@@ -0,0 +1,310 @@
+---
+id: 64e4e4c4ec263b62ae7bf54d
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn how `localStorage` works in JavaScript by building a Todo app. LocalStorage is a web storage feature of JavaScript that lets you persist data by storing the data as a **key:value** pair.
+
+The HTML and CSS for this project have been provided for you. Take a look at the files to get yourself familiarized with them.
+
+Begin by accessing the `task-form`, `confirm-close-dialog`, and `open-task-form-btn` elements with the `getElementById()` method. Save them in the variables `taskForm`, `confirmCloseDialog`, and `openTaskFormBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `task-form` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should assign the `task-form` element to the variable `taskForm`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+taskForm\s*=\s*document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should use `getElementById()` to access the `confirm-close-dialog` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should assign the `confirm-close-dialog` element to the variable `confirmCloseDialog`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+confirmCloseDialog\s*=\s*document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should use `getElementById()` to access the `open-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `open-task-form-btn` element to the variable `openTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+openTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
new file mode 100644
index 00000000000..32310409728
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
@@ -0,0 +1,310 @@
+---
+id: 64e4e6c86954de67a3e44ee3
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+You need to access more elements with the `getElementById()` method. This time you need the `close-task-form-btn`, `add-or-update-task-btn`, and `cancel-btn` elements. Save them in the variables `closeTaskFormBtn`, `addOrUpdateTaskBtn`, and `cancelBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `close-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `close-task-form-btn` element to the variable `closeTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+closeTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `add-or-update-task-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should assign the `add-or-update-task-btn` element to the variable `addOrUpdateTaskBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+addOrUpdateTaskBtn\s*=\s*document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `cancel-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+You should assign the `cancel-btn` element to the variable `cancelBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cancelBtn\s*=\s*document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
new file mode 100644
index 00000000000..17fc6b76517
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
@@ -0,0 +1,313 @@
+---
+id: 64e4e6fe78b5aa67ef2fc3e7
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next, access the `discard-btn`, `tasks-container`, and `title-input` elements using the `getElementById()` method. Save them in variables named `discardBtn`, `tasksContainer`, and `titleInput`, respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `discard-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should assign the `discard-btn` element to the variable `discardBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+discardBtn\s*=\s*document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `tasks-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should assign the `tasks-container` element to the variable `tasksContainer`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+tasksContainer\s*=\s*document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should use `getElementById()` to access the `title-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+You should assign the `title-input` element to the variable `titleInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+titleInput\s*=\s*document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
new file mode 100644
index 00000000000..6e543d36acc
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
@@ -0,0 +1,304 @@
+---
+id: 64e4e7241f52bb682eeb8211
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last set of elements you need to get from the HTML file are the `date-input` and `description-input` elements. Save them in the variables `dateInput` and `descriptionInput` respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `date-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should assign the `date-input` element to the variable `dateInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dateInput\s*=\s*document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should use `getElementById()` to access the `description-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+You should assign the `description-input` element to the variable `descriptionInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+descriptionInput\s*=\s*document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
new file mode 100644
index 00000000000..6f0cd6e9fc4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
@@ -0,0 +1,296 @@
+---
+id: 64e4e74d0fb4f0687bf4145d
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `taskData` constant and set it to an empty array. This array will store all the tasks along with their associated data, including title, due date, and description. This storage will enable you to keep track of tasks, display them on the page, and save them to `localStorage`.
+
+Use `let` to create a `currentTask` variable and set it to an empty object. This variable will be used to track the state when editing and discarding tasks.
+
+# --hints--
+
+You should create a `taskData` constant set to an empty array.
+
+```js
+assert.match(code, /const\s+taskData\s*=\s*\[\];?/)
+```
+
+You should use `let` to create an empty `currentTask` object.
+
+```js
+assert.match(code, /let\s+currentTask\s*=\s*\{\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
new file mode 100644
index 00000000000..7eba2896bf4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -0,0 +1,307 @@
+---
+id: 64e4e78a7ea4a168de4e6a38
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Now, you will work on opening and closing the form modal.
+
+Add a `click` event listener to the `openTaskFormBtn` variable, and then use `classList` to toggle the `hidden` class on the `taskForm` element.
+
+Now you can click on the "Add new Task" button and see the form modal.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `openTaskFormBtn` variable.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax, then use `classList` property and it's `toggle` method on the `taskForm`, to toggle the class `hidden`. Don't use curly braces.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*taskForm\.classList\.toggle\(\1hidden\1\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
new file mode 100644
index 00000000000..6a29158134e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
@@ -0,0 +1,309 @@
+---
+id: 64e4e7bbedb22d6939001ad3
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Add a `click` event listener to the `closeTaskFormBtn` variable, then use the `showModal()` method on your `confirmCloseDialog` variable. This will display a modal with the `Discard` and `Cancel` buttons.
+
+`showModal()` is a method associated with the HTML `dialog` element. It is used to display a modal dialog box on a web page.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `closeTaskFormBtn` variable.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `showModal()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(["'`]click["'`],\s*\(.*\)\s*=>\s*{?\s*confirmCloseDialog\.showModal\(\);?\s*}?\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
new file mode 100644
index 00000000000..311984043a0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
@@ -0,0 +1,316 @@
+---
+id: 64e4eaaa9070a66aecbfe603
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+If the user clicks the `Cancel` button, you want to cancel the process (close the modal showing the two buttons) so the user can continue editing.
+
+Add a `click` event listener to the `cancelBtn` element, then use the `close()` method on the `confirmCloseDialog` variable.
+
+`close()` is a method of the window object you can use to close the current window, or a modal you create with the `dialog` element.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `cancelBtn` variable.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `close()` method on `confirmCloseDialog`. Don't use curly braces.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*confirmCloseDialog\.close\(\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
new file mode 100644
index 00000000000..66a40c9771b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
@@ -0,0 +1,327 @@
+---
+id: 64e4ebc7eabc5a6babd479cd
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+If the user clicks the `Discard` button, you want to close the modal showing the `Cancel` and `Discard` buttons, then hide the form modal.
+
+Add a click event listener to `discardBtn`, then use the `close()` method on the `confirmCloseDialog` variable. Also, use `classList` to toggle the class `hidden` on `taskForm` so the form modal will close too.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `discardBtn` variable.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{/)
+```
+
+Your event listener should use the `close()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?/)
+```
+
+Your event listener should use `classList` to toggle the class `hidden` on `taskForm`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?\s*taskForm\.classList\.toggle\(\1hidden\1\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
new file mode 100644
index 00000000000..f4002dc0937
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
@@ -0,0 +1,326 @@
+---
+id: 64e4ecd7735a566c9266a338
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Now that you've worked on opening and closing the modal, it's time to get the values from the input fields, save them into the `taskData` array, and display them on the page.
+
+To start, add a `submit` event listener to your `taskForm` element and pass in `e` as the parameter of your arrow function. Inside the curly braces, use the `preventDefault()` method to stop the browser from refreshing the page after submitting the form.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `taskForm` variable.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(/)
+```
+
+Your event listener should listen for a `submit` event.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces with `e` as the parameter.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{/)
+```
+
+You should use the `e.preventDefault()` method to stop the browser from reloading the page.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{\s*e\.preventDefault\(\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
new file mode 100644
index 00000000000..148e52f3e93
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
@@ -0,0 +1,337 @@
+---
+id: 64e4eec13546c06d61a63d59
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+You need to determine whether the task being added already exists or not. If it doesn't exist, you will add it, and if it already exists, you will set it up for editing. You can use the `findIndex()` method to accomplish this.
+
+`findIndex` is an array method that lets find the index of the first element in an array that satisfies a given testing function.
+
+Here's an example:
+
+```js
+const numbers = [3, 1, 5, 6, 10, 9, 8];
+const firstEvenNumIndex = numbers.findIndex((num) => num % 2 === 0);
+
+console.log(firstEvenNumIndex); // Output: 3 – because the first even number (6) is at index 3
+```
+
+Declare a `dataArrIndex` variable using `const` and set it to the result of the `findIndex()` method applied to the `taskData` array. Utilize arrow syntax to provide a callback function with `item` as the parameter, and within the callback, check if the `id` property of `item` is equal to the `id` property of `currentTask`.
+
+If the task exists, this returns the index, and if it doesn't exist, it returns `-1`.
+
+# --hints--
+
+You should use `const` to declare a `dataArrIndex` variable and set it to `taskData.findIndex()`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(/)
+```
+
+You should pass in `item` as the parameter of the arrow function callback. Don't use curly braces.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?/)
+```
+
+Your arrow function callback should check if `item.id === currentTask.id`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?\s*=>\s*item.id\s*===\s*currentTask.id\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
new file mode 100644
index 00000000000..10826de6f17
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
@@ -0,0 +1,340 @@
+---
+id: 64e4f01d6c72086e016a8626
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Next, retrieve the values from the input fields and store them in a `taskObj` object. Each task should also have a unique `id`.
+
+Create a `taskObj` object with an `id` property as the first property. For the value of the `id` property, retrieve the value of the `titleInput` field, convert it to lowercase, and then use the `split()` and `join()` methods to hyphenate it.
+
+Make sure all of those are in template literals because you need the `id` property value as a string.
+
+# --hints--
+
+You should use `const` to create a `taskObj` object.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*/)
+```
+
+Your `taskObj` object should have a key of `id`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id/)
+```
+
+You should use template strings to get `titleInput.value` as the value of your `id` key and convert it to lowercase.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)/)
+```
+
+You should use `.split(' ')` on `titleInput.value.toLowerCase()`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)/)
+```
+
+You should use `.join('-')` on `titleInput.value.toLowerCase().split(' ')`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)\.join\(\1-\1\)\}`,?\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
new file mode 100644
index 00000000000..764de1b0918
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
@@ -0,0 +1,327 @@
+---
+id: 64ec89ee549ecf802de2b3e2
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Retrieve the values from the `titleInput`, `dateInput`, and `descriptionInput` fields, and then save them in the properties `title`, `date`, and `description` of the `taskObj` object.
+
+# --hints--
+
+You should get the value of `titleInput` and save it in a `title` key.
+
+```js
+assert.match(code, /title:\s*titleInput\.value,/)
+```
+
+You should get the value of `dateInput` and save it in a `date` key.
+
+```js
+assert.match(code, /date:\s*dateInput\.value,/)
+```
+
+You should get the value of `descriptionInput` and save it in a `description` key.
+
+```js
+assert.match(code, /description:\s*descriptionInput\.value,?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`,
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ };
+});
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
new file mode 100644
index 00000000000..3d009188d81
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
@@ -0,0 +1,332 @@
+---
+id: 64ec8f717b261e824d82d6a5
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Now that you have obtained the values from the input fields and generated an `id`, you want to add them to your `taskData` array to keep track of each task. However, you should only do this if the task is new. If the task already exists, you will set it up for editing. This is why you have the `dataArrIndex` variable, which provides the index of each task.
+
+Create an `if` statement with the condition `dataArrIndex === -1`. Within the `if` statement, use the `unshift()` method to add the `taskObj` object to the beginning of the `taskData` array.
+
+`unshift()` is an array method that is used to add one or more elements to the beginning of an array.
+
+**N.B:** Try adding a task and log `taskData` to the console to see what it looks like.
+
+# --hints--
+
+You should create an `if` statement with the condition `dataArrIndex === -1`.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{/)
+```
+
+Your `if` statement should have `taskData.unshift(taskObj)` in it's body.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{\s*taskData\.unshift\(taskObj\);?\s*\}/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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,
+ };
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
new file mode 100644
index 00000000000..f1202bb93fe
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
@@ -0,0 +1,331 @@
+---
+id: 64ec9145e424d8835a4e0f28
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have saved the task in the `taskData` array, you should display the task on the page by looping through it.
+
+Use `forEach()` on `taskData`, then destructure `id`, `title`, `date`, `description` as the parameters. Don't return anything yet.
+
+# --hints--
+
+You should use `forEach()` on `taskData`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*/)
+```
+
+You should destructure `id`, `title`, `date`, `description` as the parameters of the callback of your `forEach()`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
new file mode 100644
index 00000000000..06bdd7c6ae5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
@@ -0,0 +1,336 @@
+---
+id: 64ec9282cd547785258cecf2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Using arrow syntax, create an implicit return and use addition assignment to set the `innerHTML` of `tasksContainer` to empty backticks.
+
+# --hints--
+
+You should not alter the existing `taskData.forEach()` and the values you destructured.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+You should use arrow syntax and attach `innerHTML` to `tasksContainer`.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\(\s*tasksContainer\.innerHTML\s*\))?/)
+```
+
+You should use addition assignment to set the `innerHTML` of `tasksContainer` to an empty pair of backticks.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\s*\(?tasksContainer\.innerHTML\s*\+=\s*`\s*`\)?)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+ taskData.forEach(({id, title, date, description}));
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
new file mode 100644
index 00000000000..b5115f99a51
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
@@ -0,0 +1,333 @@
+---
+id: 64ec9343769e8f85c1e17e05
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Create a `div` element with the class of `task`. Utilize template strings to set the `id` attribute of the `div` to the `id` you destructured from the task data.
+
+# --hints--
+
+You should create a `div` element with the class `task`.
+
+```js
+assert.match(code, /\s*<\/div>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
new file mode 100644
index 00000000000..81dd3530420
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
@@ -0,0 +1,348 @@
+---
+id: 64ec94f0de20c086e09b0fc3
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Create a `p` element and use template strings to set its content to the `title` you destructured. Right before the content of the `p` element, create a `strong` element with the text `Title:`.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+assert.match(code, //)
+```
+
+You should interpolate `${title}` as the text of your `p` element.
+
+```js
+assert.match(code, /
.*\$\{title\}<\/p>/)
+```
+
+You should create a `strong` element after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)/)
+```
+
+Your `strong` element should have the text `Title:`.
+
+```js
+assert.match(code, /(?<=)Title:\s*<\/strong>\s*/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
new file mode 100644
index 00000000000..4820d100d4d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
@@ -0,0 +1,336 @@
+---
+id: 64ec959a76336c8767f5cd4d
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Similarly to the previous step, create another `p` element, and interpolate the `date` you destructured as the text content. Inside this paragraph, create a `strong` element with the text `Date:`.
+
+# --hints--
+
+You should create a `p` element and interpolate `${date}` as the text.
+
+```js
+assert.match(code, /.*\$\{date\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Date:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Date:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Edit<\/button/)
+```
+
+You should create a `button` element of type `button` a class `btn` and `Delete` as the text, in that order.
+
+```js
+assert.match(code, /Delete<\/button/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+const reset = () => {
+
+}
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Delete ')
+assert.notMatch(splitter[1], /taskForm\.classList\.toggle\(("|')hidden\1\);?/)
+```
+
+You should call the `reset` function.
+
+```js
+assert.match(code, /reset\(\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+--fcc-editable-region--
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+
+});
+--fcc-editable-region--
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 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;
+--fcc-editable-region--
+ confirmCloseDialog.showModal();
+--fcc-editable-region--
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
\s*Title:<\/strong>\s*\$\{title\}<\/p>\s*Date:<\/strong>\s*\$\{date\}<\/p>\s*Description:<\/strong>\s*\$\{description\}<\/p>\s*Edit<\/button>\s*Delete<\/button>\s*<\/div>\s*`\)\s*\);?\s*\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Edit<\/button>/)
+```
+
+You should add `onclick="deleteTask(this)"` as the first attribute of the delete button.
+
+```js
+assert.match(code, /Delete<\/button>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
Edit
+
Delete
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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,
+ };
+
+ --fcc-editable-region--
+ if (dataArrIndex === -1) {
+ taskData.unshift(taskObj);
+ }
+
+ --fcc-editable-region--
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+const taskData = [];
+--fcc-editable-region--
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(' ').join('-')}`,
+ };
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
new file mode 100644
index 00000000000..0c9fbc152b7
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
@@ -0,0 +1,337 @@
+---
+id: 65099dbd8f137d58e5c0ff16
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Create one more `p` element and interpolate the `description` you destructured as the text. Also, create a `strong` element inside the paragraph with the text `Description:`.
+
+# --hints--
+
+You should create a `p` element with `${description}` as the text.
+
+```js
+assert.match(code, /.*\$\{description\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Description:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Description:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
和這個視頻配套的 Colab 筆記本 。
-這裏有一個額外的 Colab 筆記本，它向你展示了將許多這些利息和付款公式圖放入 Python 函數的一種方法 。同時你將看到一個使用一些公式輸出結果的例子，注意一個趨勢，並學習其他公式來分析模式。
+Here is an additional Colab notebook that shows you one way to put many of these interest and payment formulas into Python functions. Also you will see an example of using some formulas to output results, notice a trend, and follow up with other formulas to analyze patterns.
# --question--
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
index 39ab831dad7..144796de1b0 100644
--- a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
@@ -71,8 +71,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
index 53ae7b50350..871e1408079 100644
--- a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
@@ -73,7 +73,7 @@ substringDivisibility(5);
```js
function substringDivisibility(n) {
- function isSubDivisable(digits) {
+ function isSubDivisible(digits) {
const factors = [2, 3, 5, 7, 11, 13, 17];
for (let i = 1; i < digits.length - 2; i++) {
@@ -108,17 +108,17 @@ function substringDivisibility(n) {
}
const allowedDigits = [...new Array(n + 1).keys()];
- const divisablePandigitals = [];
+ const divisiblePandigitals = [];
heapsPermutations(
allowedDigits.length,
allowedDigits,
- isSubDivisable,
- divisablePandigitals
+ isSubDivisible,
+ divisiblePandigitals
);
let sum = 0;
- for (let i = 0; i < divisablePandigitals.length; i++) {
- sum += divisablePandigitals[i];
+ for (let i = 0; i < divisiblePandigitals.length; i++) {
+ sum += divisiblePandigitals[i];
}
return sum;
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
index 7cd5bc67b14..2d583a52355 100644
--- a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
@@ -67,8 +67,8 @@ class PrimeSeive {
const prime = 2 * i + 3;
primes.push(prime);
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
@@ -101,10 +101,10 @@ class PrimeSeive {
};
function consecutivePrimeSum(limit) {
- // Initalize seive
+ // Initialize seive
const primeSeive = new PrimeSeive(limit);
- // Initalize for longest sum < 100
+ // Initialize for longest sum < 100
let bestPrime = 41;
let bestI = 0;
let bestJ = 5;
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
index cdbfc3e568b..5b55ddd8079 100644
--- a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
@@ -67,8 +67,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
index 78c29aa7952..4fa15980a0d 100644
--- a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
@@ -31,10 +31,10 @@ For $1 ≤ k ≤ 200$, find $\sum{m(k)}$.
# --hints--
-`efficientExponentation()` should return `1582`.
+`efficientExponentiation()` should return `1582`.
```js
-assert.strictEqual(efficientExponentation(), 1582);
+assert.strictEqual(efficientExponentiation(), 1582);
```
# --seed--
@@ -42,12 +42,12 @@ assert.strictEqual(efficientExponentation(), 1582);
## --seed-contents--
```js
-function efficientExponentation() {
+function efficientExponentiation() {
return true;
}
-efficientExponentation();
+efficientExponentiation();
```
# --solutions--
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
index 49d59948762..e402ff347c5 100644
--- a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
@@ -67,8 +67,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
index 596f703da28..b843f6f2be2 100644
--- a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
@@ -35,7 +35,7 @@ concealedSquare();
```js
// Check if n**2 matches the pattern
-function squareMatchs(n) {
+function squareMatches(n) {
// Need BigInt due to size of values
let nSquared = (BigInt(n) * BigInt(n)).toString();
@@ -55,8 +55,8 @@ function concealedSquare() {
for (let x = maxSquareRoot; x >= minSquareRoot; x -= 10) {
// Note: 3*3 = 9 and 7*7 = 49 are only trailing digits
// that can produce 9 as trailing digit in square
- if (squareMatchs(x + 3)) return (x + 3)*10;
- if (squareMatchs(x + 7)) return (x + 7)*10;
+ if (squareMatches(x + 3)) return (x + 3)*10;
+ if (squareMatches(x + 7)) return (x + 7)*10;
}
return -1;
}
diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index f07b62114a2..1533634a15d 100644
--- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -54,7 +54,24 @@ assert.match(code, /myStorage\.car\.inside/);
应该用 `const` 声明 `gloveBoxContents`。
```js
-assert.match(code, /const\s+gloveBoxContents\s*=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]|const\s*{\s*('|")glove box\2:\s*gloveBoxContents\s*}\s*=\s*myStorage\.car\.inside;/);
+assert.match(code, /const\s+gloveBoxContents\s*=/);
+```
+
+You should not change the `myStorage` object.
+
+```js
+const expectedMyStorage = {
+ "car":{
+ "inside":{
+ "glove box":"maps",
+ "passenger seat":"crumbs"
+ },
+ "outside":{
+ "trunk":"jack"
+ }
+ }
+};
+assert.deepStrictEqual(myStorage, expectedMyStorage);
```
# --seed--
diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
index a58e2bb6e3e..3e0bdf2e154 100644
--- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
+++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
@@ -10,7 +10,7 @@ dashedName: catch-misspelled-variable-and-function-names
`console.log()` 和 `typeof` 方法是检查中间值和程序输出类型的两种主要方法。 现在是时候了解一下 bug 出现的常见的情形。 一个语法级别的问题是打字太快带来的低级拼写错误。
-变量或函数名的错写、漏写或大小写弄混都会让浏览器尝试查找并不存在的东西，并报出“引用错误”。 JavaScript 变量和函数名称区分大小写。
+Transposed, missing, or miscapitalized characters in a variable or function name will have the browser looking for an object that doesn't exist - and complain in the form of a reference error. JavaScript 变量和函数名称区分大小写。
# --instructions--
diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
index 6c6b92d2310..5be0aa61230 100644
--- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
+++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
@@ -58,8 +58,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/issue-tracker.md b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/issue-tracker.md
index 54fa9e1d5c4..4fd3b5d90c7 100644
--- a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/issue-tracker.md
+++ b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/issue-tracker.md
@@ -231,13 +231,13 @@ async (getUserInput) => {
};
const url = getUserInput('url') + '/api/issues/fcc-project';
const itemToUpdate = await $.post(url, initialData);
- const updateSucccess = await $.ajax({
+ const updateSuccess = await $.ajax({
url: url,
type: 'PUT',
data: { _id: itemToUpdate._id, issue_text: 'New Issue Text' }
});
- assert.isObject(updateSucccess);
- assert.deepEqual(updateSucccess, {
+ assert.isObject(updateSuccess);
+ assert.deepEqual(updateSuccess, {
result: 'successfully updated',
_id: itemToUpdate._id
});
diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/rosetta-code/24-game.md b/curriculum/challenges/chinese/10-coding-interview-prep/rosetta-code/24-game.md
index 589bc792418..855e0411f4c 100644
--- a/curriculum/challenges/chinese/10-coding-interview-prep/rosetta-code/24-game.md
+++ b/curriculum/challenges/chinese/10-coding-interview-prep/rosetta-code/24-game.md
@@ -82,7 +82,7 @@ const OPERATORS_ = {
"/": (a, b) => a / b,
}
-const PRECIDENCE_ = {
+const PRECEDENCE_ = {
"+": 1,
"-": 1,
"*": 2,
@@ -114,7 +114,7 @@ function evaluate_(expression) {
case "*":
case "/":
while (stack.length &&
- PRECIDENCE_[c] <= PRECIDENCE_[stack[stack.length-1]]) {
+ PRECEDENCE_[c] <= PRECEDENCE_[stack[stack.length-1]]) {
postfix += stack.pop();
}
stack.push(c);
diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md b/curriculum/challenges/chinese/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
index b6a78ff636a..46b65350213 100644
--- a/curriculum/challenges/chinese/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
+++ b/curriculum/challenges/chinese/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
@@ -175,7 +175,7 @@ function dealFreeCell(seed) {
const rng = FreeCellRNG(seed);
const deck = getDeck();
- const deltCards = [[], [], [], [], [], [], []];
+ const dealtCards = [[], [], [], [], [], [], []];
let currentColumn = 0;
let currentRow = 0;
@@ -195,7 +195,7 @@ function dealFreeCell(seed) {
card = deck.pop();
// Deal this card
- deltCards[currentRow].push(card);
+ dealtCards[currentRow].push(card);
currentColumn += 1;
if (currentColumn === 8) {
currentColumn = 0;
@@ -203,6 +203,6 @@ function dealFreeCell(seed) {
}
}
- return deltCards;
+ return dealtCards;
}
```
diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/rosetta-code/department-numbers.md b/curriculum/challenges/chinese/10-coding-interview-prep/rosetta-code/department-numbers.md
index cffc60a8ab3..df00a6e693d 100644
--- a/curriculum/challenges/chinese/10-coding-interview-prep/rosetta-code/department-numbers.md
+++ b/curriculum/challenges/chinese/10-coding-interview-prep/rosetta-code/department-numbers.md
@@ -101,7 +101,7 @@ function combinations(possibleNumbers, total) {
function combinations(possibleNumbers, total) {
let firstNumber;
let secondNumber;
- let thridNumber;
+ let thirdNumber;
const allCombinations = [];
for (let i = 0; i < possibleNumbers.length; i += 1) {
@@ -112,10 +112,10 @@ function combinations(possibleNumbers, total) {
secondNumber = possibleNumbers[j];
if (j !== i && firstNumber + secondNumber <= total) {
- thridNumber = total - firstNumber - secondNumber;
+ thirdNumber = total - firstNumber - secondNumber;
- if (thridNumber !== firstNumber && thridNumber !== secondNumber && possibleNumbers.includes(thridNumber)) {
- allCombinations.push([firstNumber, secondNumber, thridNumber]);
+ if (thirdNumber !== firstNumber && thirdNumber !== secondNumber && possibleNumbers.includes(thirdNumber)) {
+ allCombinations.push([firstNumber, secondNumber, thirdNumber]);
}
}
}
diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/rosetta-code/lu-decomposition.md b/curriculum/challenges/chinese/10-coding-interview-prep/rosetta-code/lu-decomposition.md
index 45759df22aa..9255204dd79 100644
--- a/curriculum/challenges/chinese/10-coding-interview-prep/rosetta-code/lu-decomposition.md
+++ b/curriculum/challenges/chinese/10-coding-interview-prep/rosetta-code/lu-decomposition.md
@@ -80,7 +80,7 @@ $PA = LU$
# --instructions--
-The task is to implement a routine which will take a square nxn matrix $A$ and return a lower triangular matrix $L$, a upper triangular matrix $U$ and a permutation matrix $P$, so that the above equation is fullfilled. The returned value should be in the form `[L, U, P]`.
+The task is to implement a routine which will take a square nxn matrix $A$ and return a lower triangular matrix $L$, a upper triangular matrix $U$ and a permutation matrix $P$, so that the above equation is fulfilled. The returned value should be in the form `[L, U, P]`.
# --hints--
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
index 8670e841b30..265ac261a8b 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
@@ -9,7 +9,7 @@ dashedName: step-82
企鹅的嘴和脚的 `color` 相同。
-创建一个名为 `--penguin-picorna` 的新自定义 CSS 变量，并用它替换所有相关的属性。
+Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it.
# --hints--
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
index c335f2d7bc9..a1c1c26f120 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
@@ -11,7 +11,7 @@ Inside `pick`, use `let` to initialize a variable named `numbers` and set it to
# --hints--
-Your `pick` function should initalize `numbers` to an empty array `[]`.
+Your `pick` function should initialize `numbers` to an empty array `[]`.
```js
assert.match(pick.toString(), /numbers\s*=\s*\[\]/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md
new file mode 100644
index 00000000000..4b042aa87ba
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md
@@ -0,0 +1,310 @@
+---
+id: 64e4e4c4ec263b62ae7bf54d
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn how `localStorage` works in JavaScript by building a Todo app. LocalStorage is a web storage feature of JavaScript that lets you persist data by storing the data as a **key:value** pair.
+
+The HTML and CSS for this project have been provided for you. Take a look at the files to get yourself familiarized with them.
+
+Begin by accessing the `task-form`, `confirm-close-dialog`, and `open-task-form-btn` elements with the `getElementById()` method. Save them in the variables `taskForm`, `confirmCloseDialog`, and `openTaskFormBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `task-form` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should assign the `task-form` element to the variable `taskForm`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+taskForm\s*=\s*document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should use `getElementById()` to access the `confirm-close-dialog` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should assign the `confirm-close-dialog` element to the variable `confirmCloseDialog`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+confirmCloseDialog\s*=\s*document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should use `getElementById()` to access the `open-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `open-task-form-btn` element to the variable `openTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+openTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
new file mode 100644
index 00000000000..32310409728
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
@@ -0,0 +1,310 @@
+---
+id: 64e4e6c86954de67a3e44ee3
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+You need to access more elements with the `getElementById()` method. This time you need the `close-task-form-btn`, `add-or-update-task-btn`, and `cancel-btn` elements. Save them in the variables `closeTaskFormBtn`, `addOrUpdateTaskBtn`, and `cancelBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `close-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `close-task-form-btn` element to the variable `closeTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+closeTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `add-or-update-task-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should assign the `add-or-update-task-btn` element to the variable `addOrUpdateTaskBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+addOrUpdateTaskBtn\s*=\s*document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `cancel-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+You should assign the `cancel-btn` element to the variable `cancelBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cancelBtn\s*=\s*document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
new file mode 100644
index 00000000000..17fc6b76517
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
@@ -0,0 +1,313 @@
+---
+id: 64e4e6fe78b5aa67ef2fc3e7
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next, access the `discard-btn`, `tasks-container`, and `title-input` elements using the `getElementById()` method. Save them in variables named `discardBtn`, `tasksContainer`, and `titleInput`, respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `discard-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should assign the `discard-btn` element to the variable `discardBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+discardBtn\s*=\s*document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `tasks-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should assign the `tasks-container` element to the variable `tasksContainer`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+tasksContainer\s*=\s*document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should use `getElementById()` to access the `title-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+You should assign the `title-input` element to the variable `titleInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+titleInput\s*=\s*document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
new file mode 100644
index 00000000000..6e543d36acc
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
@@ -0,0 +1,304 @@
+---
+id: 64e4e7241f52bb682eeb8211
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last set of elements you need to get from the HTML file are the `date-input` and `description-input` elements. Save them in the variables `dateInput` and `descriptionInput` respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `date-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should assign the `date-input` element to the variable `dateInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dateInput\s*=\s*document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should use `getElementById()` to access the `description-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+You should assign the `description-input` element to the variable `descriptionInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+descriptionInput\s*=\s*document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
new file mode 100644
index 00000000000..6f0cd6e9fc4
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
@@ -0,0 +1,296 @@
+---
+id: 64e4e74d0fb4f0687bf4145d
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `taskData` constant and set it to an empty array. This array will store all the tasks along with their associated data, including title, due date, and description. This storage will enable you to keep track of tasks, display them on the page, and save them to `localStorage`.
+
+Use `let` to create a `currentTask` variable and set it to an empty object. This variable will be used to track the state when editing and discarding tasks.
+
+# --hints--
+
+You should create a `taskData` constant set to an empty array.
+
+```js
+assert.match(code, /const\s+taskData\s*=\s*\[\];?/)
+```
+
+You should use `let` to create an empty `currentTask` object.
+
+```js
+assert.match(code, /let\s+currentTask\s*=\s*\{\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
new file mode 100644
index 00000000000..7eba2896bf4
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -0,0 +1,307 @@
+---
+id: 64e4e78a7ea4a168de4e6a38
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Now, you will work on opening and closing the form modal.
+
+Add a `click` event listener to the `openTaskFormBtn` variable, and then use `classList` to toggle the `hidden` class on the `taskForm` element.
+
+Now you can click on the "Add new Task" button and see the form modal.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `openTaskFormBtn` variable.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax, then use `classList` property and it's `toggle` method on the `taskForm`, to toggle the class `hidden`. Don't use curly braces.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*taskForm\.classList\.toggle\(\1hidden\1\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
new file mode 100644
index 00000000000..6a29158134e
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
@@ -0,0 +1,309 @@
+---
+id: 64e4e7bbedb22d6939001ad3
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Add a `click` event listener to the `closeTaskFormBtn` variable, then use the `showModal()` method on your `confirmCloseDialog` variable. This will display a modal with the `Discard` and `Cancel` buttons.
+
+`showModal()` is a method associated with the HTML `dialog` element. It is used to display a modal dialog box on a web page.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `closeTaskFormBtn` variable.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `showModal()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(["'`]click["'`],\s*\(.*\)\s*=>\s*{?\s*confirmCloseDialog\.showModal\(\);?\s*}?\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
new file mode 100644
index 00000000000..311984043a0
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
@@ -0,0 +1,316 @@
+---
+id: 64e4eaaa9070a66aecbfe603
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+If the user clicks the `Cancel` button, you want to cancel the process (close the modal showing the two buttons) so the user can continue editing.
+
+Add a `click` event listener to the `cancelBtn` element, then use the `close()` method on the `confirmCloseDialog` variable.
+
+`close()` is a method of the window object you can use to close the current window, or a modal you create with the `dialog` element.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `cancelBtn` variable.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `close()` method on `confirmCloseDialog`. Don't use curly braces.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*confirmCloseDialog\.close\(\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
new file mode 100644
index 00000000000..66a40c9771b
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
@@ -0,0 +1,327 @@
+---
+id: 64e4ebc7eabc5a6babd479cd
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+If the user clicks the `Discard` button, you want to close the modal showing the `Cancel` and `Discard` buttons, then hide the form modal.
+
+Add a click event listener to `discardBtn`, then use the `close()` method on the `confirmCloseDialog` variable. Also, use `classList` to toggle the class `hidden` on `taskForm` so the form modal will close too.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `discardBtn` variable.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{/)
+```
+
+Your event listener should use the `close()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?/)
+```
+
+Your event listener should use `classList` to toggle the class `hidden` on `taskForm`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?\s*taskForm\.classList\.toggle\(\1hidden\1\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
new file mode 100644
index 00000000000..f4002dc0937
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
@@ -0,0 +1,326 @@
+---
+id: 64e4ecd7735a566c9266a338
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Now that you've worked on opening and closing the modal, it's time to get the values from the input fields, save them into the `taskData` array, and display them on the page.
+
+To start, add a `submit` event listener to your `taskForm` element and pass in `e` as the parameter of your arrow function. Inside the curly braces, use the `preventDefault()` method to stop the browser from refreshing the page after submitting the form.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `taskForm` variable.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(/)
+```
+
+Your event listener should listen for a `submit` event.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces with `e` as the parameter.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{/)
+```
+
+You should use the `e.preventDefault()` method to stop the browser from reloading the page.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{\s*e\.preventDefault\(\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
new file mode 100644
index 00000000000..148e52f3e93
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
@@ -0,0 +1,337 @@
+---
+id: 64e4eec13546c06d61a63d59
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+You need to determine whether the task being added already exists or not. If it doesn't exist, you will add it, and if it already exists, you will set it up for editing. You can use the `findIndex()` method to accomplish this.
+
+`findIndex` is an array method that lets find the index of the first element in an array that satisfies a given testing function.
+
+Here's an example:
+
+```js
+const numbers = [3, 1, 5, 6, 10, 9, 8];
+const firstEvenNumIndex = numbers.findIndex((num) => num % 2 === 0);
+
+console.log(firstEvenNumIndex); // Output: 3 – because the first even number (6) is at index 3
+```
+
+Declare a `dataArrIndex` variable using `const` and set it to the result of the `findIndex()` method applied to the `taskData` array. Utilize arrow syntax to provide a callback function with `item` as the parameter, and within the callback, check if the `id` property of `item` is equal to the `id` property of `currentTask`.
+
+If the task exists, this returns the index, and if it doesn't exist, it returns `-1`.
+
+# --hints--
+
+You should use `const` to declare a `dataArrIndex` variable and set it to `taskData.findIndex()`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(/)
+```
+
+You should pass in `item` as the parameter of the arrow function callback. Don't use curly braces.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?/)
+```
+
+Your arrow function callback should check if `item.id === currentTask.id`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?\s*=>\s*item.id\s*===\s*currentTask.id\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
new file mode 100644
index 00000000000..10826de6f17
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
@@ -0,0 +1,340 @@
+---
+id: 64e4f01d6c72086e016a8626
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Next, retrieve the values from the input fields and store them in a `taskObj` object. Each task should also have a unique `id`.
+
+Create a `taskObj` object with an `id` property as the first property. For the value of the `id` property, retrieve the value of the `titleInput` field, convert it to lowercase, and then use the `split()` and `join()` methods to hyphenate it.
+
+Make sure all of those are in template literals because you need the `id` property value as a string.
+
+# --hints--
+
+You should use `const` to create a `taskObj` object.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*/)
+```
+
+Your `taskObj` object should have a key of `id`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id/)
+```
+
+You should use template strings to get `titleInput.value` as the value of your `id` key and convert it to lowercase.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)/)
+```
+
+You should use `.split(' ')` on `titleInput.value.toLowerCase()`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)/)
+```
+
+You should use `.join('-')` on `titleInput.value.toLowerCase().split(' ')`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)\.join\(\1-\1\)\}`,?\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
new file mode 100644
index 00000000000..764de1b0918
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
@@ -0,0 +1,327 @@
+---
+id: 64ec89ee549ecf802de2b3e2
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Retrieve the values from the `titleInput`, `dateInput`, and `descriptionInput` fields, and then save them in the properties `title`, `date`, and `description` of the `taskObj` object.
+
+# --hints--
+
+You should get the value of `titleInput` and save it in a `title` key.
+
+```js
+assert.match(code, /title:\s*titleInput\.value,/)
+```
+
+You should get the value of `dateInput` and save it in a `date` key.
+
+```js
+assert.match(code, /date:\s*dateInput\.value,/)
+```
+
+You should get the value of `descriptionInput` and save it in a `description` key.
+
+```js
+assert.match(code, /description:\s*descriptionInput\.value,?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`,
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ };
+});
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
new file mode 100644
index 00000000000..3d009188d81
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
@@ -0,0 +1,332 @@
+---
+id: 64ec8f717b261e824d82d6a5
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Now that you have obtained the values from the input fields and generated an `id`, you want to add them to your `taskData` array to keep track of each task. However, you should only do this if the task is new. If the task already exists, you will set it up for editing. This is why you have the `dataArrIndex` variable, which provides the index of each task.
+
+Create an `if` statement with the condition `dataArrIndex === -1`. Within the `if` statement, use the `unshift()` method to add the `taskObj` object to the beginning of the `taskData` array.
+
+`unshift()` is an array method that is used to add one or more elements to the beginning of an array.
+
+**N.B:** Try adding a task and log `taskData` to the console to see what it looks like.
+
+# --hints--
+
+You should create an `if` statement with the condition `dataArrIndex === -1`.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{/)
+```
+
+Your `if` statement should have `taskData.unshift(taskObj)` in it's body.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{\s*taskData\.unshift\(taskObj\);?\s*\}/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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,
+ };
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
new file mode 100644
index 00000000000..f1202bb93fe
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
@@ -0,0 +1,331 @@
+---
+id: 64ec9145e424d8835a4e0f28
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have saved the task in the `taskData` array, you should display the task on the page by looping through it.
+
+Use `forEach()` on `taskData`, then destructure `id`, `title`, `date`, `description` as the parameters. Don't return anything yet.
+
+# --hints--
+
+You should use `forEach()` on `taskData`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*/)
+```
+
+You should destructure `id`, `title`, `date`, `description` as the parameters of the callback of your `forEach()`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
new file mode 100644
index 00000000000..06bdd7c6ae5
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
@@ -0,0 +1,336 @@
+---
+id: 64ec9282cd547785258cecf2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Using arrow syntax, create an implicit return and use addition assignment to set the `innerHTML` of `tasksContainer` to empty backticks.
+
+# --hints--
+
+You should not alter the existing `taskData.forEach()` and the values you destructured.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+You should use arrow syntax and attach `innerHTML` to `tasksContainer`.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\(\s*tasksContainer\.innerHTML\s*\))?/)
+```
+
+You should use addition assignment to set the `innerHTML` of `tasksContainer` to an empty pair of backticks.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\s*\(?tasksContainer\.innerHTML\s*\+=\s*`\s*`\)?)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+ taskData.forEach(({id, title, date, description}));
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
new file mode 100644
index 00000000000..b5115f99a51
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
@@ -0,0 +1,333 @@
+---
+id: 64ec9343769e8f85c1e17e05
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Create a `div` element with the class of `task`. Utilize template strings to set the `id` attribute of the `div` to the `id` you destructured from the task data.
+
+# --hints--
+
+You should create a `div` element with the class `task`.
+
+```js
+assert.match(code, /\s*<\/div>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
new file mode 100644
index 00000000000..81dd3530420
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
@@ -0,0 +1,348 @@
+---
+id: 64ec94f0de20c086e09b0fc3
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Create a `p` element and use template strings to set its content to the `title` you destructured. Right before the content of the `p` element, create a `strong` element with the text `Title:`.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+assert.match(code, //)
+```
+
+You should interpolate `${title}` as the text of your `p` element.
+
+```js
+assert.match(code, /
.*\$\{title\}<\/p>/)
+```
+
+You should create a `strong` element after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)/)
+```
+
+Your `strong` element should have the text `Title:`.
+
+```js
+assert.match(code, /(?<=)Title:\s*<\/strong>\s*/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
new file mode 100644
index 00000000000..4820d100d4d
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
@@ -0,0 +1,336 @@
+---
+id: 64ec959a76336c8767f5cd4d
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Similarly to the previous step, create another `p` element, and interpolate the `date` you destructured as the text content. Inside this paragraph, create a `strong` element with the text `Date:`.
+
+# --hints--
+
+You should create a `p` element and interpolate `${date}` as the text.
+
+```js
+assert.match(code, /.*\$\{date\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Date:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Date:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Edit<\/button/)
+```
+
+You should create a `button` element of type `button` a class `btn` and `Delete` as the text, in that order.
+
+```js
+assert.match(code, /Delete<\/button/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+const reset = () => {
+
+}
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Delete ')
+assert.notMatch(splitter[1], /taskForm\.classList\.toggle\(("|')hidden\1\);?/)
+```
+
+You should call the `reset` function.
+
+```js
+assert.match(code, /reset\(\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+--fcc-editable-region--
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+
+});
+--fcc-editable-region--
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 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;
+--fcc-editable-region--
+ confirmCloseDialog.showModal();
+--fcc-editable-region--
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
\s*Title:<\/strong>\s*\$\{title\}<\/p>\s*Date:<\/strong>\s*\$\{date\}<\/p>\s*Description:<\/strong>\s*\$\{description\}<\/p>\s*Edit<\/button>\s*Delete<\/button>\s*<\/div>\s*`\)\s*\);?\s*\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Edit<\/button>/)
+```
+
+You should add `onclick="deleteTask(this)"` as the first attribute of the delete button.
+
+```js
+assert.match(code, /Delete<\/button>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
Edit
+
Delete
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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,
+ };
+
+ --fcc-editable-region--
+ if (dataArrIndex === -1) {
+ taskData.unshift(taskObj);
+ }
+
+ --fcc-editable-region--
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+const taskData = [];
+--fcc-editable-region--
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(' ').join('-')}`,
+ };
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
new file mode 100644
index 00000000000..0c9fbc152b7
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
@@ -0,0 +1,337 @@
+---
+id: 65099dbd8f137d58e5c0ff16
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Create one more `p` element and interpolate the `description` you destructured as the text. Also, create a `strong` element inside the paragraph with the text `Description:`.
+
+# --hints--
+
+You should create a `p` element with `${description}` as the text.
+
+```js
+assert.match(code, /.*\$\{description\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Description:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Description:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
和这个视频配套的 Colab 笔记本 。
-这里有一个额外的 Colab 笔记本，它向你展示了将许多这些利息和付款公式图放入 Python 函数的一种方法 。同时你将看到一个使用一些公式输出结果的例子，注意一个趋势，并学习其他公式来分析模式。
+Here is an additional Colab notebook that shows you one way to put many of these interest and payment formulas into Python functions. Also you will see an example of using some formulas to output results, notice a trend, and follow up with other formulas to analyze patterns.
# --question--
diff --git a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md b/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
index 39ab831dad7..144796de1b0 100644
--- a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
+++ b/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
@@ -71,8 +71,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md b/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
index 53ae7b50350..871e1408079 100644
--- a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
+++ b/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
@@ -73,7 +73,7 @@ substringDivisibility(5);
```js
function substringDivisibility(n) {
- function isSubDivisable(digits) {
+ function isSubDivisible(digits) {
const factors = [2, 3, 5, 7, 11, 13, 17];
for (let i = 1; i < digits.length - 2; i++) {
@@ -108,17 +108,17 @@ function substringDivisibility(n) {
}
const allowedDigits = [...new Array(n + 1).keys()];
- const divisablePandigitals = [];
+ const divisiblePandigitals = [];
heapsPermutations(
allowedDigits.length,
allowedDigits,
- isSubDivisable,
- divisablePandigitals
+ isSubDivisible,
+ divisiblePandigitals
);
let sum = 0;
- for (let i = 0; i < divisablePandigitals.length; i++) {
- sum += divisablePandigitals[i];
+ for (let i = 0; i < divisiblePandigitals.length; i++) {
+ sum += divisiblePandigitals[i];
}
return sum;
diff --git a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md b/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
index 7cd5bc67b14..2d583a52355 100644
--- a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
+++ b/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
@@ -67,8 +67,8 @@ class PrimeSeive {
const prime = 2 * i + 3;
primes.push(prime);
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
@@ -101,10 +101,10 @@ class PrimeSeive {
};
function consecutivePrimeSum(limit) {
- // Initalize seive
+ // Initialize seive
const primeSeive = new PrimeSeive(limit);
- // Initalize for longest sum < 100
+ // Initialize for longest sum < 100
let bestPrime = 41;
let bestI = 0;
let bestJ = 5;
diff --git a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md b/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
index cdbfc3e568b..5b55ddd8079 100644
--- a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
+++ b/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
@@ -67,8 +67,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md b/curriculum/challenges/chinese/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
index 78c29aa7952..4fa15980a0d 100644
--- a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
+++ b/curriculum/challenges/chinese/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
@@ -31,10 +31,10 @@ For $1 ≤ k ≤ 200$, find $\sum{m(k)}$.
# --hints--
-`efficientExponentation()` should return `1582`.
+`efficientExponentiation()` should return `1582`.
```js
-assert.strictEqual(efficientExponentation(), 1582);
+assert.strictEqual(efficientExponentiation(), 1582);
```
# --seed--
@@ -42,12 +42,12 @@ assert.strictEqual(efficientExponentation(), 1582);
## --seed-contents--
```js
-function efficientExponentation() {
+function efficientExponentiation() {
return true;
}
-efficientExponentation();
+efficientExponentiation();
```
# --solutions--
diff --git a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md b/curriculum/challenges/chinese/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
index 49d59948762..e402ff347c5 100644
--- a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
+++ b/curriculum/challenges/chinese/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
@@ -67,8 +67,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md b/curriculum/challenges/chinese/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
index 596f703da28..b843f6f2be2 100644
--- a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
+++ b/curriculum/challenges/chinese/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
@@ -35,7 +35,7 @@ concealedSquare();
```js
// Check if n**2 matches the pattern
-function squareMatchs(n) {
+function squareMatches(n) {
// Need BigInt due to size of values
let nSquared = (BigInt(n) * BigInt(n)).toString();
@@ -55,8 +55,8 @@ function concealedSquare() {
for (let x = maxSquareRoot; x >= minSquareRoot; x -= 10) {
// Note: 3*3 = 9 and 7*7 = 49 are only trailing digits
// that can produce 9 as trailing digit in square
- if (squareMatchs(x + 3)) return (x + 3)*10;
- if (squareMatchs(x + 7)) return (x + 7)*10;
+ if (squareMatches(x + 3)) return (x + 3)*10;
+ if (squareMatches(x + 7)) return (x + 7)*10;
}
return -1;
}
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index f84d9c20e2d..0b95ccac3a2 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -54,7 +54,24 @@ assert.match(code, /myStorage\.car\.inside/);
`gloveBoxContents` debe ser declarado como `const`.
```js
-assert.match(code, /const\s+gloveBoxContents\s*=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]|const\s*{\s*('|")glove box\2:\s*gloveBoxContents\s*}\s*=\s*myStorage\.car\.inside;/);
+assert.match(code, /const\s+gloveBoxContents\s*=/);
+```
+
+You should not change the `myStorage` object.
+
+```js
+const expectedMyStorage = {
+ "car":{
+ "inside":{
+ "glove box":"maps",
+ "passenger seat":"crumbs"
+ },
+ "outside":{
+ "trunk":"jack"
+ }
+ }
+};
+assert.deepStrictEqual(myStorage, expectedMyStorage);
```
# --seed--
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
index f877b9259d4..f8f38eec4ce 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
@@ -10,7 +10,7 @@ dashedName: catch-misspelled-variable-and-function-names
Los métodos `console.log()` y `typeof` son las dos formas principales de comprobar los valores intermedios y los tipos de salida de un programa. Ahora es el momento de entrar en las formas comúnes que adoptan los errores (bugs). Un problema a nivel de sintaxis con el que las personas que escriben rápido pueden simpatizar es el humilde error ortográfico.
-Los caracteres transpuestos, omitidos o mal escritos en el nombre de una variable o función harán que el navegador busque un objeto que no existe, y se queje en forma de error de referencia. Los nombres de variables y funciones de JavaScript distinguen entre mayúsculas y minúsculas.
+Transposed, missing, or miscapitalized characters in a variable or function name will have the browser looking for an object that doesn't exist - and complain in the form of a reference error. Los nombres de variables y funciones de JavaScript distinguen entre mayúsculas y minúsculas.
# --instructions--
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
index ebc50c90d83..7fd4cc16a51 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
@@ -58,8 +58,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/issue-tracker.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/issue-tracker.md
index 5d0dc632291..e273fb11a19 100644
--- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/issue-tracker.md
+++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/issue-tracker.md
@@ -231,13 +231,13 @@ async (getUserInput) => {
};
const url = getUserInput('url') + '/api/issues/fcc-project';
const itemToUpdate = await $.post(url, initialData);
- const updateSucccess = await $.ajax({
+ const updateSuccess = await $.ajax({
url: url,
type: 'PUT',
data: { _id: itemToUpdate._id, issue_text: 'New Issue Text' }
});
- assert.isObject(updateSucccess);
- assert.deepEqual(updateSucccess, {
+ assert.isObject(updateSuccess);
+ assert.deepEqual(updateSuccess, {
result: 'successfully updated',
_id: itemToUpdate._id
});
diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/24-game.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/24-game.md
index ac16df78509..88cdeed88e7 100644
--- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/24-game.md
+++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/24-game.md
@@ -82,7 +82,7 @@ const OPERATORS_ = {
"/": (a, b) => a / b,
}
-const PRECIDENCE_ = {
+const PRECEDENCE_ = {
"+": 1,
"-": 1,
"*": 2,
@@ -114,7 +114,7 @@ function evaluate_(expression) {
case "*":
case "/":
while (stack.length &&
- PRECIDENCE_[c] <= PRECIDENCE_[stack[stack.length-1]]) {
+ PRECEDENCE_[c] <= PRECEDENCE_[stack[stack.length-1]]) {
postfix += stack.pop();
}
stack.push(c);
diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
index 6eca8fa1bd6..36f8c4da04a 100644
--- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
+++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
@@ -175,7 +175,7 @@ function dealFreeCell(seed) {
const rng = FreeCellRNG(seed);
const deck = getDeck();
- const deltCards = [[], [], [], [], [], [], []];
+ const dealtCards = [[], [], [], [], [], [], []];
let currentColumn = 0;
let currentRow = 0;
@@ -195,7 +195,7 @@ function dealFreeCell(seed) {
card = deck.pop();
// Deal this card
- deltCards[currentRow].push(card);
+ dealtCards[currentRow].push(card);
currentColumn += 1;
if (currentColumn === 8) {
currentColumn = 0;
@@ -203,6 +203,6 @@ function dealFreeCell(seed) {
}
}
- return deltCards;
+ return dealtCards;
}
```
diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/department-numbers.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/department-numbers.md
index 1117963ac08..5414cdcf18d 100644
--- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/department-numbers.md
+++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/department-numbers.md
@@ -101,7 +101,7 @@ function combinations(possibleNumbers, total) {
function combinations(possibleNumbers, total) {
let firstNumber;
let secondNumber;
- let thridNumber;
+ let thirdNumber;
const allCombinations = [];
for (let i = 0; i < possibleNumbers.length; i += 1) {
@@ -112,10 +112,10 @@ function combinations(possibleNumbers, total) {
secondNumber = possibleNumbers[j];
if (j !== i && firstNumber + secondNumber <= total) {
- thridNumber = total - firstNumber - secondNumber;
+ thirdNumber = total - firstNumber - secondNumber;
- if (thridNumber !== firstNumber && thridNumber !== secondNumber && possibleNumbers.includes(thridNumber)) {
- allCombinations.push([firstNumber, secondNumber, thridNumber]);
+ if (thirdNumber !== firstNumber && thirdNumber !== secondNumber && possibleNumbers.includes(thirdNumber)) {
+ allCombinations.push([firstNumber, secondNumber, thirdNumber]);
}
}
}
diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/lu-decomposition.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/lu-decomposition.md
index 441680f24fb..a15b238b3be 100644
--- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/lu-decomposition.md
+++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/lu-decomposition.md
@@ -80,7 +80,7 @@ $PA = LU$
# --instructions--
-The task is to implement a routine which will take a square nxn matrix $A$ and return a lower triangular matrix $L$, a upper triangular matrix $U$ and a permutation matrix $P$, so that the above equation is fullfilled. The returned value should be in the form `[L, U, P]`.
+The task is to implement a routine which will take a square nxn matrix $A$ and return a lower triangular matrix $L$, a upper triangular matrix $U$ and a permutation matrix $P$, so that the above equation is fulfilled. The returned value should be in the form `[L, U, P]`.
# --hints--
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
index e9a70cffc9d..72eafa4111f 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
@@ -9,7 +9,7 @@ dashedName: step-82
El pico y las patas del pingüino comparten el mismo `color`.
-Cree una nueva variable CSS personalizada llamada `--penguin-picorna` y reemplace todos los valores de propiedad relevantes con ella.
+Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it.
# --hints--
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
index 6c91e47a3b4..ff36d4c4254 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
@@ -11,7 +11,7 @@ Inside `pick`, use `let` to initialize a variable named `numbers` and set it to
# --hints--
-Your `pick` function should initalize `numbers` to an empty array `[]`.
+Your `pick` function should initialize `numbers` to an empty array `[]`.
```js
assert.match(pick.toString(), /numbers\s*=\s*\[\]/);
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md
new file mode 100644
index 00000000000..4b042aa87ba
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md
@@ -0,0 +1,310 @@
+---
+id: 64e4e4c4ec263b62ae7bf54d
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn how `localStorage` works in JavaScript by building a Todo app. LocalStorage is a web storage feature of JavaScript that lets you persist data by storing the data as a **key:value** pair.
+
+The HTML and CSS for this project have been provided for you. Take a look at the files to get yourself familiarized with them.
+
+Begin by accessing the `task-form`, `confirm-close-dialog`, and `open-task-form-btn` elements with the `getElementById()` method. Save them in the variables `taskForm`, `confirmCloseDialog`, and `openTaskFormBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `task-form` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should assign the `task-form` element to the variable `taskForm`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+taskForm\s*=\s*document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should use `getElementById()` to access the `confirm-close-dialog` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should assign the `confirm-close-dialog` element to the variable `confirmCloseDialog`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+confirmCloseDialog\s*=\s*document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should use `getElementById()` to access the `open-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `open-task-form-btn` element to the variable `openTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+openTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
new file mode 100644
index 00000000000..32310409728
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
@@ -0,0 +1,310 @@
+---
+id: 64e4e6c86954de67a3e44ee3
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+You need to access more elements with the `getElementById()` method. This time you need the `close-task-form-btn`, `add-or-update-task-btn`, and `cancel-btn` elements. Save them in the variables `closeTaskFormBtn`, `addOrUpdateTaskBtn`, and `cancelBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `close-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `close-task-form-btn` element to the variable `closeTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+closeTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `add-or-update-task-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should assign the `add-or-update-task-btn` element to the variable `addOrUpdateTaskBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+addOrUpdateTaskBtn\s*=\s*document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `cancel-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+You should assign the `cancel-btn` element to the variable `cancelBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cancelBtn\s*=\s*document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
new file mode 100644
index 00000000000..17fc6b76517
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
@@ -0,0 +1,313 @@
+---
+id: 64e4e6fe78b5aa67ef2fc3e7
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next, access the `discard-btn`, `tasks-container`, and `title-input` elements using the `getElementById()` method. Save them in variables named `discardBtn`, `tasksContainer`, and `titleInput`, respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `discard-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should assign the `discard-btn` element to the variable `discardBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+discardBtn\s*=\s*document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `tasks-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should assign the `tasks-container` element to the variable `tasksContainer`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+tasksContainer\s*=\s*document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should use `getElementById()` to access the `title-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+You should assign the `title-input` element to the variable `titleInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+titleInput\s*=\s*document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
new file mode 100644
index 00000000000..6e543d36acc
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
@@ -0,0 +1,304 @@
+---
+id: 64e4e7241f52bb682eeb8211
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last set of elements you need to get from the HTML file are the `date-input` and `description-input` elements. Save them in the variables `dateInput` and `descriptionInput` respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `date-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should assign the `date-input` element to the variable `dateInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dateInput\s*=\s*document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should use `getElementById()` to access the `description-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+You should assign the `description-input` element to the variable `descriptionInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+descriptionInput\s*=\s*document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
new file mode 100644
index 00000000000..6f0cd6e9fc4
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
@@ -0,0 +1,296 @@
+---
+id: 64e4e74d0fb4f0687bf4145d
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `taskData` constant and set it to an empty array. This array will store all the tasks along with their associated data, including title, due date, and description. This storage will enable you to keep track of tasks, display them on the page, and save them to `localStorage`.
+
+Use `let` to create a `currentTask` variable and set it to an empty object. This variable will be used to track the state when editing and discarding tasks.
+
+# --hints--
+
+You should create a `taskData` constant set to an empty array.
+
+```js
+assert.match(code, /const\s+taskData\s*=\s*\[\];?/)
+```
+
+You should use `let` to create an empty `currentTask` object.
+
+```js
+assert.match(code, /let\s+currentTask\s*=\s*\{\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
new file mode 100644
index 00000000000..7eba2896bf4
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -0,0 +1,307 @@
+---
+id: 64e4e78a7ea4a168de4e6a38
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Now, you will work on opening and closing the form modal.
+
+Add a `click` event listener to the `openTaskFormBtn` variable, and then use `classList` to toggle the `hidden` class on the `taskForm` element.
+
+Now you can click on the "Add new Task" button and see the form modal.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `openTaskFormBtn` variable.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax, then use `classList` property and it's `toggle` method on the `taskForm`, to toggle the class `hidden`. Don't use curly braces.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*taskForm\.classList\.toggle\(\1hidden\1\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
new file mode 100644
index 00000000000..6a29158134e
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
@@ -0,0 +1,309 @@
+---
+id: 64e4e7bbedb22d6939001ad3
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Add a `click` event listener to the `closeTaskFormBtn` variable, then use the `showModal()` method on your `confirmCloseDialog` variable. This will display a modal with the `Discard` and `Cancel` buttons.
+
+`showModal()` is a method associated with the HTML `dialog` element. It is used to display a modal dialog box on a web page.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `closeTaskFormBtn` variable.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `showModal()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(["'`]click["'`],\s*\(.*\)\s*=>\s*{?\s*confirmCloseDialog\.showModal\(\);?\s*}?\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
new file mode 100644
index 00000000000..311984043a0
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
@@ -0,0 +1,316 @@
+---
+id: 64e4eaaa9070a66aecbfe603
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+If the user clicks the `Cancel` button, you want to cancel the process (close the modal showing the two buttons) so the user can continue editing.
+
+Add a `click` event listener to the `cancelBtn` element, then use the `close()` method on the `confirmCloseDialog` variable.
+
+`close()` is a method of the window object you can use to close the current window, or a modal you create with the `dialog` element.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `cancelBtn` variable.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `close()` method on `confirmCloseDialog`. Don't use curly braces.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*confirmCloseDialog\.close\(\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
new file mode 100644
index 00000000000..66a40c9771b
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
@@ -0,0 +1,327 @@
+---
+id: 64e4ebc7eabc5a6babd479cd
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+If the user clicks the `Discard` button, you want to close the modal showing the `Cancel` and `Discard` buttons, then hide the form modal.
+
+Add a click event listener to `discardBtn`, then use the `close()` method on the `confirmCloseDialog` variable. Also, use `classList` to toggle the class `hidden` on `taskForm` so the form modal will close too.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `discardBtn` variable.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{/)
+```
+
+Your event listener should use the `close()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?/)
+```
+
+Your event listener should use `classList` to toggle the class `hidden` on `taskForm`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?\s*taskForm\.classList\.toggle\(\1hidden\1\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
new file mode 100644
index 00000000000..f4002dc0937
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
@@ -0,0 +1,326 @@
+---
+id: 64e4ecd7735a566c9266a338
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Now that you've worked on opening and closing the modal, it's time to get the values from the input fields, save them into the `taskData` array, and display them on the page.
+
+To start, add a `submit` event listener to your `taskForm` element and pass in `e` as the parameter of your arrow function. Inside the curly braces, use the `preventDefault()` method to stop the browser from refreshing the page after submitting the form.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `taskForm` variable.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(/)
+```
+
+Your event listener should listen for a `submit` event.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces with `e` as the parameter.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{/)
+```
+
+You should use the `e.preventDefault()` method to stop the browser from reloading the page.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{\s*e\.preventDefault\(\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
new file mode 100644
index 00000000000..148e52f3e93
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
@@ -0,0 +1,337 @@
+---
+id: 64e4eec13546c06d61a63d59
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+You need to determine whether the task being added already exists or not. If it doesn't exist, you will add it, and if it already exists, you will set it up for editing. You can use the `findIndex()` method to accomplish this.
+
+`findIndex` is an array method that lets find the index of the first element in an array that satisfies a given testing function.
+
+Here's an example:
+
+```js
+const numbers = [3, 1, 5, 6, 10, 9, 8];
+const firstEvenNumIndex = numbers.findIndex((num) => num % 2 === 0);
+
+console.log(firstEvenNumIndex); // Output: 3 – because the first even number (6) is at index 3
+```
+
+Declare a `dataArrIndex` variable using `const` and set it to the result of the `findIndex()` method applied to the `taskData` array. Utilize arrow syntax to provide a callback function with `item` as the parameter, and within the callback, check if the `id` property of `item` is equal to the `id` property of `currentTask`.
+
+If the task exists, this returns the index, and if it doesn't exist, it returns `-1`.
+
+# --hints--
+
+You should use `const` to declare a `dataArrIndex` variable and set it to `taskData.findIndex()`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(/)
+```
+
+You should pass in `item` as the parameter of the arrow function callback. Don't use curly braces.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?/)
+```
+
+Your arrow function callback should check if `item.id === currentTask.id`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?\s*=>\s*item.id\s*===\s*currentTask.id\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
new file mode 100644
index 00000000000..10826de6f17
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
@@ -0,0 +1,340 @@
+---
+id: 64e4f01d6c72086e016a8626
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Next, retrieve the values from the input fields and store them in a `taskObj` object. Each task should also have a unique `id`.
+
+Create a `taskObj` object with an `id` property as the first property. For the value of the `id` property, retrieve the value of the `titleInput` field, convert it to lowercase, and then use the `split()` and `join()` methods to hyphenate it.
+
+Make sure all of those are in template literals because you need the `id` property value as a string.
+
+# --hints--
+
+You should use `const` to create a `taskObj` object.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*/)
+```
+
+Your `taskObj` object should have a key of `id`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id/)
+```
+
+You should use template strings to get `titleInput.value` as the value of your `id` key and convert it to lowercase.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)/)
+```
+
+You should use `.split(' ')` on `titleInput.value.toLowerCase()`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)/)
+```
+
+You should use `.join('-')` on `titleInput.value.toLowerCase().split(' ')`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)\.join\(\1-\1\)\}`,?\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
new file mode 100644
index 00000000000..764de1b0918
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
@@ -0,0 +1,327 @@
+---
+id: 64ec89ee549ecf802de2b3e2
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Retrieve the values from the `titleInput`, `dateInput`, and `descriptionInput` fields, and then save them in the properties `title`, `date`, and `description` of the `taskObj` object.
+
+# --hints--
+
+You should get the value of `titleInput` and save it in a `title` key.
+
+```js
+assert.match(code, /title:\s*titleInput\.value,/)
+```
+
+You should get the value of `dateInput` and save it in a `date` key.
+
+```js
+assert.match(code, /date:\s*dateInput\.value,/)
+```
+
+You should get the value of `descriptionInput` and save it in a `description` key.
+
+```js
+assert.match(code, /description:\s*descriptionInput\.value,?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`,
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ };
+});
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
new file mode 100644
index 00000000000..3d009188d81
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
@@ -0,0 +1,332 @@
+---
+id: 64ec8f717b261e824d82d6a5
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Now that you have obtained the values from the input fields and generated an `id`, you want to add them to your `taskData` array to keep track of each task. However, you should only do this if the task is new. If the task already exists, you will set it up for editing. This is why you have the `dataArrIndex` variable, which provides the index of each task.
+
+Create an `if` statement with the condition `dataArrIndex === -1`. Within the `if` statement, use the `unshift()` method to add the `taskObj` object to the beginning of the `taskData` array.
+
+`unshift()` is an array method that is used to add one or more elements to the beginning of an array.
+
+**N.B:** Try adding a task and log `taskData` to the console to see what it looks like.
+
+# --hints--
+
+You should create an `if` statement with the condition `dataArrIndex === -1`.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{/)
+```
+
+Your `if` statement should have `taskData.unshift(taskObj)` in it's body.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{\s*taskData\.unshift\(taskObj\);?\s*\}/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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,
+ };
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
new file mode 100644
index 00000000000..f1202bb93fe
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
@@ -0,0 +1,331 @@
+---
+id: 64ec9145e424d8835a4e0f28
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have saved the task in the `taskData` array, you should display the task on the page by looping through it.
+
+Use `forEach()` on `taskData`, then destructure `id`, `title`, `date`, `description` as the parameters. Don't return anything yet.
+
+# --hints--
+
+You should use `forEach()` on `taskData`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*/)
+```
+
+You should destructure `id`, `title`, `date`, `description` as the parameters of the callback of your `forEach()`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
new file mode 100644
index 00000000000..06bdd7c6ae5
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
@@ -0,0 +1,336 @@
+---
+id: 64ec9282cd547785258cecf2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Using arrow syntax, create an implicit return and use addition assignment to set the `innerHTML` of `tasksContainer` to empty backticks.
+
+# --hints--
+
+You should not alter the existing `taskData.forEach()` and the values you destructured.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+You should use arrow syntax and attach `innerHTML` to `tasksContainer`.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\(\s*tasksContainer\.innerHTML\s*\))?/)
+```
+
+You should use addition assignment to set the `innerHTML` of `tasksContainer` to an empty pair of backticks.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\s*\(?tasksContainer\.innerHTML\s*\+=\s*`\s*`\)?)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+ taskData.forEach(({id, title, date, description}));
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
new file mode 100644
index 00000000000..b5115f99a51
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
@@ -0,0 +1,333 @@
+---
+id: 64ec9343769e8f85c1e17e05
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Create a `div` element with the class of `task`. Utilize template strings to set the `id` attribute of the `div` to the `id` you destructured from the task data.
+
+# --hints--
+
+You should create a `div` element with the class `task`.
+
+```js
+assert.match(code, /\s*<\/div>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
new file mode 100644
index 00000000000..81dd3530420
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
@@ -0,0 +1,348 @@
+---
+id: 64ec94f0de20c086e09b0fc3
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Create a `p` element and use template strings to set its content to the `title` you destructured. Right before the content of the `p` element, create a `strong` element with the text `Title:`.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+assert.match(code, //)
+```
+
+You should interpolate `${title}` as the text of your `p` element.
+
+```js
+assert.match(code, /
.*\$\{title\}<\/p>/)
+```
+
+You should create a `strong` element after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)/)
+```
+
+Your `strong` element should have the text `Title:`.
+
+```js
+assert.match(code, /(?<=)Title:\s*<\/strong>\s*/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
new file mode 100644
index 00000000000..4820d100d4d
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
@@ -0,0 +1,336 @@
+---
+id: 64ec959a76336c8767f5cd4d
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Similarly to the previous step, create another `p` element, and interpolate the `date` you destructured as the text content. Inside this paragraph, create a `strong` element with the text `Date:`.
+
+# --hints--
+
+You should create a `p` element and interpolate `${date}` as the text.
+
+```js
+assert.match(code, /.*\$\{date\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Date:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Date:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Edit<\/button/)
+```
+
+You should create a `button` element of type `button` a class `btn` and `Delete` as the text, in that order.
+
+```js
+assert.match(code, /Delete<\/button/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+const reset = () => {
+
+}
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Delete ')
+assert.notMatch(splitter[1], /taskForm\.classList\.toggle\(("|')hidden\1\);?/)
+```
+
+You should call the `reset` function.
+
+```js
+assert.match(code, /reset\(\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+--fcc-editable-region--
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+
+});
+--fcc-editable-region--
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 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;
+--fcc-editable-region--
+ confirmCloseDialog.showModal();
+--fcc-editable-region--
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
\s*Title:<\/strong>\s*\$\{title\}<\/p>\s*Date:<\/strong>\s*\$\{date\}<\/p>\s*Description:<\/strong>\s*\$\{description\}<\/p>\s*Edit<\/button>\s*Delete<\/button>\s*<\/div>\s*`\)\s*\);?\s*\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Edit<\/button>/)
+```
+
+You should add `onclick="deleteTask(this)"` as the first attribute of the delete button.
+
+```js
+assert.match(code, /Delete<\/button>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
Edit
+
Delete
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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,
+ };
+
+ --fcc-editable-region--
+ if (dataArrIndex === -1) {
+ taskData.unshift(taskObj);
+ }
+
+ --fcc-editable-region--
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+const taskData = [];
+--fcc-editable-region--
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(' ').join('-')}`,
+ };
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
new file mode 100644
index 00000000000..0c9fbc152b7
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
@@ -0,0 +1,337 @@
+---
+id: 65099dbd8f137d58e5c0ff16
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Create one more `p` element and interpolate the `description` you destructured as the text. Also, create a `strong` element inside the paragraph with the text `Description:`.
+
+# --hints--
+
+You should create a `p` element with `${description}` as the text.
+
+```js
+assert.match(code, /.*\$\{description\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Description:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Description:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
Colab notebook to go along with this video.
-Here is an additional Colab notebook that shows you one way to put many of these interest and payment forumlas into Python functions. Also you will see an example of using some formulas to output results, notice a trend, and follow up with other formulas to analyze patterns.
+Here is an additional Colab notebook that shows you one way to put many of these interest and payment formulas into Python functions. Also you will see an example of using some formulas to output results, notice a trend, and follow up with other formulas to analyze patterns.
# --question--
diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
index 39ab831dad7..144796de1b0 100644
--- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
+++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
@@ -71,8 +71,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
index 53ae7b50350..871e1408079 100644
--- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
+++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
@@ -73,7 +73,7 @@ substringDivisibility(5);
```js
function substringDivisibility(n) {
- function isSubDivisable(digits) {
+ function isSubDivisible(digits) {
const factors = [2, 3, 5, 7, 11, 13, 17];
for (let i = 1; i < digits.length - 2; i++) {
@@ -108,17 +108,17 @@ function substringDivisibility(n) {
}
const allowedDigits = [...new Array(n + 1).keys()];
- const divisablePandigitals = [];
+ const divisiblePandigitals = [];
heapsPermutations(
allowedDigits.length,
allowedDigits,
- isSubDivisable,
- divisablePandigitals
+ isSubDivisible,
+ divisiblePandigitals
);
let sum = 0;
- for (let i = 0; i < divisablePandigitals.length; i++) {
- sum += divisablePandigitals[i];
+ for (let i = 0; i < divisiblePandigitals.length; i++) {
+ sum += divisiblePandigitals[i];
}
return sum;
diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
index 7cd5bc67b14..2d583a52355 100644
--- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
+++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
@@ -67,8 +67,8 @@ class PrimeSeive {
const prime = 2 * i + 3;
primes.push(prime);
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
@@ -101,10 +101,10 @@ class PrimeSeive {
};
function consecutivePrimeSum(limit) {
- // Initalize seive
+ // Initialize seive
const primeSeive = new PrimeSeive(limit);
- // Initalize for longest sum < 100
+ // Initialize for longest sum < 100
let bestPrime = 41;
let bestI = 0;
let bestJ = 5;
diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
index cdbfc3e568b..5b55ddd8079 100644
--- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
+++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
@@ -67,8 +67,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
index 78c29aa7952..4fa15980a0d 100644
--- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
+++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
@@ -31,10 +31,10 @@ For $1 ≤ k ≤ 200$, find $\sum{m(k)}$.
# --hints--
-`efficientExponentation()` should return `1582`.
+`efficientExponentiation()` should return `1582`.
```js
-assert.strictEqual(efficientExponentation(), 1582);
+assert.strictEqual(efficientExponentiation(), 1582);
```
# --seed--
@@ -42,12 +42,12 @@ assert.strictEqual(efficientExponentation(), 1582);
## --seed-contents--
```js
-function efficientExponentation() {
+function efficientExponentiation() {
return true;
}
-efficientExponentation();
+efficientExponentiation();
```
# --solutions--
diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
index 49d59948762..e402ff347c5 100644
--- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
+++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
@@ -67,8 +67,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
index 596f703da28..b843f6f2be2 100644
--- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
+++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
@@ -35,7 +35,7 @@ concealedSquare();
```js
// Check if n**2 matches the pattern
-function squareMatchs(n) {
+function squareMatches(n) {
// Need BigInt due to size of values
let nSquared = (BigInt(n) * BigInt(n)).toString();
@@ -55,8 +55,8 @@ function concealedSquare() {
for (let x = maxSquareRoot; x >= minSquareRoot; x -= 10) {
// Note: 3*3 = 9 and 7*7 = 49 are only trailing digits
// that can produce 9 as trailing digit in square
- if (squareMatchs(x + 3)) return (x + 3)*10;
- if (squareMatchs(x + 7)) return (x + 7)*10;
+ if (squareMatches(x + 3)) return (x + 3)*10;
+ if (squareMatches(x + 7)) return (x + 7)*10;
}
return -1;
}
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index e7a58ff65e8..343b845bc38 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -54,7 +54,24 @@ assert.match(code, /myStorage\.car\.inside/);
`gloveBoxContents` sollte mit `const` deklariert werden.
```js
-assert.match(code, /const\s+gloveBoxContents\s*=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]|const\s*{\s*('|")glove box\2:\s*gloveBoxContents\s*}\s*=\s*myStorage\.car\.inside;/);
+assert.match(code, /const\s+gloveBoxContents\s*=/);
+```
+
+You should not change the `myStorage` object.
+
+```js
+const expectedMyStorage = {
+ "car":{
+ "inside":{
+ "glove box":"maps",
+ "passenger seat":"crumbs"
+ },
+ "outside":{
+ "trunk":"jack"
+ }
+ }
+};
+assert.deepStrictEqual(myStorage, expectedMyStorage);
```
# --seed--
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
index 86feb017e67..3878e5dffe1 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
@@ -10,7 +10,7 @@ dashedName: catch-misspelled-variable-and-function-names
Die Methoden `console.log()` und `typeof` sind die beiden wichtigsten Methoden, um Zwischenwerte und Typen von Programmausgaben zu überprüfen. Jetzt ist es an der Zeit, sich mit den häufigsten Formen von Bugs zu beschäftigen. Ein Problem auf der Ebene der Syntax, mit dem schnelle Tipper mitfühlen können, ist der einfache Rechtschreibfehler.
-Vertauschte, fehlende oder falsch großgeschriebene Zeichen in einem Variablen- oder Funktionsnamen führen dazu, dass der Browser nach einem Objekt sucht, das nicht existiert – und sich in Form eines Referenzfehlers beschwert. Bei JavaScript-Variablen- und Funktionsnamen wird zwischen Groß- und Kleinschreibung unterschieden.
+Transposed, missing, or miscapitalized characters in a variable or function name will have the browser looking for an object that doesn't exist - and complain in the form of a reference error. Bei JavaScript-Variablen- und Funktionsnamen wird zwischen Groß- und Kleinschreibung unterschieden.
# --instructions--
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
index 55f9a6c7327..199c6637ef6 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
@@ -58,8 +58,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/issue-tracker.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/issue-tracker.md
index a00a9bf9508..80793a48aa2 100644
--- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/issue-tracker.md
+++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/issue-tracker.md
@@ -231,13 +231,13 @@ async (getUserInput) => {
};
const url = getUserInput('url') + '/api/issues/fcc-project';
const itemToUpdate = await $.post(url, initialData);
- const updateSucccess = await $.ajax({
+ const updateSuccess = await $.ajax({
url: url,
type: 'PUT',
data: { _id: itemToUpdate._id, issue_text: 'New Issue Text' }
});
- assert.isObject(updateSucccess);
- assert.deepEqual(updateSucccess, {
+ assert.isObject(updateSuccess);
+ assert.deepEqual(updateSuccess, {
result: 'successfully updated',
_id: itemToUpdate._id
});
diff --git a/curriculum/challenges/german/10-coding-interview-prep/rosetta-code/24-game.md b/curriculum/challenges/german/10-coding-interview-prep/rosetta-code/24-game.md
index 6b0e5b9e7ed..eb280cacae0 100644
--- a/curriculum/challenges/german/10-coding-interview-prep/rosetta-code/24-game.md
+++ b/curriculum/challenges/german/10-coding-interview-prep/rosetta-code/24-game.md
@@ -82,7 +82,7 @@ const OPERATORS_ = {
"/": (a, b) => a / b,
}
-const PRECIDENCE_ = {
+const PRECEDENCE_ = {
"+": 1,
"-": 1,
"*": 2,
@@ -114,7 +114,7 @@ function evaluate_(expression) {
case "*":
case "/":
while (stack.length &&
- PRECIDENCE_[c] <= PRECIDENCE_[stack[stack.length-1]]) {
+ PRECEDENCE_[c] <= PRECEDENCE_[stack[stack.length-1]]) {
postfix += stack.pop();
}
stack.push(c);
diff --git a/curriculum/challenges/german/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md b/curriculum/challenges/german/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
index 43ff89b7a2f..ac19b1c310c 100644
--- a/curriculum/challenges/german/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
+++ b/curriculum/challenges/german/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
@@ -175,7 +175,7 @@ function dealFreeCell(seed) {
const rng = FreeCellRNG(seed);
const deck = getDeck();
- const deltCards = [[], [], [], [], [], [], []];
+ const dealtCards = [[], [], [], [], [], [], []];
let currentColumn = 0;
let currentRow = 0;
@@ -195,7 +195,7 @@ function dealFreeCell(seed) {
card = deck.pop();
// Deal this card
- deltCards[currentRow].push(card);
+ dealtCards[currentRow].push(card);
currentColumn += 1;
if (currentColumn === 8) {
currentColumn = 0;
@@ -203,6 +203,6 @@ function dealFreeCell(seed) {
}
}
- return deltCards;
+ return dealtCards;
}
```
diff --git a/curriculum/challenges/german/10-coding-interview-prep/rosetta-code/department-numbers.md b/curriculum/challenges/german/10-coding-interview-prep/rosetta-code/department-numbers.md
index 5edd175be5e..aec2da195d2 100644
--- a/curriculum/challenges/german/10-coding-interview-prep/rosetta-code/department-numbers.md
+++ b/curriculum/challenges/german/10-coding-interview-prep/rosetta-code/department-numbers.md
@@ -101,7 +101,7 @@ function combinations(possibleNumbers, total) {
function combinations(possibleNumbers, total) {
let firstNumber;
let secondNumber;
- let thridNumber;
+ let thirdNumber;
const allCombinations = [];
for (let i = 0; i < possibleNumbers.length; i += 1) {
@@ -112,10 +112,10 @@ function combinations(possibleNumbers, total) {
secondNumber = possibleNumbers[j];
if (j !== i && firstNumber + secondNumber <= total) {
- thridNumber = total - firstNumber - secondNumber;
+ thirdNumber = total - firstNumber - secondNumber;
- if (thridNumber !== firstNumber && thridNumber !== secondNumber && possibleNumbers.includes(thridNumber)) {
- allCombinations.push([firstNumber, secondNumber, thridNumber]);
+ if (thirdNumber !== firstNumber && thirdNumber !== secondNumber && possibleNumbers.includes(thirdNumber)) {
+ allCombinations.push([firstNumber, secondNumber, thirdNumber]);
}
}
}
diff --git a/curriculum/challenges/german/10-coding-interview-prep/rosetta-code/lu-decomposition.md b/curriculum/challenges/german/10-coding-interview-prep/rosetta-code/lu-decomposition.md
index a11dcb9df98..601c2102361 100644
--- a/curriculum/challenges/german/10-coding-interview-prep/rosetta-code/lu-decomposition.md
+++ b/curriculum/challenges/german/10-coding-interview-prep/rosetta-code/lu-decomposition.md
@@ -80,7 +80,7 @@ $PA = LU$
# --instructions--
-The task is to implement a routine which will take a square nxn matrix $A$ and return a lower triangular matrix $L$, a upper triangular matrix $U$ and a permutation matrix $P$, so that the above equation is fullfilled. The returned value should be in the form `[L, U, P]`.
+The task is to implement a routine which will take a square nxn matrix $A$ and return a lower triangular matrix $L$, a upper triangular matrix $U$ and a permutation matrix $P$, so that the above equation is fulfilled. The returned value should be in the form `[L, U, P]`.
# --hints--
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
index 722f7d7d33f..b936314f17f 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
@@ -9,7 +9,7 @@ dashedName: step-82
Der Schnabel und die Füße des Pinguins haben die gleiche `color`.
-Erstelle eine neue benutzerdefinierte CSS-Variable namens `--penguin-picorna` und ersetze alle relevanten Eigenschaftswerte durch diese.
+Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it.
# --hints--
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
index 36c410d71c6..b1c9d67864d 100644
--- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
@@ -11,7 +11,7 @@ Inside `pick`, use `let` to initialize a variable named `numbers` and set it to
# --hints--
-Your `pick` function should initalize `numbers` to an empty array `[]`.
+Your `pick` function should initialize `numbers` to an empty array `[]`.
```js
assert.match(pick.toString(), /numbers\s*=\s*\[\]/);
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md
new file mode 100644
index 00000000000..4b042aa87ba
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md
@@ -0,0 +1,310 @@
+---
+id: 64e4e4c4ec263b62ae7bf54d
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn how `localStorage` works in JavaScript by building a Todo app. LocalStorage is a web storage feature of JavaScript that lets you persist data by storing the data as a **key:value** pair.
+
+The HTML and CSS for this project have been provided for you. Take a look at the files to get yourself familiarized with them.
+
+Begin by accessing the `task-form`, `confirm-close-dialog`, and `open-task-form-btn` elements with the `getElementById()` method. Save them in the variables `taskForm`, `confirmCloseDialog`, and `openTaskFormBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `task-form` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should assign the `task-form` element to the variable `taskForm`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+taskForm\s*=\s*document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should use `getElementById()` to access the `confirm-close-dialog` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should assign the `confirm-close-dialog` element to the variable `confirmCloseDialog`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+confirmCloseDialog\s*=\s*document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should use `getElementById()` to access the `open-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `open-task-form-btn` element to the variable `openTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+openTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
new file mode 100644
index 00000000000..32310409728
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
@@ -0,0 +1,310 @@
+---
+id: 64e4e6c86954de67a3e44ee3
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+You need to access more elements with the `getElementById()` method. This time you need the `close-task-form-btn`, `add-or-update-task-btn`, and `cancel-btn` elements. Save them in the variables `closeTaskFormBtn`, `addOrUpdateTaskBtn`, and `cancelBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `close-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `close-task-form-btn` element to the variable `closeTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+closeTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `add-or-update-task-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should assign the `add-or-update-task-btn` element to the variable `addOrUpdateTaskBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+addOrUpdateTaskBtn\s*=\s*document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `cancel-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+You should assign the `cancel-btn` element to the variable `cancelBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cancelBtn\s*=\s*document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
new file mode 100644
index 00000000000..17fc6b76517
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
@@ -0,0 +1,313 @@
+---
+id: 64e4e6fe78b5aa67ef2fc3e7
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next, access the `discard-btn`, `tasks-container`, and `title-input` elements using the `getElementById()` method. Save them in variables named `discardBtn`, `tasksContainer`, and `titleInput`, respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `discard-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should assign the `discard-btn` element to the variable `discardBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+discardBtn\s*=\s*document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `tasks-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should assign the `tasks-container` element to the variable `tasksContainer`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+tasksContainer\s*=\s*document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should use `getElementById()` to access the `title-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+You should assign the `title-input` element to the variable `titleInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+titleInput\s*=\s*document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
new file mode 100644
index 00000000000..6e543d36acc
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
@@ -0,0 +1,304 @@
+---
+id: 64e4e7241f52bb682eeb8211
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last set of elements you need to get from the HTML file are the `date-input` and `description-input` elements. Save them in the variables `dateInput` and `descriptionInput` respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `date-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should assign the `date-input` element to the variable `dateInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dateInput\s*=\s*document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should use `getElementById()` to access the `description-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+You should assign the `description-input` element to the variable `descriptionInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+descriptionInput\s*=\s*document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
new file mode 100644
index 00000000000..6f0cd6e9fc4
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
@@ -0,0 +1,296 @@
+---
+id: 64e4e74d0fb4f0687bf4145d
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `taskData` constant and set it to an empty array. This array will store all the tasks along with their associated data, including title, due date, and description. This storage will enable you to keep track of tasks, display them on the page, and save them to `localStorage`.
+
+Use `let` to create a `currentTask` variable and set it to an empty object. This variable will be used to track the state when editing and discarding tasks.
+
+# --hints--
+
+You should create a `taskData` constant set to an empty array.
+
+```js
+assert.match(code, /const\s+taskData\s*=\s*\[\];?/)
+```
+
+You should use `let` to create an empty `currentTask` object.
+
+```js
+assert.match(code, /let\s+currentTask\s*=\s*\{\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
new file mode 100644
index 00000000000..7eba2896bf4
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -0,0 +1,307 @@
+---
+id: 64e4e78a7ea4a168de4e6a38
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Now, you will work on opening and closing the form modal.
+
+Add a `click` event listener to the `openTaskFormBtn` variable, and then use `classList` to toggle the `hidden` class on the `taskForm` element.
+
+Now you can click on the "Add new Task" button and see the form modal.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `openTaskFormBtn` variable.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax, then use `classList` property and it's `toggle` method on the `taskForm`, to toggle the class `hidden`. Don't use curly braces.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*taskForm\.classList\.toggle\(\1hidden\1\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
new file mode 100644
index 00000000000..6a29158134e
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
@@ -0,0 +1,309 @@
+---
+id: 64e4e7bbedb22d6939001ad3
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Add a `click` event listener to the `closeTaskFormBtn` variable, then use the `showModal()` method on your `confirmCloseDialog` variable. This will display a modal with the `Discard` and `Cancel` buttons.
+
+`showModal()` is a method associated with the HTML `dialog` element. It is used to display a modal dialog box on a web page.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `closeTaskFormBtn` variable.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `showModal()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(["'`]click["'`],\s*\(.*\)\s*=>\s*{?\s*confirmCloseDialog\.showModal\(\);?\s*}?\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
new file mode 100644
index 00000000000..311984043a0
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
@@ -0,0 +1,316 @@
+---
+id: 64e4eaaa9070a66aecbfe603
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+If the user clicks the `Cancel` button, you want to cancel the process (close the modal showing the two buttons) so the user can continue editing.
+
+Add a `click` event listener to the `cancelBtn` element, then use the `close()` method on the `confirmCloseDialog` variable.
+
+`close()` is a method of the window object you can use to close the current window, or a modal you create with the `dialog` element.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `cancelBtn` variable.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `close()` method on `confirmCloseDialog`. Don't use curly braces.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*confirmCloseDialog\.close\(\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
new file mode 100644
index 00000000000..66a40c9771b
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
@@ -0,0 +1,327 @@
+---
+id: 64e4ebc7eabc5a6babd479cd
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+If the user clicks the `Discard` button, you want to close the modal showing the `Cancel` and `Discard` buttons, then hide the form modal.
+
+Add a click event listener to `discardBtn`, then use the `close()` method on the `confirmCloseDialog` variable. Also, use `classList` to toggle the class `hidden` on `taskForm` so the form modal will close too.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `discardBtn` variable.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{/)
+```
+
+Your event listener should use the `close()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?/)
+```
+
+Your event listener should use `classList` to toggle the class `hidden` on `taskForm`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?\s*taskForm\.classList\.toggle\(\1hidden\1\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
new file mode 100644
index 00000000000..f4002dc0937
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
@@ -0,0 +1,326 @@
+---
+id: 64e4ecd7735a566c9266a338
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Now that you've worked on opening and closing the modal, it's time to get the values from the input fields, save them into the `taskData` array, and display them on the page.
+
+To start, add a `submit` event listener to your `taskForm` element and pass in `e` as the parameter of your arrow function. Inside the curly braces, use the `preventDefault()` method to stop the browser from refreshing the page after submitting the form.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `taskForm` variable.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(/)
+```
+
+Your event listener should listen for a `submit` event.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces with `e` as the parameter.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{/)
+```
+
+You should use the `e.preventDefault()` method to stop the browser from reloading the page.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{\s*e\.preventDefault\(\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
new file mode 100644
index 00000000000..148e52f3e93
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
@@ -0,0 +1,337 @@
+---
+id: 64e4eec13546c06d61a63d59
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+You need to determine whether the task being added already exists or not. If it doesn't exist, you will add it, and if it already exists, you will set it up for editing. You can use the `findIndex()` method to accomplish this.
+
+`findIndex` is an array method that lets find the index of the first element in an array that satisfies a given testing function.
+
+Here's an example:
+
+```js
+const numbers = [3, 1, 5, 6, 10, 9, 8];
+const firstEvenNumIndex = numbers.findIndex((num) => num % 2 === 0);
+
+console.log(firstEvenNumIndex); // Output: 3 – because the first even number (6) is at index 3
+```
+
+Declare a `dataArrIndex` variable using `const` and set it to the result of the `findIndex()` method applied to the `taskData` array. Utilize arrow syntax to provide a callback function with `item` as the parameter, and within the callback, check if the `id` property of `item` is equal to the `id` property of `currentTask`.
+
+If the task exists, this returns the index, and if it doesn't exist, it returns `-1`.
+
+# --hints--
+
+You should use `const` to declare a `dataArrIndex` variable and set it to `taskData.findIndex()`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(/)
+```
+
+You should pass in `item` as the parameter of the arrow function callback. Don't use curly braces.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?/)
+```
+
+Your arrow function callback should check if `item.id === currentTask.id`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?\s*=>\s*item.id\s*===\s*currentTask.id\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
new file mode 100644
index 00000000000..10826de6f17
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
@@ -0,0 +1,340 @@
+---
+id: 64e4f01d6c72086e016a8626
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Next, retrieve the values from the input fields and store them in a `taskObj` object. Each task should also have a unique `id`.
+
+Create a `taskObj` object with an `id` property as the first property. For the value of the `id` property, retrieve the value of the `titleInput` field, convert it to lowercase, and then use the `split()` and `join()` methods to hyphenate it.
+
+Make sure all of those are in template literals because you need the `id` property value as a string.
+
+# --hints--
+
+You should use `const` to create a `taskObj` object.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*/)
+```
+
+Your `taskObj` object should have a key of `id`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id/)
+```
+
+You should use template strings to get `titleInput.value` as the value of your `id` key and convert it to lowercase.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)/)
+```
+
+You should use `.split(' ')` on `titleInput.value.toLowerCase()`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)/)
+```
+
+You should use `.join('-')` on `titleInput.value.toLowerCase().split(' ')`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)\.join\(\1-\1\)\}`,?\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
new file mode 100644
index 00000000000..764de1b0918
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
@@ -0,0 +1,327 @@
+---
+id: 64ec89ee549ecf802de2b3e2
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Retrieve the values from the `titleInput`, `dateInput`, and `descriptionInput` fields, and then save them in the properties `title`, `date`, and `description` of the `taskObj` object.
+
+# --hints--
+
+You should get the value of `titleInput` and save it in a `title` key.
+
+```js
+assert.match(code, /title:\s*titleInput\.value,/)
+```
+
+You should get the value of `dateInput` and save it in a `date` key.
+
+```js
+assert.match(code, /date:\s*dateInput\.value,/)
+```
+
+You should get the value of `descriptionInput` and save it in a `description` key.
+
+```js
+assert.match(code, /description:\s*descriptionInput\.value,?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`,
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ };
+});
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
new file mode 100644
index 00000000000..3d009188d81
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
@@ -0,0 +1,332 @@
+---
+id: 64ec8f717b261e824d82d6a5
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Now that you have obtained the values from the input fields and generated an `id`, you want to add them to your `taskData` array to keep track of each task. However, you should only do this if the task is new. If the task already exists, you will set it up for editing. This is why you have the `dataArrIndex` variable, which provides the index of each task.
+
+Create an `if` statement with the condition `dataArrIndex === -1`. Within the `if` statement, use the `unshift()` method to add the `taskObj` object to the beginning of the `taskData` array.
+
+`unshift()` is an array method that is used to add one or more elements to the beginning of an array.
+
+**N.B:** Try adding a task and log `taskData` to the console to see what it looks like.
+
+# --hints--
+
+You should create an `if` statement with the condition `dataArrIndex === -1`.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{/)
+```
+
+Your `if` statement should have `taskData.unshift(taskObj)` in it's body.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{\s*taskData\.unshift\(taskObj\);?\s*\}/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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,
+ };
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
new file mode 100644
index 00000000000..f1202bb93fe
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
@@ -0,0 +1,331 @@
+---
+id: 64ec9145e424d8835a4e0f28
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have saved the task in the `taskData` array, you should display the task on the page by looping through it.
+
+Use `forEach()` on `taskData`, then destructure `id`, `title`, `date`, `description` as the parameters. Don't return anything yet.
+
+# --hints--
+
+You should use `forEach()` on `taskData`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*/)
+```
+
+You should destructure `id`, `title`, `date`, `description` as the parameters of the callback of your `forEach()`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
new file mode 100644
index 00000000000..06bdd7c6ae5
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
@@ -0,0 +1,336 @@
+---
+id: 64ec9282cd547785258cecf2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Using arrow syntax, create an implicit return and use addition assignment to set the `innerHTML` of `tasksContainer` to empty backticks.
+
+# --hints--
+
+You should not alter the existing `taskData.forEach()` and the values you destructured.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+You should use arrow syntax and attach `innerHTML` to `tasksContainer`.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\(\s*tasksContainer\.innerHTML\s*\))?/)
+```
+
+You should use addition assignment to set the `innerHTML` of `tasksContainer` to an empty pair of backticks.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\s*\(?tasksContainer\.innerHTML\s*\+=\s*`\s*`\)?)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+ taskData.forEach(({id, title, date, description}));
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
new file mode 100644
index 00000000000..b5115f99a51
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
@@ -0,0 +1,333 @@
+---
+id: 64ec9343769e8f85c1e17e05
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Create a `div` element with the class of `task`. Utilize template strings to set the `id` attribute of the `div` to the `id` you destructured from the task data.
+
+# --hints--
+
+You should create a `div` element with the class `task`.
+
+```js
+assert.match(code, /\s*<\/div>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
new file mode 100644
index 00000000000..81dd3530420
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
@@ -0,0 +1,348 @@
+---
+id: 64ec94f0de20c086e09b0fc3
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Create a `p` element and use template strings to set its content to the `title` you destructured. Right before the content of the `p` element, create a `strong` element with the text `Title:`.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+assert.match(code, //)
+```
+
+You should interpolate `${title}` as the text of your `p` element.
+
+```js
+assert.match(code, /
.*\$\{title\}<\/p>/)
+```
+
+You should create a `strong` element after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)/)
+```
+
+Your `strong` element should have the text `Title:`.
+
+```js
+assert.match(code, /(?<=)Title:\s*<\/strong>\s*/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
new file mode 100644
index 00000000000..4820d100d4d
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
@@ -0,0 +1,336 @@
+---
+id: 64ec959a76336c8767f5cd4d
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Similarly to the previous step, create another `p` element, and interpolate the `date` you destructured as the text content. Inside this paragraph, create a `strong` element with the text `Date:`.
+
+# --hints--
+
+You should create a `p` element and interpolate `${date}` as the text.
+
+```js
+assert.match(code, /.*\$\{date\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Date:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Date:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Edit<\/button/)
+```
+
+You should create a `button` element of type `button` a class `btn` and `Delete` as the text, in that order.
+
+```js
+assert.match(code, /Delete<\/button/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+const reset = () => {
+
+}
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Delete ')
+assert.notMatch(splitter[1], /taskForm\.classList\.toggle\(("|')hidden\1\);?/)
+```
+
+You should call the `reset` function.
+
+```js
+assert.match(code, /reset\(\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+--fcc-editable-region--
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+
+});
+--fcc-editable-region--
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 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;
+--fcc-editable-region--
+ confirmCloseDialog.showModal();
+--fcc-editable-region--
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
\s*Title:<\/strong>\s*\$\{title\}<\/p>\s*Date:<\/strong>\s*\$\{date\}<\/p>\s*Description:<\/strong>\s*\$\{description\}<\/p>\s*Edit<\/button>\s*Delete<\/button>\s*<\/div>\s*`\)\s*\);?\s*\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Edit<\/button>/)
+```
+
+You should add `onclick="deleteTask(this)"` as the first attribute of the delete button.
+
+```js
+assert.match(code, /Delete<\/button>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
Edit
+
Delete
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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,
+ };
+
+ --fcc-editable-region--
+ if (dataArrIndex === -1) {
+ taskData.unshift(taskObj);
+ }
+
+ --fcc-editable-region--
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+const taskData = [];
+--fcc-editable-region--
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(' ').join('-')}`,
+ };
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
new file mode 100644
index 00000000000..0c9fbc152b7
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
@@ -0,0 +1,337 @@
+---
+id: 65099dbd8f137d58e5c0ff16
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Create one more `p` element and interpolate the `description` you destructured as the text. Also, create a `strong` element inside the paragraph with the text `Description:`.
+
+# --hints--
+
+You should create a `p` element with `${description}` as the text.
+
+```js
+assert.match(code, /.*\$\{description\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Description:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Description:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
Colab notebook to go along with this video.
-Here is an additional Colab notebook that shows you one way to put many of these interest and payment forumlas into Python functions. Also you will see an example of using some formulas to output results, notice a trend, and follow up with other formulas to analyze patterns.
+Here is an additional Colab notebook that shows you one way to put many of these interest and payment formulas into Python functions. Also you will see an example of using some formulas to output results, notice a trend, and follow up with other formulas to analyze patterns.
# --question--
diff --git a/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md b/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
index 39ab831dad7..144796de1b0 100644
--- a/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
+++ b/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
@@ -71,8 +71,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md b/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
index 53ae7b50350..871e1408079 100644
--- a/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
+++ b/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
@@ -73,7 +73,7 @@ substringDivisibility(5);
```js
function substringDivisibility(n) {
- function isSubDivisable(digits) {
+ function isSubDivisible(digits) {
const factors = [2, 3, 5, 7, 11, 13, 17];
for (let i = 1; i < digits.length - 2; i++) {
@@ -108,17 +108,17 @@ function substringDivisibility(n) {
}
const allowedDigits = [...new Array(n + 1).keys()];
- const divisablePandigitals = [];
+ const divisiblePandigitals = [];
heapsPermutations(
allowedDigits.length,
allowedDigits,
- isSubDivisable,
- divisablePandigitals
+ isSubDivisible,
+ divisiblePandigitals
);
let sum = 0;
- for (let i = 0; i < divisablePandigitals.length; i++) {
- sum += divisablePandigitals[i];
+ for (let i = 0; i < divisiblePandigitals.length; i++) {
+ sum += divisiblePandigitals[i];
}
return sum;
diff --git a/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md b/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
index 7cd5bc67b14..2d583a52355 100644
--- a/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
+++ b/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
@@ -67,8 +67,8 @@ class PrimeSeive {
const prime = 2 * i + 3;
primes.push(prime);
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
@@ -101,10 +101,10 @@ class PrimeSeive {
};
function consecutivePrimeSum(limit) {
- // Initalize seive
+ // Initialize seive
const primeSeive = new PrimeSeive(limit);
- // Initalize for longest sum < 100
+ // Initialize for longest sum < 100
let bestPrime = 41;
let bestI = 0;
let bestJ = 5;
diff --git a/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md b/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
index cdbfc3e568b..5b55ddd8079 100644
--- a/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
+++ b/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
@@ -67,8 +67,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/german/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md b/curriculum/challenges/german/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
index 78c29aa7952..4fa15980a0d 100644
--- a/curriculum/challenges/german/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
+++ b/curriculum/challenges/german/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
@@ -31,10 +31,10 @@ For $1 ≤ k ≤ 200$, find $\sum{m(k)}$.
# --hints--
-`efficientExponentation()` should return `1582`.
+`efficientExponentiation()` should return `1582`.
```js
-assert.strictEqual(efficientExponentation(), 1582);
+assert.strictEqual(efficientExponentiation(), 1582);
```
# --seed--
@@ -42,12 +42,12 @@ assert.strictEqual(efficientExponentation(), 1582);
## --seed-contents--
```js
-function efficientExponentation() {
+function efficientExponentiation() {
return true;
}
-efficientExponentation();
+efficientExponentiation();
```
# --solutions--
diff --git a/curriculum/challenges/german/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md b/curriculum/challenges/german/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
index 49d59948762..e402ff347c5 100644
--- a/curriculum/challenges/german/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
+++ b/curriculum/challenges/german/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
@@ -67,8 +67,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/german/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md b/curriculum/challenges/german/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
index 596f703da28..b843f6f2be2 100644
--- a/curriculum/challenges/german/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
+++ b/curriculum/challenges/german/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
@@ -35,7 +35,7 @@ concealedSquare();
```js
// Check if n**2 matches the pattern
-function squareMatchs(n) {
+function squareMatches(n) {
// Need BigInt due to size of values
let nSquared = (BigInt(n) * BigInt(n)).toString();
@@ -55,8 +55,8 @@ function concealedSquare() {
for (let x = maxSquareRoot; x >= minSquareRoot; x -= 10) {
// Note: 3*3 = 9 and 7*7 = 49 are only trailing digits
// that can produce 9 as trailing digit in square
- if (squareMatchs(x + 3)) return (x + 3)*10;
- if (squareMatchs(x + 7)) return (x + 7)*10;
+ if (squareMatches(x + 3)) return (x + 3)*10;
+ if (squareMatches(x + 7)) return (x + 7)*10;
}
return -1;
}
diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index 6eff44e6050..e725961bf33 100644
--- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -54,7 +54,24 @@ assert.match(code, /myStorage\.car\.inside/);
`gloveBoxContents` dovrebbe ancora essere dichiarata con `const`.
```js
-assert.match(code, /const\s+gloveBoxContents\s*=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]|const\s*{\s*('|")glove box\2:\s*gloveBoxContents\s*}\s*=\s*myStorage\.car\.inside;/);
+assert.match(code, /const\s+gloveBoxContents\s*=/);
+```
+
+You should not change the `myStorage` object.
+
+```js
+const expectedMyStorage = {
+ "car":{
+ "inside":{
+ "glove box":"maps",
+ "passenger seat":"crumbs"
+ },
+ "outside":{
+ "trunk":"jack"
+ }
+ }
+};
+assert.deepStrictEqual(myStorage, expectedMyStorage);
```
# --seed--
diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
index 9dbd9619c0c..ad97f1a027a 100644
--- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
+++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
@@ -10,7 +10,7 @@ dashedName: catch-misspelled-variable-and-function-names
I metodi `console.log()` e `typeof` sono i due modi principali per controllare i valori intermedi e i tipi degli output del programma. Ora è il momento di approfondire le forme più comuni di bug. Un problema di sintassi di cui si rammaricano i digitatori veloci è il semplice errore di ortografia.
-Caratteri spostati, mancanti, o con maiuscole errate nel nome di una variabile o di una funzione costringeranno il browser a cercare un oggetto che non esiste - e a lamentarsi tramite un errore di riferimento. In JavaScript, le variabili e i nomi di funzione sono sensibili alle maiuscole.
+Transposed, missing, or miscapitalized characters in a variable or function name will have the browser looking for an object that doesn't exist - and complain in the form of a reference error. In JavaScript, le variabili e i nomi di funzione sono sensibili alle maiuscole.
# --instructions--
diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
index bac1aef0bb9..26538b4cb01 100644
--- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
+++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
@@ -58,8 +58,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/italian/06-quality-assurance/quality-assurance-projects/issue-tracker.md b/curriculum/challenges/italian/06-quality-assurance/quality-assurance-projects/issue-tracker.md
index 42d99b6c1ed..f1cc6c8dc9f 100644
--- a/curriculum/challenges/italian/06-quality-assurance/quality-assurance-projects/issue-tracker.md
+++ b/curriculum/challenges/italian/06-quality-assurance/quality-assurance-projects/issue-tracker.md
@@ -231,13 +231,13 @@ async (getUserInput) => {
};
const url = getUserInput('url') + '/api/issues/fcc-project';
const itemToUpdate = await $.post(url, initialData);
- const updateSucccess = await $.ajax({
+ const updateSuccess = await $.ajax({
url: url,
type: 'PUT',
data: { _id: itemToUpdate._id, issue_text: 'New Issue Text' }
});
- assert.isObject(updateSucccess);
- assert.deepEqual(updateSucccess, {
+ assert.isObject(updateSuccess);
+ assert.deepEqual(updateSuccess, {
result: 'successfully updated',
_id: itemToUpdate._id
});
diff --git a/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/24-game.md b/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/24-game.md
index 41ba57e16d2..30f4ba7b2e5 100644
--- a/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/24-game.md
+++ b/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/24-game.md
@@ -82,7 +82,7 @@ const OPERATORS_ = {
"/": (a, b) => a / b,
}
-const PRECIDENCE_ = {
+const PRECEDENCE_ = {
"+": 1,
"-": 1,
"*": 2,
@@ -114,7 +114,7 @@ function evaluate_(expression) {
case "*":
case "/":
while (stack.length &&
- PRECIDENCE_[c] <= PRECIDENCE_[stack[stack.length-1]]) {
+ PRECEDENCE_[c] <= PRECEDENCE_[stack[stack.length-1]]) {
postfix += stack.pop();
}
stack.push(c);
diff --git a/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md b/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
index 9dfe4de0645..af717d80af4 100644
--- a/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
+++ b/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
@@ -175,7 +175,7 @@ function dealFreeCell(seed) {
const rng = FreeCellRNG(seed);
const deck = getDeck();
- const deltCards = [[], [], [], [], [], [], []];
+ const dealtCards = [[], [], [], [], [], [], []];
let currentColumn = 0;
let currentRow = 0;
@@ -195,7 +195,7 @@ function dealFreeCell(seed) {
card = deck.pop();
// Deal this card
- deltCards[currentRow].push(card);
+ dealtCards[currentRow].push(card);
currentColumn += 1;
if (currentColumn === 8) {
currentColumn = 0;
@@ -203,6 +203,6 @@ function dealFreeCell(seed) {
}
}
- return deltCards;
+ return dealtCards;
}
```
diff --git a/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/department-numbers.md b/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/department-numbers.md
index 51f0986cea2..6397735c700 100644
--- a/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/department-numbers.md
+++ b/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/department-numbers.md
@@ -101,7 +101,7 @@ function combinations(possibleNumbers, total) {
function combinations(possibleNumbers, total) {
let firstNumber;
let secondNumber;
- let thridNumber;
+ let thirdNumber;
const allCombinations = [];
for (let i = 0; i < possibleNumbers.length; i += 1) {
@@ -112,10 +112,10 @@ function combinations(possibleNumbers, total) {
secondNumber = possibleNumbers[j];
if (j !== i && firstNumber + secondNumber <= total) {
- thridNumber = total - firstNumber - secondNumber;
+ thirdNumber = total - firstNumber - secondNumber;
- if (thridNumber !== firstNumber && thridNumber !== secondNumber && possibleNumbers.includes(thridNumber)) {
- allCombinations.push([firstNumber, secondNumber, thridNumber]);
+ if (thirdNumber !== firstNumber && thirdNumber !== secondNumber && possibleNumbers.includes(thirdNumber)) {
+ allCombinations.push([firstNumber, secondNumber, thirdNumber]);
}
}
}
diff --git a/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/lu-decomposition.md b/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/lu-decomposition.md
index 3d6d87028f6..e610042ffe8 100644
--- a/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/lu-decomposition.md
+++ b/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/lu-decomposition.md
@@ -80,7 +80,7 @@ $PA = LU$
# --instructions--
-Il compito è quello di implementare una routine che richiederà una matrice quadrata nxn $A$ e restituirà una matrice triangolare inferiore $L$, una matrice triangolare superiore $U$ e una matrice di permutazione $P$, in modo che l'equazione di cui sopra sia soddisfatta. Il valore restituito dovrebbe essere nella forma `[L, U, P]`.
+The task is to implement a routine which will take a square nxn matrix $A$ and return a lower triangular matrix $L$, a upper triangular matrix $U$ and a permutation matrix $P$, so that the above equation is fulfilled. Il valore restituito dovrebbe essere nella forma `[L, U, P]`.
# --hints--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md
index 6d612a773be..457a4b81b84 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md
@@ -7,9 +7,9 @@ dashedName: step-11
# --description--
-Now your images are too big.
+Ora le immagini sono troppo grandi.
-Create a `.gallery img` selector to target them. Give them all a `width` of `100%` and a `max-width` of `350px`.
+Create a `.gallery img` selector to target them. Imposta per tutte `width` al `100%` e `max-width` a `350px`.
Also set the `height` property to `300px` to keep your images a uniform size.
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md
index a2756de469f..cd7dd66884b 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md
@@ -18,7 +18,7 @@ You should have a `body` selector.
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
```
-Your `body` selector should have a `margin` property set to 0 as the value.
+Il selettore `body` dovrebbe avere una proprietà `margin` con il valore 0.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md
index 07af535331f..5511946776c 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md
@@ -7,9 +7,9 @@ dashedName: step-9
# --description--
-The `border-box` sizing model does the opposite of `content-box`. The total width of the element, including padding and border, will be the explicit width set. The content of the element will shrink to make room for the padding and border.
+Il modello di dimensionamento `border-box` fa l'opposto di `content-box`. La larghezza totale dell'elemento, inclusi padding e bordo, sarà la larghezza esplicitamente impostata. Il contenuto dell'elemento si restringerà per fare spazio a padding e bordo.
-Change the `box-sizing` property to `border-box`. Notice how your blue image borders now fit within your red gallery border.
+Cambia la proprietà `box-sizing` in `border-box`. Nota come i bordi delle immagini blu ora si adattano al bordo della galleria rossa.
# --hints--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md
index 781bfe093d1..d450a501ce7 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md
@@ -7,11 +7,11 @@ dashedName: step-8
# --description--
-Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements.
+Nota come i bordi delle immagini blu ora vanno oltre il bordo della galleria rossa. Ciò è dovuto al modo in cui i browser calcolano la dimensione degli elementi contenitore.
-The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values.
+La proprietà `box-sizing` viene utilizzata per definire questo comportamento. Per impostazione predefinita, viene utilizzato il modello `content-box`. Con questo modello, quando un elemento ha una larghezza specifica, tale larghezza viene calcolata solo in base al contenuto dell'elemento. I valori di padding e bordo vengono aggiunti alla larghezza totale, con l'elemento che cresce per adattarsi a questi valori.
-Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value.
+Prova a impostare esplicitamente `box-sizing` su `content-box` con il selettore globale `*`. In questo momento, non vedrai alcun cambiamento, perché stai usando il valore predefinito.
# --hints--
@@ -21,13 +21,13 @@ You should have a `*` selector.
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
```
-Your `*` selector should have a `box-sizing` property.
+Il selettore `*` dovrebbe avere una proprietà `box-sizing`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing);
```
-Your `*` selector should have its `box-sizing` property set to `content-box`.
+Il selettore `*` dovrebbe avere la proprietà `box-sizing` impostata su `content-box`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box');
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md
index b62a6d87885..64bafb44ad1 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md
@@ -7,11 +7,11 @@ dashedName: step-7
# --description--
-In order to better visualize how your elements are sized, adding a border can be helpful.
+Per visualizzare meglio la dimensione degli elementi, può essere utile aggiungere un bordo.
-Give your `.gallery` element a `width` of `50%` and a `border` set to `5px solid red`.
+Per l'elemento `.gallery` imposta `width` al `50%` e `border` su `5px solid red`.
-Then give your `img` elements a `width` of `100%`, `padding` set to `5px`, and a `border` set to `5px solid blue`.
+Quindi dai agli elementi `img` una `width` del `100%`, imposta `padding` su `5px` e `border` su `5px solid blue`.
# --hints--
@@ -21,25 +21,25 @@ You should have a `.gallery` selector.
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
```
-Your `.gallery` selector should have a `width` property.
+Il selettore `.gallery` dovrebbe avere una proprietà `width`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width);
```
-Your `.gallery` selector should have a `width` property set to `50%`.
+Il selettore `.gallery` dovrebbe avere una proprietà `width` impostata al `50%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%');
```
-Your `.gallery` selector should have a `border` property.
+Il selettore `.gallery` dovrebbe avere una proprietà `border`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border);
```
-Your `.gallery` selector should have a `border` property set to `5px solid red`.
+Il selettore `.gallery` dovrebbe avere una proprietà `border` con il valore `5px solid red`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red');
@@ -51,7 +51,7 @@ You should have an `img` selector.
assert.exists(new __helpers.CSSHelp(document).getStyle('img'));
```
-Your `img` selector should have a `width` property.
+Il selettore `img` dovrebbe avere una proprietà `width`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width);
@@ -63,25 +63,25 @@ Your `img` selector should have a `width` property set to `100%`.
assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%');
```
-Your `img` selector should have a `padding` property.
+Il selettore `img` dovrebbe avere una proprietà `padding`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding);
```
-Your `img` selector should have a `padding` property set to `5px`.
+Il selettore `img` dovrebbe avere una proprietà `padding` con il valore `5px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px');
```
-Your `img` selector should have a `border` property.
+Il selettore `img` dovrebbe avere una proprietà `border`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border);
```
-Your `img` selector should have a `border` property set to `5px solid blue`.
+Il selettore `img` dovrebbe avere una proprietà `border` impostata su `5px solid blue`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue');
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md
index 7b1c43d14af..0de477feea4 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md
@@ -7,19 +7,19 @@ dashedName: step-10
# --description--
-Now that you have figured out your `box-sizing` approach, you can clean up the CSS you added to see the changes.
+Ora che hai capito l'approccio `box-sizing`, puoi ripulire il CSS che hai aggiunto per vedere le modifiche.
-Remove your `.gallery` and `img` selectors, and all rules within.
+Rimuovi i selettori `.gallery` e `img` e tutte le regole al loro interno.
# --hints--
-You should not have a `.gallery` selector.
+Non dovresti avere un selettore `.gallery`.
```js
assert.notExists(new __helpers.CSSHelp(document).getStyle('.gallery'));
```
-You should not have an `img` selector.
+Non dovresti avere un selettore `img`.
```js
assert.notExists(new __helpers.CSSHelp(document).getStyle('img'));
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
index 734cb3bbf53..a66d8d19ef4 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
@@ -9,7 +9,7 @@ dashedName: step-82
Il becco e le zampe del pinguino condividono lo stesso valore `color`.
-Crea una nuova variabile CSS personalizzata denominata `--penguin-picorna` e sostituisci tutti i valori della proprietà dove necessario.
+Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it.
# --hints--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md
index 1037e09359d..e6032d98a7f 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md
@@ -7,7 +7,7 @@ dashedName: step-31
# --description--
-Add `I accept the terms and conditions` text to the newly added label, then link the text `terms and conditions` to the following location:
+Aggiungi il testo `I accept the terms and conditions` al label appena aggiunto, poi collega il testo `terms and conditions` alla posizione seguente:
```md
https://www.freecodecamp.org/news/terms-of-service/
@@ -15,25 +15,25 @@ https://www.freecodecamp.org/news/terms-of-service/
# --hints--
-You should add `I accept the terms and conditions` text to the label following the third fieldset.
+Dovresti aggiungere il testo `I accept the terms and conditions` al label successivo al terzo fieldset.
```js
assert.equal(document.querySelector('fieldset:nth-child(3) + label')?.innerText.trim(), 'I accept the terms and conditions');
```
-You should use an `a` element to link to the terms and conditions.
+Dovresti usare un elemento `a` per trasformare terms and conditions in un link.
```js
assert.exists(document.querySelector('fieldset:nth-child(3) + label > input + a'));
```
-You should give the `a` element an `href` of `https://www.freecodecamp.org/news/terms-of-service/`.
+Dovresti assegnare all'elemento `a` un attributo `href` con il valore `https://www.freecodecamp.org/news/terms-of-service/`.
```js
assert.match(document.querySelector('fieldset:nth-child(3) + label > input + a')?.href, /https:\/\/www\.freecodecamp\.org\/news\/terms-of-service\/?/);
```
-You should only wrap the `a` element around the text `terms and conditions`.
+L'elemento `a` dovrebbe racchiudere soltanto il testo `terms and conditions`.
```js
assert.equal(document.querySelector('fieldset:nth-child(3) + label > input + a')?.textContent, 'terms and conditions');
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md
index e347ba46d5e..0991cd19fa1 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md
@@ -7,45 +7,45 @@ dashedName: step-30
# --description--
-You need to confirm that the user has read the terms and conditions.
+Devi confermare che l'utente ha letto i termini e le condizioni.
-Add `label` element after the third `fieldset`, and a `input` element with `type` attribute of `checkbox` inside the newly added `label` element. Make this `input` element `required` because users should not sign up without reading the terms and conditions.
+Aggiungi un elemento `label` dopo il terzo `fieldset` e un elemento `input` con un attributo`type` del valore di `checkbox` all'interno dell'elemento `label` appena aggiunto. Fai sì che questo elemento `input` sia `required` in modo che gli utenti non possano iscriversi senza leggere i termini e le condizioni di utilizzo.
-Don't forget to add an `id` attribute of `terms-and-conditions` for accessibility.
+Non dimenticare di aggiungere un attributo `id` del valore `terms-and-conditions` per l'accessibilità.
# --hints--
-You should add an `label` after the third `fieldset` element.
+Dovresti aggiungere un `label` dopo il terzo elemento `fieldset`.
```js
assert.exists(document.querySelector('fieldset:nth-child(3) + label'));
```
-You should add an `input` to the `label` element.
+Dovresti aggiungere un `input` all'elemento `label`.
```js
assert.exists(document.querySelector('fieldset:nth-child(3) + label > input'));
```
-You should add a `type` attribute of value `checkbox` to the `input` element.
+Dovresti aggiungere un attributo `type` con valore `checkbox` all'elemento `input`.
```js
assert.equal(document.querySelector('fieldset:nth-child(3) + label > input')?.type, 'checkbox');
```
-You should add a `required` attribute to the `input` element.
+Dovresti aggiungere un attributo `required` all'elemento `input`.
```js
assert.equal(document.querySelector('fieldset:nth-child(3) + label > input')?.required, true);
```
-The `input` element should have an `id` of `terms-and-conditions`.
+L'elemento `input` dovrebbe avere un `id` con il valore `terms-and-conditions`.
```js
assert(document.querySelector('fieldset:nth-child(3) + label > input')?.matches('#terms-and-conditions'))
```
-The `label` element should have a `for` attribute with a value of `terms-and-conditions`.
+L'elemento `label` dovrebbe avere un attributo `for` con il valore `terms-and-conditions`.
```js
assert(document.querySelector('fieldset:nth-child(3) + label')?.matches('label[for="terms-and-conditions"]'))
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/65045fa2267ce52da6a73676.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/65045fa2267ce52da6a73676.md
index 927b3680160..5aeb9643796 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/65045fa2267ce52da6a73676.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/65045fa2267ce52da6a73676.md
@@ -7,31 +7,31 @@ dashedName: step-29
# --description--
-Follow accessibility best practices by linking the `input` elements and the `label` elements in the second `fieldset`.
+Segui le migliori pratiche di accessibilità collegando gli elementi `input` e gli elementi `label` nel secondo `fieldset`.
-Use `personal-account`, and `business-account` as values for the respective `id` attributes.
+Usa `personal-account` e `business-account` come valori per i rispettivi attributi `id`.
# --hints--
-The first `input` element should have an `id` of `personal-account`.
+Il primo elemento `input` dovrebbe avere un `id` con il valore `personal-account`.
```js
assert(document.querySelectorAll('fieldset:nth-of-type(2) input')?.[0]?.matches('#personal-account'))
```
-The second `input` element should have an `id` of `business-account`.
+Il secondo elemento `input` dovrebbe avere un `id` con il valore `business-account`.
```js
assert(document.querySelectorAll('fieldset:nth-of-type(2) input')?.[1]?.matches('#business-account'))
```
-The first `label` element should have a `for` attribute with a value of `personal-account`.
+Il primo elemento `label` dovrebbe avere un attributo `for` con il valore `personal-account`.
```js
assert(document.querySelectorAll('fieldset:nth-of-type(2) label')?.[0]?.matches('label[for="personal-account"]'))
```
-The second `label` element should have a `for` attribute with a value of `business-account`.
+Il secondo elemento `label` dovrebbe avere un attributo `for` con il valore `business-account`.
```js
assert(document.querySelectorAll('fieldset:nth-of-type(2) label')?.[1]?.matches('label[for="business-account"]'))
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
index db3c1484e3e..395c89c81d3 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
@@ -11,7 +11,7 @@ All'interno di `pick`, usa `let` per inizializzare una variabile chiamata `numbe
# --hints--
-La funzione `pick` dovrebbe inizializzare `numbers` su un array vuoto `[]`.
+Your `pick` function should initialize `numbers` to an empty array `[]`.
```js
assert.match(pick.toString(), /numbers\s*=\s*\[\]/);
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md
new file mode 100644
index 00000000000..4b042aa87ba
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md
@@ -0,0 +1,310 @@
+---
+id: 64e4e4c4ec263b62ae7bf54d
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn how `localStorage` works in JavaScript by building a Todo app. LocalStorage is a web storage feature of JavaScript that lets you persist data by storing the data as a **key:value** pair.
+
+The HTML and CSS for this project have been provided for you. Take a look at the files to get yourself familiarized with them.
+
+Begin by accessing the `task-form`, `confirm-close-dialog`, and `open-task-form-btn` elements with the `getElementById()` method. Save them in the variables `taskForm`, `confirmCloseDialog`, and `openTaskFormBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `task-form` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should assign the `task-form` element to the variable `taskForm`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+taskForm\s*=\s*document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should use `getElementById()` to access the `confirm-close-dialog` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should assign the `confirm-close-dialog` element to the variable `confirmCloseDialog`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+confirmCloseDialog\s*=\s*document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should use `getElementById()` to access the `open-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `open-task-form-btn` element to the variable `openTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+openTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
new file mode 100644
index 00000000000..32310409728
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
@@ -0,0 +1,310 @@
+---
+id: 64e4e6c86954de67a3e44ee3
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+You need to access more elements with the `getElementById()` method. This time you need the `close-task-form-btn`, `add-or-update-task-btn`, and `cancel-btn` elements. Save them in the variables `closeTaskFormBtn`, `addOrUpdateTaskBtn`, and `cancelBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `close-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `close-task-form-btn` element to the variable `closeTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+closeTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `add-or-update-task-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should assign the `add-or-update-task-btn` element to the variable `addOrUpdateTaskBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+addOrUpdateTaskBtn\s*=\s*document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `cancel-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+You should assign the `cancel-btn` element to the variable `cancelBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cancelBtn\s*=\s*document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
new file mode 100644
index 00000000000..17fc6b76517
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
@@ -0,0 +1,313 @@
+---
+id: 64e4e6fe78b5aa67ef2fc3e7
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next, access the `discard-btn`, `tasks-container`, and `title-input` elements using the `getElementById()` method. Save them in variables named `discardBtn`, `tasksContainer`, and `titleInput`, respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `discard-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should assign the `discard-btn` element to the variable `discardBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+discardBtn\s*=\s*document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `tasks-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should assign the `tasks-container` element to the variable `tasksContainer`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+tasksContainer\s*=\s*document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should use `getElementById()` to access the `title-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+You should assign the `title-input` element to the variable `titleInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+titleInput\s*=\s*document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
new file mode 100644
index 00000000000..6e543d36acc
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
@@ -0,0 +1,304 @@
+---
+id: 64e4e7241f52bb682eeb8211
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last set of elements you need to get from the HTML file are the `date-input` and `description-input` elements. Save them in the variables `dateInput` and `descriptionInput` respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `date-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should assign the `date-input` element to the variable `dateInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dateInput\s*=\s*document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should use `getElementById()` to access the `description-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+You should assign the `description-input` element to the variable `descriptionInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+descriptionInput\s*=\s*document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
new file mode 100644
index 00000000000..6f0cd6e9fc4
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
@@ -0,0 +1,296 @@
+---
+id: 64e4e74d0fb4f0687bf4145d
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `taskData` constant and set it to an empty array. This array will store all the tasks along with their associated data, including title, due date, and description. This storage will enable you to keep track of tasks, display them on the page, and save them to `localStorage`.
+
+Use `let` to create a `currentTask` variable and set it to an empty object. This variable will be used to track the state when editing and discarding tasks.
+
+# --hints--
+
+You should create a `taskData` constant set to an empty array.
+
+```js
+assert.match(code, /const\s+taskData\s*=\s*\[\];?/)
+```
+
+You should use `let` to create an empty `currentTask` object.
+
+```js
+assert.match(code, /let\s+currentTask\s*=\s*\{\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
new file mode 100644
index 00000000000..7eba2896bf4
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -0,0 +1,307 @@
+---
+id: 64e4e78a7ea4a168de4e6a38
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Now, you will work on opening and closing the form modal.
+
+Add a `click` event listener to the `openTaskFormBtn` variable, and then use `classList` to toggle the `hidden` class on the `taskForm` element.
+
+Now you can click on the "Add new Task" button and see the form modal.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `openTaskFormBtn` variable.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax, then use `classList` property and it's `toggle` method on the `taskForm`, to toggle the class `hidden`. Don't use curly braces.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*taskForm\.classList\.toggle\(\1hidden\1\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
new file mode 100644
index 00000000000..6a29158134e
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
@@ -0,0 +1,309 @@
+---
+id: 64e4e7bbedb22d6939001ad3
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Add a `click` event listener to the `closeTaskFormBtn` variable, then use the `showModal()` method on your `confirmCloseDialog` variable. This will display a modal with the `Discard` and `Cancel` buttons.
+
+`showModal()` is a method associated with the HTML `dialog` element. It is used to display a modal dialog box on a web page.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `closeTaskFormBtn` variable.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `showModal()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(["'`]click["'`],\s*\(.*\)\s*=>\s*{?\s*confirmCloseDialog\.showModal\(\);?\s*}?\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
new file mode 100644
index 00000000000..311984043a0
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
@@ -0,0 +1,316 @@
+---
+id: 64e4eaaa9070a66aecbfe603
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+If the user clicks the `Cancel` button, you want to cancel the process (close the modal showing the two buttons) so the user can continue editing.
+
+Add a `click` event listener to the `cancelBtn` element, then use the `close()` method on the `confirmCloseDialog` variable.
+
+`close()` is a method of the window object you can use to close the current window, or a modal you create with the `dialog` element.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `cancelBtn` variable.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `close()` method on `confirmCloseDialog`. Don't use curly braces.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*confirmCloseDialog\.close\(\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
new file mode 100644
index 00000000000..66a40c9771b
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
@@ -0,0 +1,327 @@
+---
+id: 64e4ebc7eabc5a6babd479cd
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+If the user clicks the `Discard` button, you want to close the modal showing the `Cancel` and `Discard` buttons, then hide the form modal.
+
+Add a click event listener to `discardBtn`, then use the `close()` method on the `confirmCloseDialog` variable. Also, use `classList` to toggle the class `hidden` on `taskForm` so the form modal will close too.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `discardBtn` variable.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{/)
+```
+
+Your event listener should use the `close()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?/)
+```
+
+Your event listener should use `classList` to toggle the class `hidden` on `taskForm`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?\s*taskForm\.classList\.toggle\(\1hidden\1\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
new file mode 100644
index 00000000000..f4002dc0937
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
@@ -0,0 +1,326 @@
+---
+id: 64e4ecd7735a566c9266a338
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Now that you've worked on opening and closing the modal, it's time to get the values from the input fields, save them into the `taskData` array, and display them on the page.
+
+To start, add a `submit` event listener to your `taskForm` element and pass in `e` as the parameter of your arrow function. Inside the curly braces, use the `preventDefault()` method to stop the browser from refreshing the page after submitting the form.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `taskForm` variable.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(/)
+```
+
+Your event listener should listen for a `submit` event.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces with `e` as the parameter.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{/)
+```
+
+You should use the `e.preventDefault()` method to stop the browser from reloading the page.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{\s*e\.preventDefault\(\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
new file mode 100644
index 00000000000..148e52f3e93
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
@@ -0,0 +1,337 @@
+---
+id: 64e4eec13546c06d61a63d59
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+You need to determine whether the task being added already exists or not. If it doesn't exist, you will add it, and if it already exists, you will set it up for editing. You can use the `findIndex()` method to accomplish this.
+
+`findIndex` is an array method that lets find the index of the first element in an array that satisfies a given testing function.
+
+Here's an example:
+
+```js
+const numbers = [3, 1, 5, 6, 10, 9, 8];
+const firstEvenNumIndex = numbers.findIndex((num) => num % 2 === 0);
+
+console.log(firstEvenNumIndex); // Output: 3 – because the first even number (6) is at index 3
+```
+
+Declare a `dataArrIndex` variable using `const` and set it to the result of the `findIndex()` method applied to the `taskData` array. Utilize arrow syntax to provide a callback function with `item` as the parameter, and within the callback, check if the `id` property of `item` is equal to the `id` property of `currentTask`.
+
+If the task exists, this returns the index, and if it doesn't exist, it returns `-1`.
+
+# --hints--
+
+You should use `const` to declare a `dataArrIndex` variable and set it to `taskData.findIndex()`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(/)
+```
+
+You should pass in `item` as the parameter of the arrow function callback. Don't use curly braces.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?/)
+```
+
+Your arrow function callback should check if `item.id === currentTask.id`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?\s*=>\s*item.id\s*===\s*currentTask.id\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
new file mode 100644
index 00000000000..10826de6f17
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
@@ -0,0 +1,340 @@
+---
+id: 64e4f01d6c72086e016a8626
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Next, retrieve the values from the input fields and store them in a `taskObj` object. Each task should also have a unique `id`.
+
+Create a `taskObj` object with an `id` property as the first property. For the value of the `id` property, retrieve the value of the `titleInput` field, convert it to lowercase, and then use the `split()` and `join()` methods to hyphenate it.
+
+Make sure all of those are in template literals because you need the `id` property value as a string.
+
+# --hints--
+
+You should use `const` to create a `taskObj` object.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*/)
+```
+
+Your `taskObj` object should have a key of `id`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id/)
+```
+
+You should use template strings to get `titleInput.value` as the value of your `id` key and convert it to lowercase.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)/)
+```
+
+You should use `.split(' ')` on `titleInput.value.toLowerCase()`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)/)
+```
+
+You should use `.join('-')` on `titleInput.value.toLowerCase().split(' ')`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)\.join\(\1-\1\)\}`,?\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
new file mode 100644
index 00000000000..764de1b0918
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
@@ -0,0 +1,327 @@
+---
+id: 64ec89ee549ecf802de2b3e2
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Retrieve the values from the `titleInput`, `dateInput`, and `descriptionInput` fields, and then save them in the properties `title`, `date`, and `description` of the `taskObj` object.
+
+# --hints--
+
+You should get the value of `titleInput` and save it in a `title` key.
+
+```js
+assert.match(code, /title:\s*titleInput\.value,/)
+```
+
+You should get the value of `dateInput` and save it in a `date` key.
+
+```js
+assert.match(code, /date:\s*dateInput\.value,/)
+```
+
+You should get the value of `descriptionInput` and save it in a `description` key.
+
+```js
+assert.match(code, /description:\s*descriptionInput\.value,?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`,
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ };
+});
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
new file mode 100644
index 00000000000..3d009188d81
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
@@ -0,0 +1,332 @@
+---
+id: 64ec8f717b261e824d82d6a5
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Now that you have obtained the values from the input fields and generated an `id`, you want to add them to your `taskData` array to keep track of each task. However, you should only do this if the task is new. If the task already exists, you will set it up for editing. This is why you have the `dataArrIndex` variable, which provides the index of each task.
+
+Create an `if` statement with the condition `dataArrIndex === -1`. Within the `if` statement, use the `unshift()` method to add the `taskObj` object to the beginning of the `taskData` array.
+
+`unshift()` is an array method that is used to add one or more elements to the beginning of an array.
+
+**N.B:** Try adding a task and log `taskData` to the console to see what it looks like.
+
+# --hints--
+
+You should create an `if` statement with the condition `dataArrIndex === -1`.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{/)
+```
+
+Your `if` statement should have `taskData.unshift(taskObj)` in it's body.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{\s*taskData\.unshift\(taskObj\);?\s*\}/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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,
+ };
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
new file mode 100644
index 00000000000..f1202bb93fe
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
@@ -0,0 +1,331 @@
+---
+id: 64ec9145e424d8835a4e0f28
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have saved the task in the `taskData` array, you should display the task on the page by looping through it.
+
+Use `forEach()` on `taskData`, then destructure `id`, `title`, `date`, `description` as the parameters. Don't return anything yet.
+
+# --hints--
+
+You should use `forEach()` on `taskData`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*/)
+```
+
+You should destructure `id`, `title`, `date`, `description` as the parameters of the callback of your `forEach()`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
new file mode 100644
index 00000000000..06bdd7c6ae5
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
@@ -0,0 +1,336 @@
+---
+id: 64ec9282cd547785258cecf2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Using arrow syntax, create an implicit return and use addition assignment to set the `innerHTML` of `tasksContainer` to empty backticks.
+
+# --hints--
+
+You should not alter the existing `taskData.forEach()` and the values you destructured.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+You should use arrow syntax and attach `innerHTML` to `tasksContainer`.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\(\s*tasksContainer\.innerHTML\s*\))?/)
+```
+
+You should use addition assignment to set the `innerHTML` of `tasksContainer` to an empty pair of backticks.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\s*\(?tasksContainer\.innerHTML\s*\+=\s*`\s*`\)?)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+ taskData.forEach(({id, title, date, description}));
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
new file mode 100644
index 00000000000..b5115f99a51
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
@@ -0,0 +1,333 @@
+---
+id: 64ec9343769e8f85c1e17e05
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Create a `div` element with the class of `task`. Utilize template strings to set the `id` attribute of the `div` to the `id` you destructured from the task data.
+
+# --hints--
+
+You should create a `div` element with the class `task`.
+
+```js
+assert.match(code, /\s*<\/div>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
new file mode 100644
index 00000000000..81dd3530420
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
@@ -0,0 +1,348 @@
+---
+id: 64ec94f0de20c086e09b0fc3
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Create a `p` element and use template strings to set its content to the `title` you destructured. Right before the content of the `p` element, create a `strong` element with the text `Title:`.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+assert.match(code, //)
+```
+
+You should interpolate `${title}` as the text of your `p` element.
+
+```js
+assert.match(code, /
.*\$\{title\}<\/p>/)
+```
+
+You should create a `strong` element after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)/)
+```
+
+Your `strong` element should have the text `Title:`.
+
+```js
+assert.match(code, /(?<=)Title:\s*<\/strong>\s*/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
new file mode 100644
index 00000000000..4820d100d4d
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
@@ -0,0 +1,336 @@
+---
+id: 64ec959a76336c8767f5cd4d
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Similarly to the previous step, create another `p` element, and interpolate the `date` you destructured as the text content. Inside this paragraph, create a `strong` element with the text `Date:`.
+
+# --hints--
+
+You should create a `p` element and interpolate `${date}` as the text.
+
+```js
+assert.match(code, /.*\$\{date\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Date:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Date:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Edit<\/button/)
+```
+
+You should create a `button` element of type `button` a class `btn` and `Delete` as the text, in that order.
+
+```js
+assert.match(code, /Delete<\/button/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+const reset = () => {
+
+}
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Delete ')
+assert.notMatch(splitter[1], /taskForm\.classList\.toggle\(("|')hidden\1\);?/)
+```
+
+You should call the `reset` function.
+
+```js
+assert.match(code, /reset\(\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+--fcc-editable-region--
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+
+});
+--fcc-editable-region--
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 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;
+--fcc-editable-region--
+ confirmCloseDialog.showModal();
+--fcc-editable-region--
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
\s*Title:<\/strong>\s*\$\{title\}<\/p>\s*Date:<\/strong>\s*\$\{date\}<\/p>\s*Description:<\/strong>\s*\$\{description\}<\/p>\s*Edit<\/button>\s*Delete<\/button>\s*<\/div>\s*`\)\s*\);?\s*\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Edit<\/button>/)
+```
+
+You should add `onclick="deleteTask(this)"` as the first attribute of the delete button.
+
+```js
+assert.match(code, /Delete<\/button>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
Edit
+
Delete
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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,
+ };
+
+ --fcc-editable-region--
+ if (dataArrIndex === -1) {
+ taskData.unshift(taskObj);
+ }
+
+ --fcc-editable-region--
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+const taskData = [];
+--fcc-editable-region--
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(' ').join('-')}`,
+ };
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
new file mode 100644
index 00000000000..0c9fbc152b7
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
@@ -0,0 +1,337 @@
+---
+id: 65099dbd8f137d58e5c0ff16
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Create one more `p` element and interpolate the `description` you destructured as the text. Also, create a `strong` element inside the paragraph with the text `Description:`.
+
+# --hints--
+
+You should create a `p` element with `${description}` as the text.
+
+```js
+assert.match(code, /.*\$\{description\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Description:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Description:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
notebook Colab per questo video.
-Ecco un notebook Colab aggiuntivo che mostra un modo per inserire le formule di interessi e pagamenti in funzioni di Python. Inoltre, vedrai anche un esempio di come usare alcune formule per generare risultati, individuare una tendenza e proseguire con altre formule per analizzare modelli.
+Here is an additional Colab notebook that shows you one way to put many of these interest and payment formulas into Python functions. Also you will see an example of using some formulas to output results, notice a trend, and follow up with other formulas to analyze patterns.
# --question--
diff --git a/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md b/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
index a32ba3e5a4a..2ad89798285 100644
--- a/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
+++ b/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
@@ -71,8 +71,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md b/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
index 5cd47851b2a..85e56755486 100644
--- a/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
+++ b/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
@@ -73,7 +73,7 @@ substringDivisibility(5);
```js
function substringDivisibility(n) {
- function isSubDivisable(digits) {
+ function isSubDivisible(digits) {
const factors = [2, 3, 5, 7, 11, 13, 17];
for (let i = 1; i < digits.length - 2; i++) {
@@ -108,17 +108,17 @@ function substringDivisibility(n) {
}
const allowedDigits = [...new Array(n + 1).keys()];
- const divisablePandigitals = [];
+ const divisiblePandigitals = [];
heapsPermutations(
allowedDigits.length,
allowedDigits,
- isSubDivisable,
- divisablePandigitals
+ isSubDivisible,
+ divisiblePandigitals
);
let sum = 0;
- for (let i = 0; i < divisablePandigitals.length; i++) {
- sum += divisablePandigitals[i];
+ for (let i = 0; i < divisiblePandigitals.length; i++) {
+ sum += divisiblePandigitals[i];
}
return sum;
diff --git a/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md b/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
index bcab38f4885..8e1f0c577d2 100644
--- a/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
+++ b/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
@@ -67,8 +67,8 @@ class PrimeSeive {
const prime = 2 * i + 3;
primes.push(prime);
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
@@ -101,10 +101,10 @@ class PrimeSeive {
};
function consecutivePrimeSum(limit) {
- // Initalize seive
+ // Initialize seive
const primeSeive = new PrimeSeive(limit);
- // Initalize for longest sum < 100
+ // Initialize for longest sum < 100
let bestPrime = 41;
let bestI = 0;
let bestJ = 5;
diff --git a/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md b/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
index 2267e786ad5..7e65bb8d6de 100644
--- a/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
+++ b/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
@@ -67,8 +67,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/italian/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md b/curriculum/challenges/italian/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
index 5302295f689..01c38f83229 100644
--- a/curriculum/challenges/italian/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
+++ b/curriculum/challenges/italian/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
@@ -31,10 +31,10 @@ Per $1 ≤ k ≤ 200$, trova $\sum{m(k)}$.
# --hints--
-`efficientExponentation()` dovrebbe restituire `1582`.
+`efficientExponentiation()` should return `1582`.
```js
-assert.strictEqual(efficientExponentation(), 1582);
+assert.strictEqual(efficientExponentiation(), 1582);
```
# --seed--
@@ -42,12 +42,12 @@ assert.strictEqual(efficientExponentation(), 1582);
## --seed-contents--
```js
-function efficientExponentation() {
+function efficientExponentiation() {
return true;
}
-efficientExponentation();
+efficientExponentiation();
```
# --solutions--
diff --git a/curriculum/challenges/italian/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md b/curriculum/challenges/italian/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
index 83858a645f2..ad6362154e6 100644
--- a/curriculum/challenges/italian/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
+++ b/curriculum/challenges/italian/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
@@ -67,8 +67,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/italian/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md b/curriculum/challenges/italian/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
index 33371151f91..80917c7889e 100644
--- a/curriculum/challenges/italian/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
+++ b/curriculum/challenges/italian/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
@@ -35,7 +35,7 @@ concealedSquare();
```js
// Check if n**2 matches the pattern
-function squareMatchs(n) {
+function squareMatches(n) {
// Need BigInt due to size of values
let nSquared = (BigInt(n) * BigInt(n)).toString();
@@ -55,8 +55,8 @@ function concealedSquare() {
for (let x = maxSquareRoot; x >= minSquareRoot; x -= 10) {
// Note: 3*3 = 9 and 7*7 = 49 are only trailing digits
// that can produce 9 as trailing digit in square
- if (squareMatchs(x + 3)) return (x + 3)*10;
- if (squareMatchs(x + 7)) return (x + 7)*10;
+ if (squareMatches(x + 3)) return (x + 3)*10;
+ if (squareMatches(x + 7)) return (x + 7)*10;
}
return -1;
}
diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index 40db4d41e6b..a22200aef9e 100644
--- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -54,7 +54,24 @@ assert.match(code, /myStorage\.car\.inside/);
`gloveBoxContents` should still be declared with `const`.
```js
-assert.match(code, /const\s+gloveBoxContents\s*=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]|const\s*{\s*('|")glove box\2:\s*gloveBoxContents\s*}\s*=\s*myStorage\.car\.inside;/);
+assert.match(code, /const\s+gloveBoxContents\s*=/);
+```
+
+You should not change the `myStorage` object.
+
+```js
+const expectedMyStorage = {
+ "car":{
+ "inside":{
+ "glove box":"maps",
+ "passenger seat":"crumbs"
+ },
+ "outside":{
+ "trunk":"jack"
+ }
+ }
+};
+assert.deepStrictEqual(myStorage, expectedMyStorage);
```
# --seed--
diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
index c3287f53f8a..cdc5732e21d 100644
--- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
+++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
@@ -10,7 +10,7 @@ dashedName: catch-misspelled-variable-and-function-names
`console.log()` と `typeof` メソッドの 2 つは、中間値やプログラム出力の型を確認する場合によく使用されます。 よくあるバグの原因として、 スペルミスがあります。タイピングの速い人が起こしがちな構文レベルの問題の 1 つです。
-変数名や関数名の文字が、入れ替わっていたり、不足していたり、大文字小文字が間違っていたりすると、ブラウザーで存在しないオブジェクトが検索され、結果として参照エラーという形でエラーが表示されます。 JavaScript の変数名や関数名は大文字と小文字が区別されます。
+Transposed, missing, or miscapitalized characters in a variable or function name will have the browser looking for an object that doesn't exist - and complain in the form of a reference error. JavaScript の変数名や関数名は大文字と小文字が区別されます。
# --instructions--
diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
index 2c312d901a0..89f62fbe6ae 100644
--- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
+++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
@@ -58,8 +58,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/japanese/06-quality-assurance/quality-assurance-projects/issue-tracker.md b/curriculum/challenges/japanese/06-quality-assurance/quality-assurance-projects/issue-tracker.md
index ca78119330e..407adbb970b 100644
--- a/curriculum/challenges/japanese/06-quality-assurance/quality-assurance-projects/issue-tracker.md
+++ b/curriculum/challenges/japanese/06-quality-assurance/quality-assurance-projects/issue-tracker.md
@@ -231,13 +231,13 @@ async (getUserInput) => {
};
const url = getUserInput('url') + '/api/issues/fcc-project';
const itemToUpdate = await $.post(url, initialData);
- const updateSucccess = await $.ajax({
+ const updateSuccess = await $.ajax({
url: url,
type: 'PUT',
data: { _id: itemToUpdate._id, issue_text: 'New Issue Text' }
});
- assert.isObject(updateSucccess);
- assert.deepEqual(updateSucccess, {
+ assert.isObject(updateSuccess);
+ assert.deepEqual(updateSuccess, {
result: 'successfully updated',
_id: itemToUpdate._id
});
diff --git a/curriculum/challenges/japanese/10-coding-interview-prep/rosetta-code/24-game.md b/curriculum/challenges/japanese/10-coding-interview-prep/rosetta-code/24-game.md
index 37826769391..e75dbf3acf7 100644
--- a/curriculum/challenges/japanese/10-coding-interview-prep/rosetta-code/24-game.md
+++ b/curriculum/challenges/japanese/10-coding-interview-prep/rosetta-code/24-game.md
@@ -82,7 +82,7 @@ const OPERATORS_ = {
"/": (a, b) => a / b,
}
-const PRECIDENCE_ = {
+const PRECEDENCE_ = {
"+": 1,
"-": 1,
"*": 2,
@@ -114,7 +114,7 @@ function evaluate_(expression) {
case "*":
case "/":
while (stack.length &&
- PRECIDENCE_[c] <= PRECIDENCE_[stack[stack.length-1]]) {
+ PRECEDENCE_[c] <= PRECEDENCE_[stack[stack.length-1]]) {
postfix += stack.pop();
}
stack.push(c);
diff --git a/curriculum/challenges/japanese/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md b/curriculum/challenges/japanese/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
index 9433bd3a11f..e8feefb3938 100644
--- a/curriculum/challenges/japanese/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
+++ b/curriculum/challenges/japanese/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
@@ -175,7 +175,7 @@ function dealFreeCell(seed) {
const rng = FreeCellRNG(seed);
const deck = getDeck();
- const deltCards = [[], [], [], [], [], [], []];
+ const dealtCards = [[], [], [], [], [], [], []];
let currentColumn = 0;
let currentRow = 0;
@@ -195,7 +195,7 @@ function dealFreeCell(seed) {
card = deck.pop();
// Deal this card
- deltCards[currentRow].push(card);
+ dealtCards[currentRow].push(card);
currentColumn += 1;
if (currentColumn === 8) {
currentColumn = 0;
@@ -203,6 +203,6 @@ function dealFreeCell(seed) {
}
}
- return deltCards;
+ return dealtCards;
}
```
diff --git a/curriculum/challenges/japanese/10-coding-interview-prep/rosetta-code/department-numbers.md b/curriculum/challenges/japanese/10-coding-interview-prep/rosetta-code/department-numbers.md
index 802ab0fbfa0..08ed1e73889 100644
--- a/curriculum/challenges/japanese/10-coding-interview-prep/rosetta-code/department-numbers.md
+++ b/curriculum/challenges/japanese/10-coding-interview-prep/rosetta-code/department-numbers.md
@@ -101,7 +101,7 @@ function combinations(possibleNumbers, total) {
function combinations(possibleNumbers, total) {
let firstNumber;
let secondNumber;
- let thridNumber;
+ let thirdNumber;
const allCombinations = [];
for (let i = 0; i < possibleNumbers.length; i += 1) {
@@ -112,10 +112,10 @@ function combinations(possibleNumbers, total) {
secondNumber = possibleNumbers[j];
if (j !== i && firstNumber + secondNumber <= total) {
- thridNumber = total - firstNumber - secondNumber;
+ thirdNumber = total - firstNumber - secondNumber;
- if (thridNumber !== firstNumber && thridNumber !== secondNumber && possibleNumbers.includes(thridNumber)) {
- allCombinations.push([firstNumber, secondNumber, thridNumber]);
+ if (thirdNumber !== firstNumber && thirdNumber !== secondNumber && possibleNumbers.includes(thirdNumber)) {
+ allCombinations.push([firstNumber, secondNumber, thirdNumber]);
}
}
}
diff --git a/curriculum/challenges/japanese/10-coding-interview-prep/rosetta-code/lu-decomposition.md b/curriculum/challenges/japanese/10-coding-interview-prep/rosetta-code/lu-decomposition.md
index dcb858fc81c..7543099186e 100644
--- a/curriculum/challenges/japanese/10-coding-interview-prep/rosetta-code/lu-decomposition.md
+++ b/curriculum/challenges/japanese/10-coding-interview-prep/rosetta-code/lu-decomposition.md
@@ -80,7 +80,7 @@ $PA = LU$
# --instructions--
-タスクは、nxn の正方行列 $A$ を取り、下三角行列 $L$、上三角行列 $U$、および置換行列 $P$ を返すルーチンを実装して、上記の式が満たされるようにすることです。 戻り値は、 `[L, U, P]` の形式でなければなりません。
+The task is to implement a routine which will take a square nxn matrix $A$ and return a lower triangular matrix $L$, a upper triangular matrix $U$ and a permutation matrix $P$, so that the above equation is fulfilled. 戻り値は、 `[L, U, P]` の形式でなければなりません。
# --hints--
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
index 098db8a6e98..c8078873dcf 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
@@ -9,7 +9,7 @@ dashedName: step-82
ペンギンのくちばしと足には同じ `color` が割り当てられています。
-新たに `--penguin-picorna` という名前のカスタム CSS 変数を作成し、上記の色に関係するプロパティの値をすべて変数に置き換えてください。
+Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it.
# --hints--
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
index c335f2d7bc9..a1c1c26f120 100644
--- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
@@ -11,7 +11,7 @@ Inside `pick`, use `let` to initialize a variable named `numbers` and set it to
# --hints--
-Your `pick` function should initalize `numbers` to an empty array `[]`.
+Your `pick` function should initialize `numbers` to an empty array `[]`.
```js
assert.match(pick.toString(), /numbers\s*=\s*\[\]/);
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md
new file mode 100644
index 00000000000..4b042aa87ba
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md
@@ -0,0 +1,310 @@
+---
+id: 64e4e4c4ec263b62ae7bf54d
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn how `localStorage` works in JavaScript by building a Todo app. LocalStorage is a web storage feature of JavaScript that lets you persist data by storing the data as a **key:value** pair.
+
+The HTML and CSS for this project have been provided for you. Take a look at the files to get yourself familiarized with them.
+
+Begin by accessing the `task-form`, `confirm-close-dialog`, and `open-task-form-btn` elements with the `getElementById()` method. Save them in the variables `taskForm`, `confirmCloseDialog`, and `openTaskFormBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `task-form` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should assign the `task-form` element to the variable `taskForm`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+taskForm\s*=\s*document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should use `getElementById()` to access the `confirm-close-dialog` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should assign the `confirm-close-dialog` element to the variable `confirmCloseDialog`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+confirmCloseDialog\s*=\s*document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should use `getElementById()` to access the `open-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `open-task-form-btn` element to the variable `openTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+openTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
new file mode 100644
index 00000000000..32310409728
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
@@ -0,0 +1,310 @@
+---
+id: 64e4e6c86954de67a3e44ee3
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+You need to access more elements with the `getElementById()` method. This time you need the `close-task-form-btn`, `add-or-update-task-btn`, and `cancel-btn` elements. Save them in the variables `closeTaskFormBtn`, `addOrUpdateTaskBtn`, and `cancelBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `close-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `close-task-form-btn` element to the variable `closeTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+closeTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `add-or-update-task-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should assign the `add-or-update-task-btn` element to the variable `addOrUpdateTaskBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+addOrUpdateTaskBtn\s*=\s*document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `cancel-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+You should assign the `cancel-btn` element to the variable `cancelBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cancelBtn\s*=\s*document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
new file mode 100644
index 00000000000..17fc6b76517
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
@@ -0,0 +1,313 @@
+---
+id: 64e4e6fe78b5aa67ef2fc3e7
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next, access the `discard-btn`, `tasks-container`, and `title-input` elements using the `getElementById()` method. Save them in variables named `discardBtn`, `tasksContainer`, and `titleInput`, respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `discard-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should assign the `discard-btn` element to the variable `discardBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+discardBtn\s*=\s*document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `tasks-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should assign the `tasks-container` element to the variable `tasksContainer`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+tasksContainer\s*=\s*document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should use `getElementById()` to access the `title-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+You should assign the `title-input` element to the variable `titleInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+titleInput\s*=\s*document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
new file mode 100644
index 00000000000..6e543d36acc
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
@@ -0,0 +1,304 @@
+---
+id: 64e4e7241f52bb682eeb8211
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last set of elements you need to get from the HTML file are the `date-input` and `description-input` elements. Save them in the variables `dateInput` and `descriptionInput` respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `date-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should assign the `date-input` element to the variable `dateInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dateInput\s*=\s*document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should use `getElementById()` to access the `description-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+You should assign the `description-input` element to the variable `descriptionInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+descriptionInput\s*=\s*document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
new file mode 100644
index 00000000000..6f0cd6e9fc4
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
@@ -0,0 +1,296 @@
+---
+id: 64e4e74d0fb4f0687bf4145d
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `taskData` constant and set it to an empty array. This array will store all the tasks along with their associated data, including title, due date, and description. This storage will enable you to keep track of tasks, display them on the page, and save them to `localStorage`.
+
+Use `let` to create a `currentTask` variable and set it to an empty object. This variable will be used to track the state when editing and discarding tasks.
+
+# --hints--
+
+You should create a `taskData` constant set to an empty array.
+
+```js
+assert.match(code, /const\s+taskData\s*=\s*\[\];?/)
+```
+
+You should use `let` to create an empty `currentTask` object.
+
+```js
+assert.match(code, /let\s+currentTask\s*=\s*\{\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
new file mode 100644
index 00000000000..7eba2896bf4
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -0,0 +1,307 @@
+---
+id: 64e4e78a7ea4a168de4e6a38
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Now, you will work on opening and closing the form modal.
+
+Add a `click` event listener to the `openTaskFormBtn` variable, and then use `classList` to toggle the `hidden` class on the `taskForm` element.
+
+Now you can click on the "Add new Task" button and see the form modal.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `openTaskFormBtn` variable.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax, then use `classList` property and it's `toggle` method on the `taskForm`, to toggle the class `hidden`. Don't use curly braces.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*taskForm\.classList\.toggle\(\1hidden\1\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
new file mode 100644
index 00000000000..6a29158134e
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
@@ -0,0 +1,309 @@
+---
+id: 64e4e7bbedb22d6939001ad3
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Add a `click` event listener to the `closeTaskFormBtn` variable, then use the `showModal()` method on your `confirmCloseDialog` variable. This will display a modal with the `Discard` and `Cancel` buttons.
+
+`showModal()` is a method associated with the HTML `dialog` element. It is used to display a modal dialog box on a web page.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `closeTaskFormBtn` variable.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `showModal()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(["'`]click["'`],\s*\(.*\)\s*=>\s*{?\s*confirmCloseDialog\.showModal\(\);?\s*}?\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
new file mode 100644
index 00000000000..311984043a0
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
@@ -0,0 +1,316 @@
+---
+id: 64e4eaaa9070a66aecbfe603
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+If the user clicks the `Cancel` button, you want to cancel the process (close the modal showing the two buttons) so the user can continue editing.
+
+Add a `click` event listener to the `cancelBtn` element, then use the `close()` method on the `confirmCloseDialog` variable.
+
+`close()` is a method of the window object you can use to close the current window, or a modal you create with the `dialog` element.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `cancelBtn` variable.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `close()` method on `confirmCloseDialog`. Don't use curly braces.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*confirmCloseDialog\.close\(\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
new file mode 100644
index 00000000000..66a40c9771b
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
@@ -0,0 +1,327 @@
+---
+id: 64e4ebc7eabc5a6babd479cd
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+If the user clicks the `Discard` button, you want to close the modal showing the `Cancel` and `Discard` buttons, then hide the form modal.
+
+Add a click event listener to `discardBtn`, then use the `close()` method on the `confirmCloseDialog` variable. Also, use `classList` to toggle the class `hidden` on `taskForm` so the form modal will close too.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `discardBtn` variable.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{/)
+```
+
+Your event listener should use the `close()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?/)
+```
+
+Your event listener should use `classList` to toggle the class `hidden` on `taskForm`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?\s*taskForm\.classList\.toggle\(\1hidden\1\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
new file mode 100644
index 00000000000..f4002dc0937
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
@@ -0,0 +1,326 @@
+---
+id: 64e4ecd7735a566c9266a338
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Now that you've worked on opening and closing the modal, it's time to get the values from the input fields, save them into the `taskData` array, and display them on the page.
+
+To start, add a `submit` event listener to your `taskForm` element and pass in `e` as the parameter of your arrow function. Inside the curly braces, use the `preventDefault()` method to stop the browser from refreshing the page after submitting the form.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `taskForm` variable.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(/)
+```
+
+Your event listener should listen for a `submit` event.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces with `e` as the parameter.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{/)
+```
+
+You should use the `e.preventDefault()` method to stop the browser from reloading the page.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{\s*e\.preventDefault\(\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
new file mode 100644
index 00000000000..148e52f3e93
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
@@ -0,0 +1,337 @@
+---
+id: 64e4eec13546c06d61a63d59
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+You need to determine whether the task being added already exists or not. If it doesn't exist, you will add it, and if it already exists, you will set it up for editing. You can use the `findIndex()` method to accomplish this.
+
+`findIndex` is an array method that lets find the index of the first element in an array that satisfies a given testing function.
+
+Here's an example:
+
+```js
+const numbers = [3, 1, 5, 6, 10, 9, 8];
+const firstEvenNumIndex = numbers.findIndex((num) => num % 2 === 0);
+
+console.log(firstEvenNumIndex); // Output: 3 – because the first even number (6) is at index 3
+```
+
+Declare a `dataArrIndex` variable using `const` and set it to the result of the `findIndex()` method applied to the `taskData` array. Utilize arrow syntax to provide a callback function with `item` as the parameter, and within the callback, check if the `id` property of `item` is equal to the `id` property of `currentTask`.
+
+If the task exists, this returns the index, and if it doesn't exist, it returns `-1`.
+
+# --hints--
+
+You should use `const` to declare a `dataArrIndex` variable and set it to `taskData.findIndex()`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(/)
+```
+
+You should pass in `item` as the parameter of the arrow function callback. Don't use curly braces.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?/)
+```
+
+Your arrow function callback should check if `item.id === currentTask.id`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?\s*=>\s*item.id\s*===\s*currentTask.id\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
new file mode 100644
index 00000000000..10826de6f17
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
@@ -0,0 +1,340 @@
+---
+id: 64e4f01d6c72086e016a8626
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Next, retrieve the values from the input fields and store them in a `taskObj` object. Each task should also have a unique `id`.
+
+Create a `taskObj` object with an `id` property as the first property. For the value of the `id` property, retrieve the value of the `titleInput` field, convert it to lowercase, and then use the `split()` and `join()` methods to hyphenate it.
+
+Make sure all of those are in template literals because you need the `id` property value as a string.
+
+# --hints--
+
+You should use `const` to create a `taskObj` object.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*/)
+```
+
+Your `taskObj` object should have a key of `id`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id/)
+```
+
+You should use template strings to get `titleInput.value` as the value of your `id` key and convert it to lowercase.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)/)
+```
+
+You should use `.split(' ')` on `titleInput.value.toLowerCase()`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)/)
+```
+
+You should use `.join('-')` on `titleInput.value.toLowerCase().split(' ')`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)\.join\(\1-\1\)\}`,?\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
new file mode 100644
index 00000000000..764de1b0918
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
@@ -0,0 +1,327 @@
+---
+id: 64ec89ee549ecf802de2b3e2
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Retrieve the values from the `titleInput`, `dateInput`, and `descriptionInput` fields, and then save them in the properties `title`, `date`, and `description` of the `taskObj` object.
+
+# --hints--
+
+You should get the value of `titleInput` and save it in a `title` key.
+
+```js
+assert.match(code, /title:\s*titleInput\.value,/)
+```
+
+You should get the value of `dateInput` and save it in a `date` key.
+
+```js
+assert.match(code, /date:\s*dateInput\.value,/)
+```
+
+You should get the value of `descriptionInput` and save it in a `description` key.
+
+```js
+assert.match(code, /description:\s*descriptionInput\.value,?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`,
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ };
+});
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
new file mode 100644
index 00000000000..3d009188d81
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
@@ -0,0 +1,332 @@
+---
+id: 64ec8f717b261e824d82d6a5
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Now that you have obtained the values from the input fields and generated an `id`, you want to add them to your `taskData` array to keep track of each task. However, you should only do this if the task is new. If the task already exists, you will set it up for editing. This is why you have the `dataArrIndex` variable, which provides the index of each task.
+
+Create an `if` statement with the condition `dataArrIndex === -1`. Within the `if` statement, use the `unshift()` method to add the `taskObj` object to the beginning of the `taskData` array.
+
+`unshift()` is an array method that is used to add one or more elements to the beginning of an array.
+
+**N.B:** Try adding a task and log `taskData` to the console to see what it looks like.
+
+# --hints--
+
+You should create an `if` statement with the condition `dataArrIndex === -1`.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{/)
+```
+
+Your `if` statement should have `taskData.unshift(taskObj)` in it's body.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{\s*taskData\.unshift\(taskObj\);?\s*\}/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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,
+ };
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
new file mode 100644
index 00000000000..f1202bb93fe
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
@@ -0,0 +1,331 @@
+---
+id: 64ec9145e424d8835a4e0f28
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have saved the task in the `taskData` array, you should display the task on the page by looping through it.
+
+Use `forEach()` on `taskData`, then destructure `id`, `title`, `date`, `description` as the parameters. Don't return anything yet.
+
+# --hints--
+
+You should use `forEach()` on `taskData`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*/)
+```
+
+You should destructure `id`, `title`, `date`, `description` as the parameters of the callback of your `forEach()`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
new file mode 100644
index 00000000000..06bdd7c6ae5
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
@@ -0,0 +1,336 @@
+---
+id: 64ec9282cd547785258cecf2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Using arrow syntax, create an implicit return and use addition assignment to set the `innerHTML` of `tasksContainer` to empty backticks.
+
+# --hints--
+
+You should not alter the existing `taskData.forEach()` and the values you destructured.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+You should use arrow syntax and attach `innerHTML` to `tasksContainer`.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\(\s*tasksContainer\.innerHTML\s*\))?/)
+```
+
+You should use addition assignment to set the `innerHTML` of `tasksContainer` to an empty pair of backticks.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\s*\(?tasksContainer\.innerHTML\s*\+=\s*`\s*`\)?)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+ taskData.forEach(({id, title, date, description}));
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
new file mode 100644
index 00000000000..b5115f99a51
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
@@ -0,0 +1,333 @@
+---
+id: 64ec9343769e8f85c1e17e05
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Create a `div` element with the class of `task`. Utilize template strings to set the `id` attribute of the `div` to the `id` you destructured from the task data.
+
+# --hints--
+
+You should create a `div` element with the class `task`.
+
+```js
+assert.match(code, /\s*<\/div>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
new file mode 100644
index 00000000000..81dd3530420
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
@@ -0,0 +1,348 @@
+---
+id: 64ec94f0de20c086e09b0fc3
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Create a `p` element and use template strings to set its content to the `title` you destructured. Right before the content of the `p` element, create a `strong` element with the text `Title:`.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+assert.match(code, //)
+```
+
+You should interpolate `${title}` as the text of your `p` element.
+
+```js
+assert.match(code, /
.*\$\{title\}<\/p>/)
+```
+
+You should create a `strong` element after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)/)
+```
+
+Your `strong` element should have the text `Title:`.
+
+```js
+assert.match(code, /(?<=)Title:\s*<\/strong>\s*/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
new file mode 100644
index 00000000000..4820d100d4d
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
@@ -0,0 +1,336 @@
+---
+id: 64ec959a76336c8767f5cd4d
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Similarly to the previous step, create another `p` element, and interpolate the `date` you destructured as the text content. Inside this paragraph, create a `strong` element with the text `Date:`.
+
+# --hints--
+
+You should create a `p` element and interpolate `${date}` as the text.
+
+```js
+assert.match(code, /.*\$\{date\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Date:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Date:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Edit<\/button/)
+```
+
+You should create a `button` element of type `button` a class `btn` and `Delete` as the text, in that order.
+
+```js
+assert.match(code, /Delete<\/button/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+const reset = () => {
+
+}
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Delete ')
+assert.notMatch(splitter[1], /taskForm\.classList\.toggle\(("|')hidden\1\);?/)
+```
+
+You should call the `reset` function.
+
+```js
+assert.match(code, /reset\(\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+--fcc-editable-region--
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+
+});
+--fcc-editable-region--
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 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;
+--fcc-editable-region--
+ confirmCloseDialog.showModal();
+--fcc-editable-region--
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
\s*Title:<\/strong>\s*\$\{title\}<\/p>\s*Date:<\/strong>\s*\$\{date\}<\/p>\s*Description:<\/strong>\s*\$\{description\}<\/p>\s*Edit<\/button>\s*Delete<\/button>\s*<\/div>\s*`\)\s*\);?\s*\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Edit<\/button>/)
+```
+
+You should add `onclick="deleteTask(this)"` as the first attribute of the delete button.
+
+```js
+assert.match(code, /Delete<\/button>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
Edit
+
Delete
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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,
+ };
+
+ --fcc-editable-region--
+ if (dataArrIndex === -1) {
+ taskData.unshift(taskObj);
+ }
+
+ --fcc-editable-region--
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+const taskData = [];
+--fcc-editable-region--
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(' ').join('-')}`,
+ };
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
new file mode 100644
index 00000000000..0c9fbc152b7
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
@@ -0,0 +1,337 @@
+---
+id: 65099dbd8f137d58e5c0ff16
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Create one more `p` element and interpolate the `description` you destructured as the text. Also, create a `strong` element inside the paragraph with the text `Description:`.
+
+# --hints--
+
+You should create a `p` element with `${description}` as the text.
+
+```js
+assert.match(code, /.*\$\{description\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Description:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Description:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
Colab notebook to go along with this video.
-Here is an additional Colab notebook that shows you one way to put many of these interest and payment forumlas into Python functions. Also you will see an example of using some formulas to output results, notice a trend, and follow up with other formulas to analyze patterns.
+Here is an additional Colab notebook that shows you one way to put many of these interest and payment formulas into Python functions. Also you will see an example of using some formulas to output results, notice a trend, and follow up with other formulas to analyze patterns.
# --question--
diff --git a/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md b/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
index 39ab831dad7..144796de1b0 100644
--- a/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
+++ b/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
@@ -71,8 +71,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md b/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
index 53ae7b50350..871e1408079 100644
--- a/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
+++ b/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
@@ -73,7 +73,7 @@ substringDivisibility(5);
```js
function substringDivisibility(n) {
- function isSubDivisable(digits) {
+ function isSubDivisible(digits) {
const factors = [2, 3, 5, 7, 11, 13, 17];
for (let i = 1; i < digits.length - 2; i++) {
@@ -108,17 +108,17 @@ function substringDivisibility(n) {
}
const allowedDigits = [...new Array(n + 1).keys()];
- const divisablePandigitals = [];
+ const divisiblePandigitals = [];
heapsPermutations(
allowedDigits.length,
allowedDigits,
- isSubDivisable,
- divisablePandigitals
+ isSubDivisible,
+ divisiblePandigitals
);
let sum = 0;
- for (let i = 0; i < divisablePandigitals.length; i++) {
- sum += divisablePandigitals[i];
+ for (let i = 0; i < divisiblePandigitals.length; i++) {
+ sum += divisiblePandigitals[i];
}
return sum;
diff --git a/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md b/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
index 7cd5bc67b14..2d583a52355 100644
--- a/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
+++ b/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
@@ -67,8 +67,8 @@ class PrimeSeive {
const prime = 2 * i + 3;
primes.push(prime);
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
@@ -101,10 +101,10 @@ class PrimeSeive {
};
function consecutivePrimeSum(limit) {
- // Initalize seive
+ // Initialize seive
const primeSeive = new PrimeSeive(limit);
- // Initalize for longest sum < 100
+ // Initialize for longest sum < 100
let bestPrime = 41;
let bestI = 0;
let bestJ = 5;
diff --git a/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md b/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
index cdbfc3e568b..5b55ddd8079 100644
--- a/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
+++ b/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
@@ -67,8 +67,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/japanese/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md b/curriculum/challenges/japanese/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
index 78c29aa7952..4fa15980a0d 100644
--- a/curriculum/challenges/japanese/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
+++ b/curriculum/challenges/japanese/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
@@ -31,10 +31,10 @@ For $1 ≤ k ≤ 200$, find $\sum{m(k)}$.
# --hints--
-`efficientExponentation()` should return `1582`.
+`efficientExponentiation()` should return `1582`.
```js
-assert.strictEqual(efficientExponentation(), 1582);
+assert.strictEqual(efficientExponentiation(), 1582);
```
# --seed--
@@ -42,12 +42,12 @@ assert.strictEqual(efficientExponentation(), 1582);
## --seed-contents--
```js
-function efficientExponentation() {
+function efficientExponentiation() {
return true;
}
-efficientExponentation();
+efficientExponentiation();
```
# --solutions--
diff --git a/curriculum/challenges/japanese/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md b/curriculum/challenges/japanese/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
index 49d59948762..e402ff347c5 100644
--- a/curriculum/challenges/japanese/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
+++ b/curriculum/challenges/japanese/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
@@ -67,8 +67,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/japanese/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md b/curriculum/challenges/japanese/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
index 596f703da28..b843f6f2be2 100644
--- a/curriculum/challenges/japanese/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
+++ b/curriculum/challenges/japanese/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
@@ -35,7 +35,7 @@ concealedSquare();
```js
// Check if n**2 matches the pattern
-function squareMatchs(n) {
+function squareMatches(n) {
// Need BigInt due to size of values
let nSquared = (BigInt(n) * BigInt(n)).toString();
@@ -55,8 +55,8 @@ function concealedSquare() {
for (let x = maxSquareRoot; x >= minSquareRoot; x -= 10) {
// Note: 3*3 = 9 and 7*7 = 49 are only trailing digits
// that can produce 9 as trailing digit in square
- if (squareMatchs(x + 3)) return (x + 3)*10;
- if (squareMatchs(x + 7)) return (x + 7)*10;
+ if (squareMatches(x + 3)) return (x + 3)*10;
+ if (squareMatches(x + 7)) return (x + 7)*10;
}
return -1;
}
diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index 8833a450d9d..4c838c551e9 100644
--- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -54,7 +54,24 @@ assert.match(code, /myStorage\.car\.inside/);
`gloveBoxContents` ainda deve ser declarada com `const`.
```js
-assert.match(code, /const\s+gloveBoxContents\s*=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]|const\s*{\s*('|")glove box\2:\s*gloveBoxContents\s*}\s*=\s*myStorage\.car\.inside;/);
+assert.match(code, /const\s+gloveBoxContents\s*=/);
+```
+
+You should not change the `myStorage` object.
+
+```js
+const expectedMyStorage = {
+ "car":{
+ "inside":{
+ "glove box":"maps",
+ "passenger seat":"crumbs"
+ },
+ "outside":{
+ "trunk":"jack"
+ }
+ }
+};
+assert.deepStrictEqual(myStorage, expectedMyStorage);
```
# --seed--
diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
index 680e6047c8d..4423f06422b 100644
--- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
+++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
@@ -58,8 +58,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/portuguese/06-quality-assurance/quality-assurance-projects/issue-tracker.md b/curriculum/challenges/portuguese/06-quality-assurance/quality-assurance-projects/issue-tracker.md
index a38406f4657..2bc02b6b6a8 100644
--- a/curriculum/challenges/portuguese/06-quality-assurance/quality-assurance-projects/issue-tracker.md
+++ b/curriculum/challenges/portuguese/06-quality-assurance/quality-assurance-projects/issue-tracker.md
@@ -231,13 +231,13 @@ async (getUserInput) => {
};
const url = getUserInput('url') + '/api/issues/fcc-project';
const itemToUpdate = await $.post(url, initialData);
- const updateSucccess = await $.ajax({
+ const updateSuccess = await $.ajax({
url: url,
type: 'PUT',
data: { _id: itemToUpdate._id, issue_text: 'New Issue Text' }
});
- assert.isObject(updateSucccess);
- assert.deepEqual(updateSucccess, {
+ assert.isObject(updateSuccess);
+ assert.deepEqual(updateSuccess, {
result: 'successfully updated',
_id: itemToUpdate._id
});
diff --git a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/24-game.md b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/24-game.md
index 5bcbf1082d3..7817742a6d8 100644
--- a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/24-game.md
+++ b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/24-game.md
@@ -82,7 +82,7 @@ const OPERATORS_ = {
"/": (a, b) => a / b,
}
-const PRECIDENCE_ = {
+const PRECEDENCE_ = {
"+": 1,
"-": 1,
"*": 2,
@@ -114,7 +114,7 @@ function evaluate_(expression) {
case "*":
case "/":
while (stack.length &&
- PRECIDENCE_[c] <= PRECIDENCE_[stack[stack.length-1]]) {
+ PRECEDENCE_[c] <= PRECEDENCE_[stack[stack.length-1]]) {
postfix += stack.pop();
}
stack.push(c);
diff --git a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
index 9a074669ca8..0e219a655bb 100644
--- a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
+++ b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
@@ -175,7 +175,7 @@ function dealFreeCell(seed) {
const rng = FreeCellRNG(seed);
const deck = getDeck();
- const deltCards = [[], [], [], [], [], [], []];
+ const dealtCards = [[], [], [], [], [], [], []];
let currentColumn = 0;
let currentRow = 0;
@@ -195,7 +195,7 @@ function dealFreeCell(seed) {
card = deck.pop();
// Deal this card
- deltCards[currentRow].push(card);
+ dealtCards[currentRow].push(card);
currentColumn += 1;
if (currentColumn === 8) {
currentColumn = 0;
@@ -203,6 +203,6 @@ function dealFreeCell(seed) {
}
}
- return deltCards;
+ return dealtCards;
}
```
diff --git a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/department-numbers.md b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/department-numbers.md
index 1a51909a997..99239f97805 100644
--- a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/department-numbers.md
+++ b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/department-numbers.md
@@ -101,7 +101,7 @@ function combinations(possibleNumbers, total) {
function combinations(possibleNumbers, total) {
let firstNumber;
let secondNumber;
- let thridNumber;
+ let thirdNumber;
const allCombinations = [];
for (let i = 0; i < possibleNumbers.length; i += 1) {
@@ -112,10 +112,10 @@ function combinations(possibleNumbers, total) {
secondNumber = possibleNumbers[j];
if (j !== i && firstNumber + secondNumber <= total) {
- thridNumber = total - firstNumber - secondNumber;
+ thirdNumber = total - firstNumber - secondNumber;
- if (thridNumber !== firstNumber && thridNumber !== secondNumber && possibleNumbers.includes(thridNumber)) {
- allCombinations.push([firstNumber, secondNumber, thridNumber]);
+ if (thirdNumber !== firstNumber && thirdNumber !== secondNumber && possibleNumbers.includes(thirdNumber)) {
+ allCombinations.push([firstNumber, secondNumber, thirdNumber]);
}
}
}
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md
new file mode 100644
index 00000000000..4b042aa87ba
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md
@@ -0,0 +1,310 @@
+---
+id: 64e4e4c4ec263b62ae7bf54d
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn how `localStorage` works in JavaScript by building a Todo app. LocalStorage is a web storage feature of JavaScript that lets you persist data by storing the data as a **key:value** pair.
+
+The HTML and CSS for this project have been provided for you. Take a look at the files to get yourself familiarized with them.
+
+Begin by accessing the `task-form`, `confirm-close-dialog`, and `open-task-form-btn` elements with the `getElementById()` method. Save them in the variables `taskForm`, `confirmCloseDialog`, and `openTaskFormBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `task-form` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should assign the `task-form` element to the variable `taskForm`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+taskForm\s*=\s*document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should use `getElementById()` to access the `confirm-close-dialog` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should assign the `confirm-close-dialog` element to the variable `confirmCloseDialog`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+confirmCloseDialog\s*=\s*document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should use `getElementById()` to access the `open-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `open-task-form-btn` element to the variable `openTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+openTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
new file mode 100644
index 00000000000..32310409728
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
@@ -0,0 +1,310 @@
+---
+id: 64e4e6c86954de67a3e44ee3
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+You need to access more elements with the `getElementById()` method. This time you need the `close-task-form-btn`, `add-or-update-task-btn`, and `cancel-btn` elements. Save them in the variables `closeTaskFormBtn`, `addOrUpdateTaskBtn`, and `cancelBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `close-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `close-task-form-btn` element to the variable `closeTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+closeTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `add-or-update-task-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should assign the `add-or-update-task-btn` element to the variable `addOrUpdateTaskBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+addOrUpdateTaskBtn\s*=\s*document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `cancel-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+You should assign the `cancel-btn` element to the variable `cancelBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cancelBtn\s*=\s*document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
new file mode 100644
index 00000000000..17fc6b76517
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
@@ -0,0 +1,313 @@
+---
+id: 64e4e6fe78b5aa67ef2fc3e7
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next, access the `discard-btn`, `tasks-container`, and `title-input` elements using the `getElementById()` method. Save them in variables named `discardBtn`, `tasksContainer`, and `titleInput`, respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `discard-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should assign the `discard-btn` element to the variable `discardBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+discardBtn\s*=\s*document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `tasks-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should assign the `tasks-container` element to the variable `tasksContainer`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+tasksContainer\s*=\s*document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should use `getElementById()` to access the `title-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+You should assign the `title-input` element to the variable `titleInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+titleInput\s*=\s*document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
new file mode 100644
index 00000000000..6e543d36acc
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
@@ -0,0 +1,304 @@
+---
+id: 64e4e7241f52bb682eeb8211
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last set of elements you need to get from the HTML file are the `date-input` and `description-input` elements. Save them in the variables `dateInput` and `descriptionInput` respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `date-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should assign the `date-input` element to the variable `dateInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dateInput\s*=\s*document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should use `getElementById()` to access the `description-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+You should assign the `description-input` element to the variable `descriptionInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+descriptionInput\s*=\s*document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
new file mode 100644
index 00000000000..6f0cd6e9fc4
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
@@ -0,0 +1,296 @@
+---
+id: 64e4e74d0fb4f0687bf4145d
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `taskData` constant and set it to an empty array. This array will store all the tasks along with their associated data, including title, due date, and description. This storage will enable you to keep track of tasks, display them on the page, and save them to `localStorage`.
+
+Use `let` to create a `currentTask` variable and set it to an empty object. This variable will be used to track the state when editing and discarding tasks.
+
+# --hints--
+
+You should create a `taskData` constant set to an empty array.
+
+```js
+assert.match(code, /const\s+taskData\s*=\s*\[\];?/)
+```
+
+You should use `let` to create an empty `currentTask` object.
+
+```js
+assert.match(code, /let\s+currentTask\s*=\s*\{\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
new file mode 100644
index 00000000000..7eba2896bf4
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -0,0 +1,307 @@
+---
+id: 64e4e78a7ea4a168de4e6a38
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Now, you will work on opening and closing the form modal.
+
+Add a `click` event listener to the `openTaskFormBtn` variable, and then use `classList` to toggle the `hidden` class on the `taskForm` element.
+
+Now you can click on the "Add new Task" button and see the form modal.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `openTaskFormBtn` variable.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax, then use `classList` property and it's `toggle` method on the `taskForm`, to toggle the class `hidden`. Don't use curly braces.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*taskForm\.classList\.toggle\(\1hidden\1\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
new file mode 100644
index 00000000000..6a29158134e
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
@@ -0,0 +1,309 @@
+---
+id: 64e4e7bbedb22d6939001ad3
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Add a `click` event listener to the `closeTaskFormBtn` variable, then use the `showModal()` method on your `confirmCloseDialog` variable. This will display a modal with the `Discard` and `Cancel` buttons.
+
+`showModal()` is a method associated with the HTML `dialog` element. It is used to display a modal dialog box on a web page.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `closeTaskFormBtn` variable.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `showModal()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(["'`]click["'`],\s*\(.*\)\s*=>\s*{?\s*confirmCloseDialog\.showModal\(\);?\s*}?\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
new file mode 100644
index 00000000000..311984043a0
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
@@ -0,0 +1,316 @@
+---
+id: 64e4eaaa9070a66aecbfe603
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+If the user clicks the `Cancel` button, you want to cancel the process (close the modal showing the two buttons) so the user can continue editing.
+
+Add a `click` event listener to the `cancelBtn` element, then use the `close()` method on the `confirmCloseDialog` variable.
+
+`close()` is a method of the window object you can use to close the current window, or a modal you create with the `dialog` element.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `cancelBtn` variable.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `close()` method on `confirmCloseDialog`. Don't use curly braces.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*confirmCloseDialog\.close\(\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
new file mode 100644
index 00000000000..66a40c9771b
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
@@ -0,0 +1,327 @@
+---
+id: 64e4ebc7eabc5a6babd479cd
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+If the user clicks the `Discard` button, you want to close the modal showing the `Cancel` and `Discard` buttons, then hide the form modal.
+
+Add a click event listener to `discardBtn`, then use the `close()` method on the `confirmCloseDialog` variable. Also, use `classList` to toggle the class `hidden` on `taskForm` so the form modal will close too.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `discardBtn` variable.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{/)
+```
+
+Your event listener should use the `close()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?/)
+```
+
+Your event listener should use `classList` to toggle the class `hidden` on `taskForm`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?\s*taskForm\.classList\.toggle\(\1hidden\1\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
new file mode 100644
index 00000000000..f4002dc0937
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
@@ -0,0 +1,326 @@
+---
+id: 64e4ecd7735a566c9266a338
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Now that you've worked on opening and closing the modal, it's time to get the values from the input fields, save them into the `taskData` array, and display them on the page.
+
+To start, add a `submit` event listener to your `taskForm` element and pass in `e` as the parameter of your arrow function. Inside the curly braces, use the `preventDefault()` method to stop the browser from refreshing the page after submitting the form.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `taskForm` variable.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(/)
+```
+
+Your event listener should listen for a `submit` event.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces with `e` as the parameter.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{/)
+```
+
+You should use the `e.preventDefault()` method to stop the browser from reloading the page.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{\s*e\.preventDefault\(\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
new file mode 100644
index 00000000000..148e52f3e93
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
@@ -0,0 +1,337 @@
+---
+id: 64e4eec13546c06d61a63d59
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+You need to determine whether the task being added already exists or not. If it doesn't exist, you will add it, and if it already exists, you will set it up for editing. You can use the `findIndex()` method to accomplish this.
+
+`findIndex` is an array method that lets find the index of the first element in an array that satisfies a given testing function.
+
+Here's an example:
+
+```js
+const numbers = [3, 1, 5, 6, 10, 9, 8];
+const firstEvenNumIndex = numbers.findIndex((num) => num % 2 === 0);
+
+console.log(firstEvenNumIndex); // Output: 3 – because the first even number (6) is at index 3
+```
+
+Declare a `dataArrIndex` variable using `const` and set it to the result of the `findIndex()` method applied to the `taskData` array. Utilize arrow syntax to provide a callback function with `item` as the parameter, and within the callback, check if the `id` property of `item` is equal to the `id` property of `currentTask`.
+
+If the task exists, this returns the index, and if it doesn't exist, it returns `-1`.
+
+# --hints--
+
+You should use `const` to declare a `dataArrIndex` variable and set it to `taskData.findIndex()`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(/)
+```
+
+You should pass in `item` as the parameter of the arrow function callback. Don't use curly braces.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?/)
+```
+
+Your arrow function callback should check if `item.id === currentTask.id`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?\s*=>\s*item.id\s*===\s*currentTask.id\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
new file mode 100644
index 00000000000..10826de6f17
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
@@ -0,0 +1,340 @@
+---
+id: 64e4f01d6c72086e016a8626
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Next, retrieve the values from the input fields and store them in a `taskObj` object. Each task should also have a unique `id`.
+
+Create a `taskObj` object with an `id` property as the first property. For the value of the `id` property, retrieve the value of the `titleInput` field, convert it to lowercase, and then use the `split()` and `join()` methods to hyphenate it.
+
+Make sure all of those are in template literals because you need the `id` property value as a string.
+
+# --hints--
+
+You should use `const` to create a `taskObj` object.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*/)
+```
+
+Your `taskObj` object should have a key of `id`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id/)
+```
+
+You should use template strings to get `titleInput.value` as the value of your `id` key and convert it to lowercase.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)/)
+```
+
+You should use `.split(' ')` on `titleInput.value.toLowerCase()`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)/)
+```
+
+You should use `.join('-')` on `titleInput.value.toLowerCase().split(' ')`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)\.join\(\1-\1\)\}`,?\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
new file mode 100644
index 00000000000..764de1b0918
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
@@ -0,0 +1,327 @@
+---
+id: 64ec89ee549ecf802de2b3e2
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Retrieve the values from the `titleInput`, `dateInput`, and `descriptionInput` fields, and then save them in the properties `title`, `date`, and `description` of the `taskObj` object.
+
+# --hints--
+
+You should get the value of `titleInput` and save it in a `title` key.
+
+```js
+assert.match(code, /title:\s*titleInput\.value,/)
+```
+
+You should get the value of `dateInput` and save it in a `date` key.
+
+```js
+assert.match(code, /date:\s*dateInput\.value,/)
+```
+
+You should get the value of `descriptionInput` and save it in a `description` key.
+
+```js
+assert.match(code, /description:\s*descriptionInput\.value,?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`,
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ };
+});
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
new file mode 100644
index 00000000000..3d009188d81
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
@@ -0,0 +1,332 @@
+---
+id: 64ec8f717b261e824d82d6a5
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Now that you have obtained the values from the input fields and generated an `id`, you want to add them to your `taskData` array to keep track of each task. However, you should only do this if the task is new. If the task already exists, you will set it up for editing. This is why you have the `dataArrIndex` variable, which provides the index of each task.
+
+Create an `if` statement with the condition `dataArrIndex === -1`. Within the `if` statement, use the `unshift()` method to add the `taskObj` object to the beginning of the `taskData` array.
+
+`unshift()` is an array method that is used to add one or more elements to the beginning of an array.
+
+**N.B:** Try adding a task and log `taskData` to the console to see what it looks like.
+
+# --hints--
+
+You should create an `if` statement with the condition `dataArrIndex === -1`.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{/)
+```
+
+Your `if` statement should have `taskData.unshift(taskObj)` in it's body.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{\s*taskData\.unshift\(taskObj\);?\s*\}/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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,
+ };
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
new file mode 100644
index 00000000000..f1202bb93fe
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
@@ -0,0 +1,331 @@
+---
+id: 64ec9145e424d8835a4e0f28
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have saved the task in the `taskData` array, you should display the task on the page by looping through it.
+
+Use `forEach()` on `taskData`, then destructure `id`, `title`, `date`, `description` as the parameters. Don't return anything yet.
+
+# --hints--
+
+You should use `forEach()` on `taskData`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*/)
+```
+
+You should destructure `id`, `title`, `date`, `description` as the parameters of the callback of your `forEach()`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
new file mode 100644
index 00000000000..06bdd7c6ae5
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
@@ -0,0 +1,336 @@
+---
+id: 64ec9282cd547785258cecf2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Using arrow syntax, create an implicit return and use addition assignment to set the `innerHTML` of `tasksContainer` to empty backticks.
+
+# --hints--
+
+You should not alter the existing `taskData.forEach()` and the values you destructured.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+You should use arrow syntax and attach `innerHTML` to `tasksContainer`.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\(\s*tasksContainer\.innerHTML\s*\))?/)
+```
+
+You should use addition assignment to set the `innerHTML` of `tasksContainer` to an empty pair of backticks.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\s*\(?tasksContainer\.innerHTML\s*\+=\s*`\s*`\)?)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+ taskData.forEach(({id, title, date, description}));
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
new file mode 100644
index 00000000000..b5115f99a51
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
@@ -0,0 +1,333 @@
+---
+id: 64ec9343769e8f85c1e17e05
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Create a `div` element with the class of `task`. Utilize template strings to set the `id` attribute of the `div` to the `id` you destructured from the task data.
+
+# --hints--
+
+You should create a `div` element with the class `task`.
+
+```js
+assert.match(code, /\s*<\/div>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
new file mode 100644
index 00000000000..81dd3530420
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
@@ -0,0 +1,348 @@
+---
+id: 64ec94f0de20c086e09b0fc3
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Create a `p` element and use template strings to set its content to the `title` you destructured. Right before the content of the `p` element, create a `strong` element with the text `Title:`.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+assert.match(code, //)
+```
+
+You should interpolate `${title}` as the text of your `p` element.
+
+```js
+assert.match(code, /
.*\$\{title\}<\/p>/)
+```
+
+You should create a `strong` element after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)/)
+```
+
+Your `strong` element should have the text `Title:`.
+
+```js
+assert.match(code, /(?<=)Title:\s*<\/strong>\s*/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
new file mode 100644
index 00000000000..4820d100d4d
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
@@ -0,0 +1,336 @@
+---
+id: 64ec959a76336c8767f5cd4d
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Similarly to the previous step, create another `p` element, and interpolate the `date` you destructured as the text content. Inside this paragraph, create a `strong` element with the text `Date:`.
+
+# --hints--
+
+You should create a `p` element and interpolate `${date}` as the text.
+
+```js
+assert.match(code, /.*\$\{date\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Date:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Date:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Edit<\/button/)
+```
+
+You should create a `button` element of type `button` a class `btn` and `Delete` as the text, in that order.
+
+```js
+assert.match(code, /Delete<\/button/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+const reset = () => {
+
+}
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Delete ')
+assert.notMatch(splitter[1], /taskForm\.classList\.toggle\(("|')hidden\1\);?/)
+```
+
+You should call the `reset` function.
+
+```js
+assert.match(code, /reset\(\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+--fcc-editable-region--
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+
+});
+--fcc-editable-region--
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 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;
+--fcc-editable-region--
+ confirmCloseDialog.showModal();
+--fcc-editable-region--
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
\s*Title:<\/strong>\s*\$\{title\}<\/p>\s*Date:<\/strong>\s*\$\{date\}<\/p>\s*Description:<\/strong>\s*\$\{description\}<\/p>\s*Edit<\/button>\s*Delete<\/button>\s*<\/div>\s*`\)\s*\);?\s*\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Edit<\/button>/)
+```
+
+You should add `onclick="deleteTask(this)"` as the first attribute of the delete button.
+
+```js
+assert.match(code, /Delete<\/button>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
Edit
+
Delete
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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,
+ };
+
+ --fcc-editable-region--
+ if (dataArrIndex === -1) {
+ taskData.unshift(taskObj);
+ }
+
+ --fcc-editable-region--
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+const taskData = [];
+--fcc-editable-region--
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(' ').join('-')}`,
+ };
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
new file mode 100644
index 00000000000..0c9fbc152b7
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
@@ -0,0 +1,337 @@
+---
+id: 65099dbd8f137d58e5c0ff16
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Create one more `p` element and interpolate the `description` you destructured as the text. Also, create a `strong` element inside the paragraph with the text `Description:`.
+
+# --hints--
+
+You should create a `p` element with `${description}` as the text.
+
+```js
+assert.match(code, /.*\$\{description\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Description:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Description:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
LocalStorage is a web storage feature of JavaScript that lets you persist data by storing the data as a **key:value** pair.
+
+The HTML and CSS for this project have been provided for you. Take a look at the files to get yourself familiarized with them.
+
+Begin by accessing the `task-form`, `confirm-close-dialog`, and `open-task-form-btn` elements with the `getElementById()` method. Save them in the variables `taskForm`, `confirmCloseDialog`, and `openTaskFormBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `task-form` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should assign the `task-form` element to the variable `taskForm`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+taskForm\s*=\s*document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should use `getElementById()` to access the `confirm-close-dialog` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should assign the `confirm-close-dialog` element to the variable `confirmCloseDialog`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+confirmCloseDialog\s*=\s*document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should use `getElementById()` to access the `open-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `open-task-form-btn` element to the variable `openTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+openTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
new file mode 100644
index 00000000000..32310409728
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
@@ -0,0 +1,310 @@
+---
+id: 64e4e6c86954de67a3e44ee3
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+You need to access more elements with the `getElementById()` method. This time you need the `close-task-form-btn`, `add-or-update-task-btn`, and `cancel-btn` elements. Save them in the variables `closeTaskFormBtn`, `addOrUpdateTaskBtn`, and `cancelBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `close-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `close-task-form-btn` element to the variable `closeTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+closeTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `add-or-update-task-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should assign the `add-or-update-task-btn` element to the variable `addOrUpdateTaskBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+addOrUpdateTaskBtn\s*=\s*document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `cancel-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+You should assign the `cancel-btn` element to the variable `cancelBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cancelBtn\s*=\s*document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
new file mode 100644
index 00000000000..17fc6b76517
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
@@ -0,0 +1,313 @@
+---
+id: 64e4e6fe78b5aa67ef2fc3e7
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next, access the `discard-btn`, `tasks-container`, and `title-input` elements using the `getElementById()` method. Save them in variables named `discardBtn`, `tasksContainer`, and `titleInput`, respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `discard-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should assign the `discard-btn` element to the variable `discardBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+discardBtn\s*=\s*document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `tasks-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should assign the `tasks-container` element to the variable `tasksContainer`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+tasksContainer\s*=\s*document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should use `getElementById()` to access the `title-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+You should assign the `title-input` element to the variable `titleInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+titleInput\s*=\s*document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
new file mode 100644
index 00000000000..6e543d36acc
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
@@ -0,0 +1,304 @@
+---
+id: 64e4e7241f52bb682eeb8211
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last set of elements you need to get from the HTML file are the `date-input` and `description-input` elements. Save them in the variables `dateInput` and `descriptionInput` respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `date-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should assign the `date-input` element to the variable `dateInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dateInput\s*=\s*document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should use `getElementById()` to access the `description-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+You should assign the `description-input` element to the variable `descriptionInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+descriptionInput\s*=\s*document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
new file mode 100644
index 00000000000..6f0cd6e9fc4
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
@@ -0,0 +1,296 @@
+---
+id: 64e4e74d0fb4f0687bf4145d
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `taskData` constant and set it to an empty array. This array will store all the tasks along with their associated data, including title, due date, and description. This storage will enable you to keep track of tasks, display them on the page, and save them to `localStorage`.
+
+Use `let` to create a `currentTask` variable and set it to an empty object. This variable will be used to track the state when editing and discarding tasks.
+
+# --hints--
+
+You should create a `taskData` constant set to an empty array.
+
+```js
+assert.match(code, /const\s+taskData\s*=\s*\[\];?/)
+```
+
+You should use `let` to create an empty `currentTask` object.
+
+```js
+assert.match(code, /let\s+currentTask\s*=\s*\{\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
new file mode 100644
index 00000000000..7eba2896bf4
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -0,0 +1,307 @@
+---
+id: 64e4e78a7ea4a168de4e6a38
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Now, you will work on opening and closing the form modal.
+
+Add a `click` event listener to the `openTaskFormBtn` variable, and then use `classList` to toggle the `hidden` class on the `taskForm` element.
+
+Now you can click on the "Add new Task" button and see the form modal.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `openTaskFormBtn` variable.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax, then use `classList` property and it's `toggle` method on the `taskForm`, to toggle the class `hidden`. Don't use curly braces.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*taskForm\.classList\.toggle\(\1hidden\1\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
new file mode 100644
index 00000000000..6a29158134e
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
@@ -0,0 +1,309 @@
+---
+id: 64e4e7bbedb22d6939001ad3
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Add a `click` event listener to the `closeTaskFormBtn` variable, then use the `showModal()` method on your `confirmCloseDialog` variable. This will display a modal with the `Discard` and `Cancel` buttons.
+
+`showModal()` is a method associated with the HTML `dialog` element. It is used to display a modal dialog box on a web page.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `closeTaskFormBtn` variable.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `showModal()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(["'`]click["'`],\s*\(.*\)\s*=>\s*{?\s*confirmCloseDialog\.showModal\(\);?\s*}?\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
new file mode 100644
index 00000000000..311984043a0
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
@@ -0,0 +1,316 @@
+---
+id: 64e4eaaa9070a66aecbfe603
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+If the user clicks the `Cancel` button, you want to cancel the process (close the modal showing the two buttons) so the user can continue editing.
+
+Add a `click` event listener to the `cancelBtn` element, then use the `close()` method on the `confirmCloseDialog` variable.
+
+`close()` is a method of the window object you can use to close the current window, or a modal you create with the `dialog` element.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `cancelBtn` variable.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `close()` method on `confirmCloseDialog`. Don't use curly braces.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*confirmCloseDialog\.close\(\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
new file mode 100644
index 00000000000..66a40c9771b
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
@@ -0,0 +1,327 @@
+---
+id: 64e4ebc7eabc5a6babd479cd
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+If the user clicks the `Discard` button, you want to close the modal showing the `Cancel` and `Discard` buttons, then hide the form modal.
+
+Add a click event listener to `discardBtn`, then use the `close()` method on the `confirmCloseDialog` variable. Also, use `classList` to toggle the class `hidden` on `taskForm` so the form modal will close too.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `discardBtn` variable.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{/)
+```
+
+Your event listener should use the `close()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?/)
+```
+
+Your event listener should use `classList` to toggle the class `hidden` on `taskForm`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?\s*taskForm\.classList\.toggle\(\1hidden\1\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
new file mode 100644
index 00000000000..f4002dc0937
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
@@ -0,0 +1,326 @@
+---
+id: 64e4ecd7735a566c9266a338
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Now that you've worked on opening and closing the modal, it's time to get the values from the input fields, save them into the `taskData` array, and display them on the page.
+
+To start, add a `submit` event listener to your `taskForm` element and pass in `e` as the parameter of your arrow function. Inside the curly braces, use the `preventDefault()` method to stop the browser from refreshing the page after submitting the form.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `taskForm` variable.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(/)
+```
+
+Your event listener should listen for a `submit` event.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces with `e` as the parameter.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{/)
+```
+
+You should use the `e.preventDefault()` method to stop the browser from reloading the page.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{\s*e\.preventDefault\(\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
new file mode 100644
index 00000000000..148e52f3e93
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
@@ -0,0 +1,337 @@
+---
+id: 64e4eec13546c06d61a63d59
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+You need to determine whether the task being added already exists or not. If it doesn't exist, you will add it, and if it already exists, you will set it up for editing. You can use the `findIndex()` method to accomplish this.
+
+`findIndex` is an array method that lets find the index of the first element in an array that satisfies a given testing function.
+
+Here's an example:
+
+```js
+const numbers = [3, 1, 5, 6, 10, 9, 8];
+const firstEvenNumIndex = numbers.findIndex((num) => num % 2 === 0);
+
+console.log(firstEvenNumIndex); // Output: 3 – because the first even number (6) is at index 3
+```
+
+Declare a `dataArrIndex` variable using `const` and set it to the result of the `findIndex()` method applied to the `taskData` array. Utilize arrow syntax to provide a callback function with `item` as the parameter, and within the callback, check if the `id` property of `item` is equal to the `id` property of `currentTask`.
+
+If the task exists, this returns the index, and if it doesn't exist, it returns `-1`.
+
+# --hints--
+
+You should use `const` to declare a `dataArrIndex` variable and set it to `taskData.findIndex()`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(/)
+```
+
+You should pass in `item` as the parameter of the arrow function callback. Don't use curly braces.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?/)
+```
+
+Your arrow function callback should check if `item.id === currentTask.id`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?\s*=>\s*item.id\s*===\s*currentTask.id\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
new file mode 100644
index 00000000000..10826de6f17
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
@@ -0,0 +1,340 @@
+---
+id: 64e4f01d6c72086e016a8626
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Next, retrieve the values from the input fields and store them in a `taskObj` object. Each task should also have a unique `id`.
+
+Create a `taskObj` object with an `id` property as the first property. For the value of the `id` property, retrieve the value of the `titleInput` field, convert it to lowercase, and then use the `split()` and `join()` methods to hyphenate it.
+
+Make sure all of those are in template literals because you need the `id` property value as a string.
+
+# --hints--
+
+You should use `const` to create a `taskObj` object.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*/)
+```
+
+Your `taskObj` object should have a key of `id`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id/)
+```
+
+You should use template strings to get `titleInput.value` as the value of your `id` key and convert it to lowercase.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)/)
+```
+
+You should use `.split(' ')` on `titleInput.value.toLowerCase()`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)/)
+```
+
+You should use `.join('-')` on `titleInput.value.toLowerCase().split(' ')`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)\.join\(\1-\1\)\}`,?\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
new file mode 100644
index 00000000000..764de1b0918
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
@@ -0,0 +1,327 @@
+---
+id: 64ec89ee549ecf802de2b3e2
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Retrieve the values from the `titleInput`, `dateInput`, and `descriptionInput` fields, and then save them in the properties `title`, `date`, and `description` of the `taskObj` object.
+
+# --hints--
+
+You should get the value of `titleInput` and save it in a `title` key.
+
+```js
+assert.match(code, /title:\s*titleInput\.value,/)
+```
+
+You should get the value of `dateInput` and save it in a `date` key.
+
+```js
+assert.match(code, /date:\s*dateInput\.value,/)
+```
+
+You should get the value of `descriptionInput` and save it in a `description` key.
+
+```js
+assert.match(code, /description:\s*descriptionInput\.value,?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`,
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ };
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
new file mode 100644
index 00000000000..3d009188d81
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
@@ -0,0 +1,332 @@
+---
+id: 64ec8f717b261e824d82d6a5
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Now that you have obtained the values from the input fields and generated an `id`, you want to add them to your `taskData` array to keep track of each task. However, you should only do this if the task is new. If the task already exists, you will set it up for editing. This is why you have the `dataArrIndex` variable, which provides the index of each task.
+
+Create an `if` statement with the condition `dataArrIndex === -1`. Within the `if` statement, use the `unshift()` method to add the `taskObj` object to the beginning of the `taskData` array.
+
+`unshift()` is an array method that is used to add one or more elements to the beginning of an array.
+
+**N.B:** Try adding a task and log `taskData` to the console to see what it looks like.
+
+# --hints--
+
+You should create an `if` statement with the condition `dataArrIndex === -1`.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{/)
+```
+
+Your `if` statement should have `taskData.unshift(taskObj)` in it's body.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{\s*taskData\.unshift\(taskObj\);?\s*\}/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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,
+ };
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
new file mode 100644
index 00000000000..f1202bb93fe
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
@@ -0,0 +1,331 @@
+---
+id: 64ec9145e424d8835a4e0f28
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have saved the task in the `taskData` array, you should display the task on the page by looping through it.
+
+Use `forEach()` on `taskData`, then destructure `id`, `title`, `date`, `description` as the parameters. Don't return anything yet.
+
+# --hints--
+
+You should use `forEach()` on `taskData`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*/)
+```
+
+You should destructure `id`, `title`, `date`, `description` as the parameters of the callback of your `forEach()`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
new file mode 100644
index 00000000000..06bdd7c6ae5
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
@@ -0,0 +1,336 @@
+---
+id: 64ec9282cd547785258cecf2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Using arrow syntax, create an implicit return and use addition assignment to set the `innerHTML` of `tasksContainer` to empty backticks.
+
+# --hints--
+
+You should not alter the existing `taskData.forEach()` and the values you destructured.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+You should use arrow syntax and attach `innerHTML` to `tasksContainer`.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\(\s*tasksContainer\.innerHTML\s*\))?/)
+```
+
+You should use addition assignment to set the `innerHTML` of `tasksContainer` to an empty pair of backticks.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\s*\(?tasksContainer\.innerHTML\s*\+=\s*`\s*`\)?)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+ taskData.forEach(({id, title, date, description}));
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
new file mode 100644
index 00000000000..b5115f99a51
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
@@ -0,0 +1,333 @@
+---
+id: 64ec9343769e8f85c1e17e05
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Create a `div` element with the class of `task`. Utilize template strings to set the `id` attribute of the `div` to the `id` you destructured from the task data.
+
+# --hints--
+
+You should create a `div` element with the class `task`.
+
+```js
+assert.match(code, /\s*<\/div>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
new file mode 100644
index 00000000000..81dd3530420
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
@@ -0,0 +1,348 @@
+---
+id: 64ec94f0de20c086e09b0fc3
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Create a `p` element and use template strings to set its content to the `title` you destructured. Right before the content of the `p` element, create a `strong` element with the text `Title:`.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+assert.match(code, //)
+```
+
+You should interpolate `${title}` as the text of your `p` element.
+
+```js
+assert.match(code, /
.*\$\{title\}<\/p>/)
+```
+
+You should create a `strong` element after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)/)
+```
+
+Your `strong` element should have the text `Title:`.
+
+```js
+assert.match(code, /(?<=)Title:\s*<\/strong>\s*/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
new file mode 100644
index 00000000000..4820d100d4d
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
@@ -0,0 +1,336 @@
+---
+id: 64ec959a76336c8767f5cd4d
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Similarly to the previous step, create another `p` element, and interpolate the `date` you destructured as the text content. Inside this paragraph, create a `strong` element with the text `Date:`.
+
+# --hints--
+
+You should create a `p` element and interpolate `${date}` as the text.
+
+```js
+assert.match(code, /.*\$\{date\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Date:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Date:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Edit<\/button/)
+```
+
+You should create a `button` element of type `button` a class `btn` and `Delete` as the text, in that order.
+
+```js
+assert.match(code, /Delete<\/button/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+const reset = () => {
+
+}
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Delete ')
+assert.notMatch(splitter[1], /taskForm\.classList\.toggle\(("|')hidden\1\);?/)
+```
+
+You should call the `reset` function.
+
+```js
+assert.match(code, /reset\(\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+--fcc-editable-region--
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+
+});
+--fcc-editable-region--
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 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;
+--fcc-editable-region--
+ confirmCloseDialog.showModal();
+--fcc-editable-region--
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
\s*Title:<\/strong>\s*\$\{title\}<\/p>\s*Date:<\/strong>\s*\$\{date\}<\/p>\s*Description:<\/strong>\s*\$\{description\}<\/p>\s*Edit<\/button>\s*Delete<\/button>\s*<\/div>\s*`\)\s*\);?\s*\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Edit<\/button>/)
+```
+
+You should add `onclick="deleteTask(this)"` as the first attribute of the delete button.
+
+```js
+assert.match(code, /Delete<\/button>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
Edit
+
Delete
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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,
+ };
+
+ --fcc-editable-region--
+ if (dataArrIndex === -1) {
+ taskData.unshift(taskObj);
+ }
+
+ --fcc-editable-region--
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+const taskData = [];
+--fcc-editable-region--
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(' ').join('-')}`,
+ };
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
new file mode 100644
index 00000000000..0c9fbc152b7
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
@@ -0,0 +1,337 @@
+---
+id: 65099dbd8f137d58e5c0ff16
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Create one more `p` element and interpolate the `description` you destructured as the text. Also, create a `strong` element inside the paragraph with the text `Description:`.
+
+# --hints--
+
+You should create a `p` element with `${description}` as the text.
+
+```js
+assert.match(code, /.*\$\{description\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Description:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Description:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
Colab notebook to go along with this video.
-Here is an additional Colab notebook that shows you one way to put many of these interest and payment forumlas into Python functions. Also you will see an example of using some formulas to output results, notice a trend, and follow up with other formulas to analyze patterns.
+Here is an additional Colab notebook that shows you one way to put many of these interest and payment formulas into Python functions. Also you will see an example of using some formulas to output results, notice a trend, and follow up with other formulas to analyze patterns.
# --question--
diff --git a/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md b/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
index 39ab831dad7..144796de1b0 100644
--- a/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
+++ b/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
@@ -71,8 +71,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md b/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
index 53ae7b50350..871e1408079 100644
--- a/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
+++ b/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
@@ -73,7 +73,7 @@ substringDivisibility(5);
```js
function substringDivisibility(n) {
- function isSubDivisable(digits) {
+ function isSubDivisible(digits) {
const factors = [2, 3, 5, 7, 11, 13, 17];
for (let i = 1; i < digits.length - 2; i++) {
@@ -108,17 +108,17 @@ function substringDivisibility(n) {
}
const allowedDigits = [...new Array(n + 1).keys()];
- const divisablePandigitals = [];
+ const divisiblePandigitals = [];
heapsPermutations(
allowedDigits.length,
allowedDigits,
- isSubDivisable,
- divisablePandigitals
+ isSubDivisible,
+ divisiblePandigitals
);
let sum = 0;
- for (let i = 0; i < divisablePandigitals.length; i++) {
- sum += divisablePandigitals[i];
+ for (let i = 0; i < divisiblePandigitals.length; i++) {
+ sum += divisiblePandigitals[i];
}
return sum;
diff --git a/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md b/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
index 7cd5bc67b14..2d583a52355 100644
--- a/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
+++ b/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
@@ -67,8 +67,8 @@ class PrimeSeive {
const prime = 2 * i + 3;
primes.push(prime);
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
@@ -101,10 +101,10 @@ class PrimeSeive {
};
function consecutivePrimeSum(limit) {
- // Initalize seive
+ // Initialize seive
const primeSeive = new PrimeSeive(limit);
- // Initalize for longest sum < 100
+ // Initialize for longest sum < 100
let bestPrime = 41;
let bestI = 0;
let bestJ = 5;
diff --git a/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md b/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
index cdbfc3e568b..5b55ddd8079 100644
--- a/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
+++ b/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
@@ -67,8 +67,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/swahili/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md b/curriculum/challenges/swahili/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
index 78c29aa7952..4fa15980a0d 100644
--- a/curriculum/challenges/swahili/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
+++ b/curriculum/challenges/swahili/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md
@@ -31,10 +31,10 @@ For $1 ≤ k ≤ 200$, find $\sum{m(k)}$.
# --hints--
-`efficientExponentation()` should return `1582`.
+`efficientExponentiation()` should return `1582`.
```js
-assert.strictEqual(efficientExponentation(), 1582);
+assert.strictEqual(efficientExponentiation(), 1582);
```
# --seed--
@@ -42,12 +42,12 @@ assert.strictEqual(efficientExponentation(), 1582);
## --seed-contents--
```js
-function efficientExponentation() {
+function efficientExponentiation() {
return true;
}
-efficientExponentation();
+efficientExponentiation();
```
# --solutions--
diff --git a/curriculum/challenges/swahili/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md b/curriculum/challenges/swahili/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
index 49d59948762..e402ff347c5 100644
--- a/curriculum/challenges/swahili/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
+++ b/curriculum/challenges/swahili/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md
@@ -67,8 +67,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/swahili/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md b/curriculum/challenges/swahili/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
index 596f703da28..b843f6f2be2 100644
--- a/curriculum/challenges/swahili/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
+++ b/curriculum/challenges/swahili/18-project-euler/project-euler-problems-201-to-300/problem-206-concealed-square.md
@@ -35,7 +35,7 @@ concealedSquare();
```js
// Check if n**2 matches the pattern
-function squareMatchs(n) {
+function squareMatches(n) {
// Need BigInt due to size of values
let nSquared = (BigInt(n) * BigInt(n)).toString();
@@ -55,8 +55,8 @@ function concealedSquare() {
for (let x = maxSquareRoot; x >= minSquareRoot; x -= 10) {
// Note: 3*3 = 9 and 7*7 = 49 are only trailing digits
// that can produce 9 as trailing digit in square
- if (squareMatchs(x + 3)) return (x + 3)*10;
- if (squareMatchs(x + 7)) return (x + 7)*10;
+ if (squareMatches(x + 3)) return (x + 3)*10;
+ if (squareMatches(x + 7)) return (x + 7)*10;
}
return -1;
}
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index 736ed6660a9..c007c1dbacb 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -54,7 +54,24 @@ assert.match(code, /myStorage\.car\.inside/);
`gloveBoxContents` досі має бути оголошено з `const`.
```js
-assert.match(code, /const\s+gloveBoxContents\s*=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]|const\s*{\s*('|")glove box\2:\s*gloveBoxContents\s*}\s*=\s*myStorage\.car\.inside;/);
+assert.match(code, /const\s+gloveBoxContents\s*=/);
+```
+
+You should not change the `myStorage` object.
+
+```js
+const expectedMyStorage = {
+ "car":{
+ "inside":{
+ "glove box":"maps",
+ "passenger seat":"crumbs"
+ },
+ "outside":{
+ "trunk":"jack"
+ }
+ }
+};
+assert.deepStrictEqual(myStorage, expectedMyStorage);
```
# --seed--
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
index 244b52ab450..b71e4b3cced 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
@@ -58,8 +58,8 @@ class PrimeSeive {
// Mark value in seive array
const prime = 2 * i + 3;
// Mark all multiples of this number as false (not prime)
- const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
- for (let j = primeSqaredIndex; j < upper; j += prime) {
+ const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSquaredIndex; j < upper; j += prime) {
seive[j] = false;
}
}
diff --git a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-projects/issue-tracker.md b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-projects/issue-tracker.md
index 24a2b8a2fe7..2e4e70fbcd1 100644
--- a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-projects/issue-tracker.md
+++ b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-projects/issue-tracker.md
@@ -11,7 +11,7 @@ dashedName: issue-tracker
Створіть повний пакет застосунку JavaScript, який функціонально схожий до https://issue-tracker.freecodecamp.rocks/ . Робота над цим проєктом передбачає написання коду за допомогою одного з наступних методів:
- Клонуйте цей репозиторій GitHub та виконайте свій проєкт локально.
-- Use our Replit starter project to complete your project.
+- Використайте наш стартовий проєкт Replit для виконання свого проєкту.
- Для виконання проєкту використайте конструктор сайту на власний вибір. Переконайтеся, що приєднали усі файли з нашого репозиторію GitHub.
Якщо ви використовуєте Replit, виконайте наступні кроки для налаштування проєкту:
@@ -231,13 +231,13 @@ async (getUserInput) => {
};
const url = getUserInput('url') + '/api/issues/fcc-project';
const itemToUpdate = await $.post(url, initialData);
- const updateSucccess = await $.ajax({
+ const updateSuccess = await $.ajax({
url: url,
type: 'PUT',
data: { _id: itemToUpdate._id, issue_text: 'New Issue Text' }
});
- assert.isObject(updateSucccess);
- assert.deepEqual(updateSucccess, {
+ assert.isObject(updateSuccess);
+ assert.deepEqual(updateSuccess, {
result: 'successfully updated',
_id: itemToUpdate._id
});
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md
index 49b6d0978b3..bd7bf22c3b4 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md
@@ -84,7 +84,7 @@ arithmetic_arranger(["32 + 8", "1 - 3801", "9999 + 9999", "523 - 49"], True)
## Надсилання
-Copy your project's URL and submit it to freeCodeCamp.
+Скопіюйте URL-адресу свого проєкту та відправте її до freeCodeCamp.
# --hints--
diff --git a/curriculum/challenges/ukrainian/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md b/curriculum/challenges/ukrainian/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md
index 32084bf3b13..b14434418d6 100644
--- a/curriculum/challenges/ukrainian/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md
+++ b/curriculum/challenges/ukrainian/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md
@@ -17,7 +17,7 @@ dashedName: mean-variance-standard-deviation-calculator
Ми досі розробляємо інтерактивну частину навчальної програми з Python. Наразі є декілька відео на ютуб-каналі freeCodeCamp.org, які навчать всього необхідного для виконання цього проєкту:
-- Python for Everybody Video Course (14 hours)
+- Python for Everybody Video Course (14 годин)
- How to Analyze Data with Python Pandas (10 годин)
diff --git a/curriculum/challenges/ukrainian/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md b/curriculum/challenges/ukrainian/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
index be86035c85a..c54ade818a3 100644
--- a/curriculum/challenges/ukrainian/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
+++ b/curriculum/challenges/ukrainian/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
@@ -17,7 +17,7 @@ dashedName: medical-data-visualizer
Ми досі розробляємо інтерактивну частину навчальної програми з Python. Наразі є декілька відео на ютуб-каналі freeCodeCamp.org, які навчать всього необхідного для виконання цього проєкту:
-- Python for Everybody Video Course (14 hours)
+- Python for Everybody Video Course (14 годин)
- How to Analyze Data with Python Pandas (10 годин)
diff --git a/curriculum/challenges/ukrainian/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md b/curriculum/challenges/ukrainian/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md
index af6a29b0d05..71002b1c6b4 100644
--- a/curriculum/challenges/ukrainian/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md
+++ b/curriculum/challenges/ukrainian/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md
@@ -17,7 +17,7 @@ dashedName: page-view-time-series-visualizer
Ми досі розробляємо інтерактивну частину навчальної програми з Python. Наразі є декілька відео на ютуб-каналі freeCodeCamp.org, які навчать всього необхідного для виконання цього проєкту:
-- Python for Everybody Video Course (14 hours)
+- Python for Everybody Video Course (14 годин)
- How to Analyze Data with Python Pandas (10 годин)
diff --git a/curriculum/challenges/ukrainian/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md b/curriculum/challenges/ukrainian/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md
index 34df52c483c..b58b7e8006f 100644
--- a/curriculum/challenges/ukrainian/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md
+++ b/curriculum/challenges/ukrainian/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md
@@ -17,7 +17,7 @@ dashedName: sea-level-predictor
Ми досі розробляємо інтерактивну частину навчальної програми з Python. Наразі є декілька відео на ютуб-каналі freeCodeCamp.org, які навчать всього необхідного для виконання цього проєкту:
-- Python for Everybody Video Course (14 hours)
+- Python for Everybody Video Course (14 годин)
- How to Analyze Data with Python Pandas (10 годин)
diff --git a/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/24-game.md b/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/24-game.md
index b81ce70d8ef..16de46241a0 100644
--- a/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/24-game.md
+++ b/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/24-game.md
@@ -82,7 +82,7 @@ const OPERATORS_ = {
"/": (a, b) => a / b,
}
-const PRECIDENCE_ = {
+const PRECEDENCE_ = {
"+": 1,
"-": 1,
"*": 2,
@@ -114,7 +114,7 @@ function evaluate_(expression) {
case "*":
case "/":
while (stack.length &&
- PRECIDENCE_[c] <= PRECIDENCE_[stack[stack.length-1]]) {
+ PRECEDENCE_[c] <= PRECEDENCE_[stack[stack.length-1]]) {
postfix += stack.pop();
}
stack.push(c);
diff --git a/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md b/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
index c520f434f78..f6347018d9d 100644
--- a/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
+++ b/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
@@ -175,7 +175,7 @@ function dealFreeCell(seed) {
const rng = FreeCellRNG(seed);
const deck = getDeck();
- const deltCards = [[], [], [], [], [], [], []];
+ const dealtCards = [[], [], [], [], [], [], []];
let currentColumn = 0;
let currentRow = 0;
@@ -195,7 +195,7 @@ function dealFreeCell(seed) {
card = deck.pop();
// Deal this card
- deltCards[currentRow].push(card);
+ dealtCards[currentRow].push(card);
currentColumn += 1;
if (currentColumn === 8) {
currentColumn = 0;
@@ -203,6 +203,6 @@ function dealFreeCell(seed) {
}
}
- return deltCards;
+ return dealtCards;
}
```
diff --git a/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/department-numbers.md b/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/department-numbers.md
index 3f657cf1290..6fb9d4dab1b 100644
--- a/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/department-numbers.md
+++ b/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/department-numbers.md
@@ -101,7 +101,7 @@ function combinations(possibleNumbers, total) {
function combinations(possibleNumbers, total) {
let firstNumber;
let secondNumber;
- let thridNumber;
+ let thirdNumber;
const allCombinations = [];
for (let i = 0; i < possibleNumbers.length; i += 1) {
@@ -112,10 +112,10 @@ function combinations(possibleNumbers, total) {
secondNumber = possibleNumbers[j];
if (j !== i && firstNumber + secondNumber <= total) {
- thridNumber = total - firstNumber - secondNumber;
+ thirdNumber = total - firstNumber - secondNumber;
- if (thridNumber !== firstNumber && thridNumber !== secondNumber && possibleNumbers.includes(thridNumber)) {
- allCombinations.push([firstNumber, secondNumber, thridNumber]);
+ if (thirdNumber !== firstNumber && thirdNumber !== secondNumber && possibleNumbers.includes(thirdNumber)) {
+ allCombinations.push([firstNumber, secondNumber, thirdNumber]);
}
}
}
diff --git a/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/lu-decomposition.md b/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/lu-decomposition.md
index d2d5afa191c..6f68d8f3124 100644
--- a/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/lu-decomposition.md
+++ b/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/lu-decomposition.md
@@ -80,7 +80,7 @@ $PA = LU$
# --instructions--
-Завдання полягає в тому, щоб реалізувати процедуру, яка знайде матрицю nxn $A$ і поверне нижчу трикутну матрицю $L$, верхню трикутну матрицю $U$ і матрицю перестановки $P$, так, щоб розв'язати вищезгадане рівняння. Повернене значення має бути у вигляді `[L, U, P]`.
+The task is to implement a routine which will take a square nxn matrix $A$ and return a lower triangular matrix $L$, a upper triangular matrix $U$ and a permutation matrix $P$, so that the above equation is fulfilled. Повернене значення має бути у вигляді `[L, U, P]`.
# --hints--
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/rock-paper-scissors.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/rock-paper-scissors.md
index b8c0e3c9407..dcd0fafb3b1 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/rock-paper-scissors.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/rock-paper-scissors.md
@@ -58,7 +58,7 @@ play(player, quincy, 1000, verbose=True)
## Надсилання
-Copy your project's URL and submit it to freeCodeCamp.
+Скопіюйте URL-адресу свого проєкту та відправте її до freeCodeCamp.
# --hints--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
index 896b6452cb4..689fb5fcd7f 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
@@ -9,7 +9,7 @@ dashedName: step-82
Дзьоб і лапки пінгвіна мають однаковий `color`.
-Створіть нову спеціальну CSS-змінну з назвою `--penguin-picorna` та замініть нею всі відповідні значення властивостей.
+Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it.
# --hints--
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
index 86b8a8d44ca..02cabfb4c73 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
@@ -11,7 +11,7 @@ dashedName: step-161
# --hints--
-Ваша функція `pick` повинна ініціалізувати `numbers` на порожній масив `[]`.
+Your `pick` function should initialize `numbers` to an empty array `[]`.
```js
assert.match(pick.toString(), /numbers\s*=\s*\[\]/);
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md
new file mode 100644
index 00000000000..4b042aa87ba
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md
@@ -0,0 +1,310 @@
+---
+id: 64e4e4c4ec263b62ae7bf54d
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn how `localStorage` works in JavaScript by building a Todo app. LocalStorage is a web storage feature of JavaScript that lets you persist data by storing the data as a **key:value** pair.
+
+The HTML and CSS for this project have been provided for you. Take a look at the files to get yourself familiarized with them.
+
+Begin by accessing the `task-form`, `confirm-close-dialog`, and `open-task-form-btn` elements with the `getElementById()` method. Save them in the variables `taskForm`, `confirmCloseDialog`, and `openTaskFormBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `task-form` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should assign the `task-form` element to the variable `taskForm`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+taskForm\s*=\s*document\.getElementById\(\s*('|"|`)task\-form\1\);?/)
+```
+
+You should use `getElementById()` to access the `confirm-close-dialog` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should assign the `confirm-close-dialog` element to the variable `confirmCloseDialog`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+confirmCloseDialog\s*=\s*document\.getElementById\(\s*('|"|`)confirm\-close\-dialog\1\);?/)
+```
+
+You should use `getElementById()` to access the `open-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `open-task-form-btn` element to the variable `openTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+openTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)open\-task\-form\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
new file mode 100644
index 00000000000..32310409728
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6c86954de67a3e44ee3.md
@@ -0,0 +1,310 @@
+---
+id: 64e4e6c86954de67a3e44ee3
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+You need to access more elements with the `getElementById()` method. This time you need the `close-task-form-btn`, `add-or-update-task-btn`, and `cancel-btn` elements. Save them in the variables `closeTaskFormBtn`, `addOrUpdateTaskBtn`, and `cancelBtn`.
+
+# --hints--
+
+You should use `getElementById()` to access the `close-task-form-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should assign the `close-task-form-btn` element to the variable `closeTaskFormBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+closeTaskFormBtn\s*=\s*document\.getElementById\(\s*('|"|`)close\-task\-form\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `add-or-update-task-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should assign the `add-or-update-task-btn` element to the variable `addOrUpdateTaskBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+addOrUpdateTaskBtn\s*=\s*document\.getElementById\(\s*('|"|`)add\-or\-update\-task\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `cancel-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+You should assign the `cancel-btn` element to the variable `cancelBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cancelBtn\s*=\s*document\.getElementById\(\s*('|"|`)cancel\-btn\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
new file mode 100644
index 00000000000..17fc6b76517
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e6fe78b5aa67ef2fc3e7.md
@@ -0,0 +1,313 @@
+---
+id: 64e4e6fe78b5aa67ef2fc3e7
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next, access the `discard-btn`, `tasks-container`, and `title-input` elements using the `getElementById()` method. Save them in variables named `discardBtn`, `tasksContainer`, and `titleInput`, respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `discard-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should assign the `discard-btn` element to the variable `discardBtn`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+discardBtn\s*=\s*document\.getElementById\(\s*('|"|`)discard\-btn\1\);?/)
+```
+
+You should use `getElementById()` to access the `tasks-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should assign the `tasks-container` element to the variable `tasksContainer`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+tasksContainer\s*=\s*document\.getElementById\(\s*('|"|`)tasks\-container\1\);?/)
+```
+
+You should use `getElementById()` to access the `title-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+You should assign the `title-input` element to the variable `titleInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+titleInput\s*=\s*document\.getElementById\(\s*('|"|`)title\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
new file mode 100644
index 00000000000..6e543d36acc
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7241f52bb682eeb8211.md
@@ -0,0 +1,304 @@
+---
+id: 64e4e7241f52bb682eeb8211
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last set of elements you need to get from the HTML file are the `date-input` and `description-input` elements. Save them in the variables `dateInput` and `descriptionInput` respectively.
+
+# --hints--
+
+You should use `getElementById()` to access the `date-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should assign the `date-input` element to the variable `dateInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dateInput\s*=\s*document\.getElementById\(\s*('|"|`)date\-input\1\);?/)
+```
+
+You should use `getElementById()` to access the `description-input` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+You should assign the `description-input` element to the variable `descriptionInput`. Don't forget to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+descriptionInput\s*=\s*document\.getElementById\(\s*('|"|`)description\-input\1\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
new file mode 100644
index 00000000000..6f0cd6e9fc4
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e74d0fb4f0687bf4145d.md
@@ -0,0 +1,296 @@
+---
+id: 64e4e74d0fb4f0687bf4145d
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `taskData` constant and set it to an empty array. This array will store all the tasks along with their associated data, including title, due date, and description. This storage will enable you to keep track of tasks, display them on the page, and save them to `localStorage`.
+
+Use `let` to create a `currentTask` variable and set it to an empty object. This variable will be used to track the state when editing and discarding tasks.
+
+# --hints--
+
+You should create a `taskData` constant set to an empty array.
+
+```js
+assert.match(code, /const\s+taskData\s*=\s*\[\];?/)
+```
+
+You should use `let` to create an empty `currentTask` object.
+
+```js
+assert.match(code, /let\s+currentTask\s*=\s*\{\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
new file mode 100644
index 00000000000..7eba2896bf4
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -0,0 +1,307 @@
+---
+id: 64e4e78a7ea4a168de4e6a38
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Now, you will work on opening and closing the form modal.
+
+Add a `click` event listener to the `openTaskFormBtn` variable, and then use `classList` to toggle the `hidden` class on the `taskForm` element.
+
+Now you can click on the "Add new Task" button and see the form modal.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `openTaskFormBtn` variable.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax, then use `classList` property and it's `toggle` method on the `taskForm`, to toggle the class `hidden`. Don't use curly braces.
+
+```js
+assert.match(code, /openTaskFormBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*taskForm\.classList\.toggle\(\1hidden\1\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
new file mode 100644
index 00000000000..6a29158134e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e7bbedb22d6939001ad3.md
@@ -0,0 +1,309 @@
+---
+id: 64e4e7bbedb22d6939001ad3
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Add a `click` event listener to the `closeTaskFormBtn` variable, then use the `showModal()` method on your `confirmCloseDialog` variable. This will display a modal with the `Discard` and `Cancel` buttons.
+
+`showModal()` is a method associated with the HTML `dialog` element. It is used to display a modal dialog box on a web page.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `closeTaskFormBtn` variable.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `showModal()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /closeTaskFormBtn\.addEventListener\(["'`]click["'`],\s*\(.*\)\s*=>\s*{?\s*confirmCloseDialog\.showModal\(\);?\s*}?\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
new file mode 100644
index 00000000000..311984043a0
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eaaa9070a66aecbfe603.md
@@ -0,0 +1,316 @@
+---
+id: 64e4eaaa9070a66aecbfe603
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+If the user clicks the `Cancel` button, you want to cancel the process (close the modal showing the two buttons) so the user can continue editing.
+
+Add a `click` event listener to the `cancelBtn` element, then use the `close()` method on the `confirmCloseDialog` variable.
+
+`close()` is a method of the window object you can use to close the current window, or a modal you create with the `dialog` element.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `cancelBtn` variable.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+Your event listener should use arrow syntax to set the `close()` method on `confirmCloseDialog`. Don't use curly braces.
+
+```js
+assert.match(code, /cancelBtn\.addEventListener\(('|"|`)click\1\,\s*\(\)\s*\s*=>\s*confirmCloseDialog\.close\(\)\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
new file mode 100644
index 00000000000..66a40c9771b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ebc7eabc5a6babd479cd.md
@@ -0,0 +1,327 @@
+---
+id: 64e4ebc7eabc5a6babd479cd
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+If the user clicks the `Discard` button, you want to close the modal showing the `Cancel` and `Discard` buttons, then hide the form modal.
+
+Add a click event listener to `discardBtn`, then use the `close()` method on the `confirmCloseDialog` variable. Also, use `classList` to toggle the class `hidden` on `taskForm` so the form modal will close too.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `discardBtn` variable.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(/)
+```
+
+Your event listener should listen for a `click` event.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{/)
+```
+
+Your event listener should use the `close()` method on `confirmCloseDialog`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?/)
+```
+
+Your event listener should use `classList` to toggle the class `hidden` on `taskForm`.
+
+```js
+assert.match(code, /discardBtn\.addEventListener\(('|"|`)click\1,\s*\(\)\s*=>\s*\{\s*confirmCloseDialog\.close\(\);?\s*taskForm\.classList\.toggle\(\1hidden\1\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
new file mode 100644
index 00000000000..f4002dc0937
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4ecd7735a566c9266a338.md
@@ -0,0 +1,326 @@
+---
+id: 64e4ecd7735a566c9266a338
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Now that you've worked on opening and closing the modal, it's time to get the values from the input fields, save them into the `taskData` array, and display them on the page.
+
+To start, add a `submit` event listener to your `taskForm` element and pass in `e` as the parameter of your arrow function. Inside the curly braces, use the `preventDefault()` method to stop the browser from refreshing the page after submitting the form.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `taskForm` variable.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(/)
+```
+
+Your event listener should listen for a `submit` event.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1/)
+```
+
+You should use arrow syntax to set your event listener to an empty pair of curly braces with `e` as the parameter.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{/)
+```
+
+You should use the `e.preventDefault()` method to stop the browser from reloading the page.
+
+```js
+assert.match(code, /taskForm\.addEventListener\(('|"|`)submit\1,\s*\(e\)\s*=>\s*\{\s*e\.preventDefault\(\);?\s*\}\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
new file mode 100644
index 00000000000..148e52f3e93
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4eec13546c06d61a63d59.md
@@ -0,0 +1,337 @@
+---
+id: 64e4eec13546c06d61a63d59
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+You need to determine whether the task being added already exists or not. If it doesn't exist, you will add it, and if it already exists, you will set it up for editing. You can use the `findIndex()` method to accomplish this.
+
+`findIndex` is an array method that lets find the index of the first element in an array that satisfies a given testing function.
+
+Here's an example:
+
+```js
+const numbers = [3, 1, 5, 6, 10, 9, 8];
+const firstEvenNumIndex = numbers.findIndex((num) => num % 2 === 0);
+
+console.log(firstEvenNumIndex); // Output: 3 – because the first even number (6) is at index 3
+```
+
+Declare a `dataArrIndex` variable using `const` and set it to the result of the `findIndex()` method applied to the `taskData` array. Utilize arrow syntax to provide a callback function with `item` as the parameter, and within the callback, check if the `id` property of `item` is equal to the `id` property of `currentTask`.
+
+If the task exists, this returns the index, and if it doesn't exist, it returns `-1`.
+
+# --hints--
+
+You should use `const` to declare a `dataArrIndex` variable and set it to `taskData.findIndex()`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(/)
+```
+
+You should pass in `item` as the parameter of the arrow function callback. Don't use curly braces.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?/)
+```
+
+Your arrow function callback should check if `item.id === currentTask.id`.
+
+```js
+assert.match(code, /const dataArrIndex\s*=\s*taskData\.findIndex\(\(?item\)?\s*=>\s*item.id\s*===\s*currentTask.id\s*\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
new file mode 100644
index 00000000000..10826de6f17
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4f01d6c72086e016a8626.md
@@ -0,0 +1,340 @@
+---
+id: 64e4f01d6c72086e016a8626
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Next, retrieve the values from the input fields and store them in a `taskObj` object. Each task should also have a unique `id`.
+
+Create a `taskObj` object with an `id` property as the first property. For the value of the `id` property, retrieve the value of the `titleInput` field, convert it to lowercase, and then use the `split()` and `join()` methods to hyphenate it.
+
+Make sure all of those are in template literals because you need the `id` property value as a string.
+
+# --hints--
+
+You should use `const` to create a `taskObj` object.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*/)
+```
+
+Your `taskObj` object should have a key of `id`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id/)
+```
+
+You should use template strings to get `titleInput.value` as the value of your `id` key and convert it to lowercase.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)/)
+```
+
+You should use `.split(' ')` on `titleInput.value.toLowerCase()`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)/)
+```
+
+You should use `.join('-')` on `titleInput.value.toLowerCase().split(' ')`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\)\.split\(('|")\s{1}\1\)\.join\(\1-\1\)\}`,?\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
new file mode 100644
index 00000000000..764de1b0918
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec89ee549ecf802de2b3e2.md
@@ -0,0 +1,327 @@
+---
+id: 64ec89ee549ecf802de2b3e2
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Retrieve the values from the `titleInput`, `dateInput`, and `descriptionInput` fields, and then save them in the properties `title`, `date`, and `description` of the `taskObj` object.
+
+# --hints--
+
+You should get the value of `titleInput` and save it in a `title` key.
+
+```js
+assert.match(code, /title:\s*titleInput\.value,/)
+```
+
+You should get the value of `dateInput` and save it in a `date` key.
+
+```js
+assert.match(code, /date:\s*dateInput\.value,/)
+```
+
+You should get the value of `descriptionInput` and save it in a `description` key.
+
+```js
+assert.match(code, /description:\s*descriptionInput\.value,?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`,
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ };
+});
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
new file mode 100644
index 00000000000..3d009188d81
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec8f717b261e824d82d6a5.md
@@ -0,0 +1,332 @@
+---
+id: 64ec8f717b261e824d82d6a5
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Now that you have obtained the values from the input fields and generated an `id`, you want to add them to your `taskData` array to keep track of each task. However, you should only do this if the task is new. If the task already exists, you will set it up for editing. This is why you have the `dataArrIndex` variable, which provides the index of each task.
+
+Create an `if` statement with the condition `dataArrIndex === -1`. Within the `if` statement, use the `unshift()` method to add the `taskObj` object to the beginning of the `taskData` array.
+
+`unshift()` is an array method that is used to add one or more elements to the beginning of an array.
+
+**N.B:** Try adding a task and log `taskData` to the console to see what it looks like.
+
+# --hints--
+
+You should create an `if` statement with the condition `dataArrIndex === -1`.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{/)
+```
+
+Your `if` statement should have `taskData.unshift(taskObj)` in it's body.
+
+```js
+assert.match(code, /if\s*\(dataArrIndex\s*===\s*-1\)\s*\{\s*taskData\.unshift\(taskObj\);?\s*\}/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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,
+ };
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
new file mode 100644
index 00000000000..f1202bb93fe
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9145e424d8835a4e0f28.md
@@ -0,0 +1,331 @@
+---
+id: 64ec9145e424d8835a4e0f28
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have saved the task in the `taskData` array, you should display the task on the page by looping through it.
+
+Use `forEach()` on `taskData`, then destructure `id`, `title`, `date`, `description` as the parameters. Don't return anything yet.
+
+# --hints--
+
+You should use `forEach()` on `taskData`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*/)
+```
+
+You should destructure `id`, `title`, `date`, `description` as the parameters of the callback of your `forEach()`.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
new file mode 100644
index 00000000000..06bdd7c6ae5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9282cd547785258cecf2.md
@@ -0,0 +1,336 @@
+---
+id: 64ec9282cd547785258cecf2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Using arrow syntax, create an implicit return and use addition assignment to set the `innerHTML` of `tasksContainer` to empty backticks.
+
+# --hints--
+
+You should not alter the existing `taskData.forEach()` and the values you destructured.
+
+```js
+assert.match(code, /taskData\.forEach\(\s*\(\s*\{\s*(?:id\s*,\s*title\s*,\s*date\s*,\s*description)|(?:title\s*,\s*id\s*,\s*date\s*,\s*description)|(?:date\s*,\s*id\s*,\s*title\s*,\s*description)|(?:id\s*,\s*date\s*,\s*title\s*,\s*description)|(?:title\s*,\s*date\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*id\s*,\s*description)|(?:date\s*,\s*title\s*,\s*description\s*,\s*id)|(?:title\s*,\s*date\s*,\s*description\s*,\s*id)|(?:description\s*,\s*date\s*,\s*title\s*,\s*id)|(?:date\s*,\s*description\s*,\s*title\s*,\s*id)|(?:title\s*,\s*description\s*,\s*date\s*,\s*id)|(?:description\s*,\s*title\s*,\s*date\s*,\s*id)|(?:description\s*,\s*id\s*,\s*date\s*,\s*title)|(?:id\s*,\s*description\s*,\s*date\s*,\s*title)|(?:date\s*,\s*description\s*,\s*id\s*,\s*title)|(?:description\s*,\s*date\s*,\s*id\s*,\s*title)|(?:id\s*,\s*date\s*,\s*description\s*,\s*title)|(?:date\s*,\s*id\s*,\s*description\s*,\s*title)|(?:title\s*,\s*id\s*,\s*description\s*,\s*date)|(?:id\s*,\s*title\s*,\s*description\s*,\s*date)|(?:description\s*,\s*title\s*,\s*id\s*,\s*date)|(?:title\s*,\s*description\s*,\s*id\s*,\s*date)|(?:id\s*,\s*description\s*,\s*title\s*,\s*date)|(?:description\s*,\s*id\s*,\s*title\s*,\s*date)\s*\}/)
+```
+
+You should use arrow syntax and attach `innerHTML` to `tasksContainer`.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\(\s*tasksContainer\.innerHTML\s*\))?/)
+```
+
+You should use addition assignment to set the `innerHTML` of `tasksContainer` to an empty pair of backticks.
+
+```js
+assert.match(code, /taskData\.forEach\(\(\{.*\}\)\s*=>\s*(\s*\(?tasksContainer\.innerHTML\s*\+=\s*`\s*`\)?)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ --fcc-editable-region--
+ taskData.forEach(({id, title, date, description}));
+
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
new file mode 100644
index 00000000000..b5115f99a51
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec9343769e8f85c1e17e05.md
@@ -0,0 +1,333 @@
+---
+id: 64ec9343769e8f85c1e17e05
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Create a `div` element with the class of `task`. Utilize template strings to set the `id` attribute of the `div` to the `id` you destructured from the task data.
+
+# --hints--
+
+You should create a `div` element with the class `task`.
+
+```js
+assert.match(code, /\s*<\/div>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
new file mode 100644
index 00000000000..81dd3530420
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec94f0de20c086e09b0fc3.md
@@ -0,0 +1,348 @@
+---
+id: 64ec94f0de20c086e09b0fc3
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Create a `p` element and use template strings to set its content to the `title` you destructured. Right before the content of the `p` element, create a `strong` element with the text `Title:`.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+assert.match(code, //)
+```
+
+You should interpolate `${title}` as the text of your `p` element.
+
+```js
+assert.match(code, /
.*\$\{title\}<\/p>/)
+```
+
+You should create a `strong` element after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)/)
+```
+
+Your `strong` element should have the text `Title:`.
+
+```js
+assert.match(code, /(?<=)Title:\s*<\/strong>\s*/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+ `)
+ );
+});
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
new file mode 100644
index 00000000000..4820d100d4d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ec959a76336c8767f5cd4d.md
@@ -0,0 +1,336 @@
+---
+id: 64ec959a76336c8767f5cd4d
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Similarly to the previous step, create another `p` element, and interpolate the `date` you destructured as the text content. Inside this paragraph, create a `strong` element with the text `Date:`.
+
+# --hints--
+
+You should create a `p` element and interpolate `${date}` as the text.
+
+```js
+assert.match(code, /.*\$\{date\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Date:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Date:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Edit<\/button/)
+```
+
+You should create a `button` element of type `button` a class `btn` and `Delete` as the text, in that order.
+
+```js
+assert.match(code, /Delete<\/button/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+const reset = () => {
+
+}
+--fcc-editable-region--
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Delete ')
+assert.notMatch(splitter[1], /taskForm\.classList\.toggle\(("|')hidden\1\);?/)
+```
+
+You should call the `reset` function.
+
+```js
+assert.match(code, /reset\(\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+--fcc-editable-region--
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+--fcc-editable-region--
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+--fcc-editable-region--
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+
+});
+--fcc-editable-region--
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 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;
+--fcc-editable-region--
+ confirmCloseDialog.showModal();
+--fcc-editable-region--
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ 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);
+ }
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
\s*Title:<\/strong>\s*\$\{title\}<\/p>\s*Date:<\/strong>\s*\$\{date\}<\/p>\s*Description:<\/strong>\s*\$\{description\}<\/p>\s*Edit<\/button>\s*Delete<\/button>\s*<\/div>\s*`\)\s*\);?\s*\};?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+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();
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Edit<\/button>/)
+```
+
+You should add `onclick="deleteTask(this)"` as the first attribute of the delete button.
+
+```js
+assert.match(code, /Delete<\/button>/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+ --fcc-editable-region--
+
Edit
+
Delete
+ --fcc-editable-region--
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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);
+ }
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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,
+ };
+
+ --fcc-editable-region--
+ if (dataArrIndex === -1) {
+ taskData.unshift(taskObj);
+ }
+
+ --fcc-editable-region--
+
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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");
+
+--fcc-editable-region--
+const taskData = [];
+--fcc-editable-region--
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = JSON.parse(localStorage.getItem("data")) || [];
+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;
+ }
+
+ localStorage.setItem("data", JSON.stringify(taskData));
+ updateTaskContainer()
+ reset()
+};
+
+const updateTaskContainer = () => {
+ tasksContainer.innerHTML = "";
+
+ taskData.forEach(
+ ({ id, title, date, description }) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+
Description: ${description}
+
Edit
+
Delete
+
Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(' ').join('-')}`,
+ };
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
new file mode 100644
index 00000000000..0c9fbc152b7
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/65099dbd8f137d58e5c0ff16.md
@@ -0,0 +1,337 @@
+---
+id: 65099dbd8f137d58e5c0ff16
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Create one more `p` element and interpolate the `description` you destructured as the text. Also, create a `strong` element inside the paragraph with the text `Description:`.
+
+# --hints--
+
+You should create a `p` element with `${description}` as the text.
+
+```js
+assert.match(code, /.*\$\{description\}<\/p>/)
+```
+
+You should create a `strong` element with the text `Description:` after the opening tag of your `p` element.
+
+```js
+assert.match(code, /(?<=
)Description:\s*<\/strong>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage By Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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 = {};
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ confirmCloseDialog.showModal();
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ taskForm.classList.toggle("hidden");
+});
+
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ 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);
+ }
+
+ taskData.forEach(({id, title, date, description}) =>
+ (tasksContainer.innerHTML += `
+
+
Title: ${title}
+
Date: ${date}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-413-one-child-numbers.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-413-one-child-numbers.md
index a777a0395cc..9f38f8ae7ba 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-413-one-child-numbers.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-413-one-child-numbers.md
@@ -10,7 +10,7 @@ dashedName: problem-413-one-child-numbers
Додатне $d$-значне число (без початкових нулів) називають однодітним, якщо лише одне витягнуте число ділиться на $d$.
-Наприклад, 5671 є чотиризначним однодітним числом. Серед усіх його витягнутих чисел 5, 6, 7, 1, 56, 67, 71, 567, 671 та 5671, лише 56 ділиться на 4.
+Наприклад, 5671 є чотиризначним однодітним числом. Серед усіх його витягнутих чисел (5, 6, 7, 1, 56, 67, 71, 567, 671 та 5671), лише 56 ділиться на 4.
Схожим чином, 104 є тризначним однодітним числом, оскільки лише 0 ділиться на 3. 1132451 є семизначним однодітним числом, оскільки лише 245 ділиться на 7.
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-414-kaprekar-constant.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-414-kaprekar-constant.md
index 2a0552b53f1..f9830256f6a 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-414-kaprekar-constant.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-414-kaprekar-constant.md
@@ -25,7 +25,7 @@ $$\begin{align} & 8730 - 0378 = 8352 \\\\
Наприклад, основа 15: ${(10, 4, 14, 9, 5)}\_{15}$ основа 21: $(14, 6, 20, 13, 7)\_{21}$
-Визначимо $C_b$ як сталу Капрекара з основою $b$ для 5 цифр. Визначте функцію $sb(i)$ рівною:
+Визначимо $C_b$ як сталу Капрекара з основою $b$ для 5 цифр. Визначимо функцію $sb(i)$ рівною:
- 0, якщо $i = C_b$ або $i$ записано в основі $b$ з 5 однакових цифр
- кількості повторень, необхідних для перетворення Капрекара в основі $b$, щоб отримати $C_b$ в інших випадках
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-427-n-sequences.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-427-n-sequences.md
index c511de908f0..d5727820ef4 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-427-n-sequences.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-427-n-sequences.md
@@ -12,7 +12,7 @@ dashedName: problem-427-n-sequences
Наприклад, послідовність $S = \\{1, 5, 5, 10, 7, 7, 7, 2, 3, 7\\}$ є 10-послідовністю.
-Нехай $L(S)$ буде довжиною найдовшої сусідньої вкладеної послідовності $S$ з однакових значень для послідовності $S$. Наприклад, для послідовності $S$ вище $L(S) = 3$, оскільки вона містить три сусідні 7.
+Нехай $L(S)$ буде довжиною найдовшої сусідньої вкладеної послідовності $S$ з однакових значень для послідовності $S$. Наприклад, для послідовності $S$, поданої вище, $L(S) = 3$, оскільки вона містить три сусідні 7.
Нехай $f(n) = \sum L(S)$ для всіх $n$-послідовностей $S$.
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-429-sum-of-squares-of-unitary-divisors.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-429-sum-of-squares-of-unitary-divisors.md
index a3623a7d4a8..4892110b941 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-429-sum-of-squares-of-unitary-divisors.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-429-sum-of-squares-of-unitary-divisors.md
@@ -16,7 +16,7 @@ dashedName: problem-429-sum-of-squares-of-unitary-divisors
Нехай $S(n)$ представляє суму квадратів унітарних дільників $n$. Таким чином, $S(4!) = 650$.
-Знайдіть $S(100\\,000\\,000!)$ за модулем $1\\,000\\,000\\,009$.
+Знайдіть $S(100\\,000\\,000!)$ mod $1\\,000\\,000\\,009$.
# --hints--
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-437-fibonacci-primitive-roots.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-437-fibonacci-primitive-roots.md
index eb8683f3860..994fcb9c21f 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-437-fibonacci-primitive-roots.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-437-fibonacci-primitive-roots.md
@@ -1,6 +1,6 @@
---
id: 5900f5241000cf542c510036
-title: 'Problem 437: Fibonacci primitive roots'
+title: 'Завдання 437: примітивні корені Фібоначчі'
challengeType: 1
forumTopicId: 302108
dashedName: problem-437-fibonacci-primitive-roots
@@ -8,13 +8,13 @@ dashedName: problem-437-fibonacci-primitive-roots
# --description--
-When we calculate $8^n$ modulo 11 for $n = 0$ to 9 we get: 1, 8, 9, 6, 4, 10, 3, 2, 5, 7.
+Якщо вичислити $8^n$ mod 11 для n від 0 до 9, то отримаємо 1, 8, 9, 6, 4, 10, 3, 2, 5, 7.
-As we see all possible values from 1 to 10 occur. So 8 is a primitive root of 11.
+Як бачимо, ми отримали всі можливі значення від 1 до 10. Отже, 8 є примітивним коренем 11.
-But there is more:
+Проте це не все:
-If we take a closer look we see:
+Якщо розглянути детальніше, то:
$$\begin{align} & 1 + 8 = 9 \\\\
& 8 + 9 = 17 ≡ 6\bmod 11 \\\\ & 9 + 6 = 15 ≡ 4\bmod 11 \\\\
@@ -22,11 +22,11 @@ $$\begin{align} & 1 + 8 = 9 \\\\
& 10 + 3 = 13 ≡ 2\bmod 11 \\\\ & 3 + 2 = 5 \\\\
& 2 + 5 = 7 \\\\ & 5 + 7 = 12 ≡ 1\bmod 11. \end{align}$$
-So the powers of 8 mod 11 are cyclic with period 10, and $8^n + 8^{n + 1} ≡ 8^{n + 2} (\text{mod } 11)$. 8 is called a Fibonacci primitive root of 11.
+Отже, степені 8 mod 11 циклічні з періодом 10, а $8^n + 8^{n + 1} ≡ 8^{n + 2} (\text{mod } 11)$. Число 8 називають примітивним коренем Фібоначчі по модулю 11.
-Not every prime has a Fibonacci primitive root. There are 323 primes less than 10000 with one or more Fibonacci primitive roots and the sum of these primes is 1480491.
+Не кожне просте число має примітивний корінь Фібоначчі. Існує 323 простих чисел, менших за 10000, з одним чи більше примітивними коренями Фібоначчі, а сума цих простих чисел дорівнює 1480491.
-Find the sum of the primes less than $100\\,000\\,000$ with at least one Fibonacci primitive root.
+Знайдіть суму простих чисел, менших за $100\\,000\\,000$ з принаймні одним примітивним коренем Фібоначчі.
# --hints--
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-438-integer-part-of-polynomial-equations-solutions.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-438-integer-part-of-polynomial-equations-solutions.md
index 4dca9216e0d..0a8b5e33268 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-438-integer-part-of-polynomial-equations-solutions.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-438-integer-part-of-polynomial-equations-solutions.md
@@ -1,6 +1,6 @@
---
id: 5900f5231000cf542c510034
-title: 'Problem 438: Integer part of polynomial equation''s solutions'
+title: 'Завдання 438: ціла частина розв’язків поліноміального рівняння'
challengeType: 1
forumTopicId: 302109
dashedName: problem-438-integer-part-of-polynomial-equations-solutions
@@ -8,18 +8,18 @@ dashedName: problem-438-integer-part-of-polynomial-equations-solutions
# --description--
-For an $n$-tuple of integers $t = (a_1, \ldots, a_n)$, let $(x_1, \ldots, x_n)$ be the solutions of the polynomial equation $x^n + a_1x^{n - 1} + a_2x^{n - 2} + \ldots + a_{n - 1}x + a_n = 0$.
+Нехай $(x_1, \ldots, x_n)$ будуть розв’язками для поліноміального рівняння $x^n + a_1x^{n - 1} + a_2x^{n - 2} + \ldots + a_{n - 1}x + a_n = 0$ для кортежу з $n$ цілих чисел $t = (a_1, \ldots, a_n)$.
-Consider the following two conditions:
+Розглянемо дві умови:
-- $x_1, \ldots, x_n$ are all real.
-- If $x_1, ..., x_n$ are sorted, $⌊x_i⌋ = i$ for $1 ≤ i ≤ n$. ($⌊·⌋:$ floor function.)
+- $x_1, \ldots, x_n$ є дійсними числами.
+- Якщо $x_1, ..., x_n$ відсортовані, то $⌊x_i⌋ = i$ за умови $1 ≤ i ≤ n$. ($⌊·⌋:$ функція підлоги.)
-In the case of $n = 4$, there are 12 $n$-tuples of integers which satisfy both conditions.
+Якщо $n = 4$, то існує 12 кортежів з $n$ цілих чисел, що задовільняють обидві умови.
-We define $S(t)$ as the sum of the absolute values of the integers in $t$.
+Визначимо $S(t)$ як суму абсолютних значень цілих чисел в $t$.
-For $n = 4$ we can verify that $\sum S(t) = 2087$ for all $n$-tuples $t$ which satisfy both conditions.
+Якщо $n = 4$, то можна довести, що $\sum S(t) = 2087$ для всіх кортежів $t$ з $n$ цілих чисел, що задовільняють обидві умови.
Знайдіть $\sum S(t)$ за умови $n = 7$.
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-440-gcd-and-tiling.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-440-gcd-and-tiling.md
index 566c43cc070..c40b615bedd 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-440-gcd-and-tiling.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-440-gcd-and-tiling.md
@@ -1,6 +1,6 @@
---
id: 5900f5241000cf542c510037
-title: 'Problem 440: GCD and Tiling'
+title: 'Завдання 440: НСД і покриття плиткою'
challengeType: 1
forumTopicId: 302112
dashedName: problem-440-gcd-and-tiling
@@ -8,19 +8,19 @@ dashedName: problem-440-gcd-and-tiling
# --description--
-We want to tile a board of length $n$ and height 1 completely, with either 1 × 2 blocks or 1 × 1 blocks with a single decimal digit on top:
+Нам потрібно обкласти панель довжиною $n$ і висотою 1 за допомогою блоків 1 × 2 або 1 × 1, позначених цифрою:
-
+
+
+
+
+