\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/english/25-front-end-development/workshop-todo-app/64ec94f0de20c086e09b0fc3.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/64ec94f0de20c086e09b0fc3.md
new file mode 100644
index 00000000000..a829892ae48
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/64ec94f0de20c086e09b0fc3.md
@@ -0,0 +1,349 @@
+---
+id: 64ec94f0de20c086e09b0fc3
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --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/english/25-front-end-development/workshop-todo-app/64ec959a76336c8767f5cd4d.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/64ec959a76336c8767f5cd4d.md
new file mode 100644
index 00000000000..12ed9bd71f0
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/64ec959a76336c8767f5cd4d.md
@@ -0,0 +1,337 @@
+---
+id: 64ec959a76336c8767f5cd4d
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --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\(\s*("|')hidden\1\s*\)\s*;?/)
+```
+
+You should call the `reset` function.
+
+```js
+assert.match(code, /reset\(\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 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*\)\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
+
]*onclick\s*=\s*("|')editTask\(\s*this\s*\)\1)[^>]*>Edit<\/button>/);
+```
+
+You should add `onclick="deleteTask(this)"` to your delete button.
+
+```js
+assert.match(code, /]*onclick\s*=\s*("|')deleteTask\(\s*this\s*\)\1)[^>]*>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
+
Date.now() .
+
+`Date.now()` returns the number of milliseconds elapsed since `January 1, 1970 00:00:00 UTC`.
+
+```js
+console.log(Date.now()); // 1628586800000
+```
+
+To see the new result, click on the `"Add New Task"` button. Then add a title of `WALK DOG` and click on the `"Add Task"` button. Open up the console to see the result.
+
+# --hints--
+
+You should add `-${Date.now()}` to `${titleInput.value.toLowerCase().split(' ').join('-')}`. Don't forget it needs to be inside the template string.
+
+```js
+assert.match(code, /\s*id:\s*`\$\{titleInput\.value\.toLowerCase\(\s*\)\.split\(\s*('|")\s{1}\1\s*\)\.join\(\s*('|")-\2\s*\)\}-\$\{Date\.now\(\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 = {
+ --fcc-editable-region--
+ id: `${titleInput.value.toLowerCase().split(' ').join('-')}`,
+ --fcc-editable-region--
+ };
+ console.log(taskObj);
+});
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/65099dbd8f137d58e5c0ff16.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/65099dbd8f137d58e5c0ff16.md
new file mode 100644
index 00000000000..d9789dca335
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/65099dbd8f137d58e5c0ff16.md
@@ -0,0 +1,338 @@
+---
+id: 65099dbd8f137d58e5c0ff16
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --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--
+
Learn localStorage by Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --white: #fff;
+ --light-grey: #f5f6f7;
+ --dark-grey: #0a0a23;
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+}
+
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+main {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+h1 {
+ color: var(--light-grey);
+ margin: 20px 0 40px 0;
+}
+
+.todo-app {
+ background-color: var(--white);
+ width: 300px;
+ height: 350px;
+ border: 5px solid var(--yellow);
+ border-radius: 8px;
+ padding: 15px;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.btn {
+ cursor: pointer;
+ width: 100px;
+ margin: 10px;
+ color: var(--dark-grey);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
+.large-btn {
+ width: 80%;
+ font-size: 1.2rem;
+ align-self: center;
+ justify-self: center;
+}
+
+.close-task-form-btn {
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.close-icon {
+ width: 20px;
+ height: 20px;
+}
+
+.task-form {
+ display: flex;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: var(--white);
+ border-radius: 5px;
+ padding: 15px;
+ width: 300px;
+ height: 350px;
+ flex-direction: column;
+ justify-content: space-between;
+ overflow: auto;
+}
+
+.task-form-header {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.task-form-body {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+}
+
+.task-form-footer {
+ display: flex;
+ justify-content: center;
+}
+
+.task-form-label,
+#title-input,
+#date-input,
+#description-input {
+ display: block;
+}
+
+.task-form-label {
+ margin-bottom: 5px;
+ font-size: 1.3rem;
+ font-weight: bold;
+}
+
+#title-input,
+#date-input,
+#description-input {
+ width: 100%;
+ margin-bottom: 10px;
+ padding: 2px;
+}
+
+#confirm-close-dialog {
+ padding: 10px;
+ margin: 10px auto;
+ border-radius: 15px;
+}
+
+.confirm-close-dialog-btn-container {
+ display: flex;
+ justify-content: center;
+ margin-top: 10px;
+}
+
+.discard-message-text {
+ font-weight: bold;
+ font-size: 1.5rem;
+}
+
+#tasks-container {
+ height: 100%;
+ overflow-y: auto;
+}
+
+.task {
+ margin: 5px 0;
+}
+
+.hidden {
+ display: none;
+}
+
+@media (min-width: 576px) {
+ .todo-app,
+ .task-form {
+ width: 400px;
+ height: 450px;
+ }
+
+ .task-form-label {
+ font-size: 1.5rem;
+ }
+
+ #title-input,
+ #date-input {
+ height: 2rem;
+ }
+
+ #title-input,
+ #date-input,
+ #description-input {
+ padding: 5px;
+ margin-bottom: 20px;
+ }
+}
+```
+
+```js
+const taskForm = document.getElementById("task-form");
+const confirmCloseDialog = document.getElementById("confirm-close-dialog");
+const openTaskFormBtn = document.getElementById("open-task-form-btn");
+const closeTaskFormBtn = document.getElementById("close-task-form-btn");
+const addOrUpdateTaskBtn = document.getElementById("add-or-update-task-btn");
+const cancelBtn = document.getElementById("cancel-btn");
+const discardBtn = document.getElementById("discard-btn");
+const tasksContainer = document.getElementById("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/english/25-front-end-development/workshop-todo-app/660d8ca387f989d6b25a3343.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/660d8ca387f989d6b25a3343.md
new file mode 100644
index 00000000000..b5693a9c5e5
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/660d8ca387f989d6b25a3343.md
@@ -0,0 +1,323 @@
+---
+id: 660d8ca387f989d6b25a3343
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Inside your `taskObj`, add an `id` property name. For the value use the value of the `titleInput`.
+
+To see the new result, click on the `"Add New Task"` button. Then add a title and click on the `"Add Task"` button. Open up the console to see the result.
+
+# --hints--
+
+Your `taskObj` should have an `id` property.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*("|'|)id\1/)
+```
+
+The `id` property of your `taskObj` object should be set to `titleInput.value`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*("|'|)id\1\s*:\s*titleInput\.value\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);
+
+--fcc-editable-region--
+ const taskObj = {
+
+ };
+ console.log(taskObj);
+--fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/660d8d7bb2424cd7cdf90ec1.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/660d8d7bb2424cd7cdf90ec1.md
new file mode 100644
index 00000000000..38e188a25ab
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/660d8d7bb2424cd7cdf90ec1.md
@@ -0,0 +1,323 @@
+---
+id: 660d8d7bb2424cd7cdf90ec1
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+The user should be able to input a title with upper and lowercase letters. But for the `id`, the value should be all lowercase.
+
+Update your `titleInput.value` to be all lowercase. You can use the `toLowerCase()` method to do this.
+
+```js
+str.toLowerCase();
+```
+
+To see the new result, click on the `"Add New Task"` button. Then add a title of `WALK DOG` and click on the `"Add Task"` button. Open up the console to see the result of `"walk dog"`.
+
+# --hints--
+
+Your value should be `titleInput.value.toLowerCase()`.
+
+```js
+assert.match(code, /\s*id:\s*titleInput\.value\.toLowerCase\(\)/)
+```
+
+# --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 = {
+ --fcc-editable-region--
+ id: titleInput.value
+ --fcc-editable-region--
+ };
+ console.log(taskObj);
+});
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/660d90b0ec1ef7da914c5e65.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/660d90b0ec1ef7da914c5e65.md
new file mode 100644
index 00000000000..ebe04b46f38
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/660d90b0ec1ef7da914c5e65.md
@@ -0,0 +1,319 @@
+---
+id: 660d90b0ec1ef7da914c5e65
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Right now, your `id` value is a lowercase string. But the final result should be a hyphenated string.
+
+Start by chaining the `split` method to the `titleInput.value` to split the string into an array of words. For the separator, use a space character(`" "`).
+
+To see the new result, click on the `"Add New Task"` button. Then add a title of `WALK DOG` and click on the `"Add Task"` button. Open up the console to see the result of `['walk', 'dog']`.
+
+# --hints--
+
+You should chain `split(" ")` to `titleInput.value.toLowerCase()`.
+
+```js
+assert.match(code, /\s*id:\s*titleInput\.value\.toLowerCase\(\s*\)\.split\(\s*('|")\s{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);
+
+ const taskObj = {
+ --fcc-editable-region--
+ id: titleInput.value.toLowerCase()
+ --fcc-editable-region--
+ };
+ console.log(taskObj);
+});
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/660d936a55565add0a27199b.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/660d936a55565add0a27199b.md
new file mode 100644
index 00000000000..c1f4aa85947
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/660d936a55565add0a27199b.md
@@ -0,0 +1,317 @@
+---
+id: 660d936a55565add0a27199b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that your `id` is an array of words, you can use the `join` method to turn the result back into a string. For the separator, use a hyphen(`-`).
+
+To see the new result, click on the `"Add New Task"` button. Then add a title of `WALK DOG` and click on the `"Add Task"` button. Open up the console to see the result of `"walk-dog"`.
+
+# --hints--
+
+You should chain `join("-")` to `titleInput.value.toLowerCase().split(" ")`.
+
+```js
+assert.match(code, /const\s+taskObj\s*=\s*\{\s*id:\s*titleInput\.value\.toLowerCase\(\s*\)\.split\(\s*('|")\s{1}\1\s*\)\.join\(\s*('|")-\2\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 = {
+ --fcc-editable-region--
+ id: titleInput.value.toLowerCase().split(" ")
+ --fcc-editable-region--
+ };
+ console.log(taskObj);
+});
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/660d9535e86fd2deb351aeb9.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/660d9535e86fd2deb351aeb9.md
new file mode 100644
index 00000000000..af2fffae584
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/660d9535e86fd2deb351aeb9.md
@@ -0,0 +1,325 @@
+---
+id: 660d9535e86fd2deb351aeb9
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+There is one last thing you will need to do to make this `id` unique.
+
+But first, place the entire value below inside an embedded expression `${}`.
+
+```js
+titleInput.value.toLowerCase().split(" ").join("-")
+```
+
+Then wrap that value in template strings.
+
+In the next step, you will add a unique number to the end of the `id` value to make it truly unique.
+
+# --hints--
+
+Your value should be `${titleInput.value.toLowerCase().split(" ").join("-")}`. Don't forget to wrap the entire value in template strings.
+
+```js
+assert.match(code, /\s*id:\s*`\s*\${\s*titleInput\.value\.toLowerCase\(\s*\)\.split\(\s*('|")\s{1}\1\s*\)\.join\(\s*('|")-\2\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 = {
+ --fcc-editable-region--
+ id: titleInput.value.toLowerCase().split(" ").join("-")
+ --fcc-editable-region--
+ };
+ console.log(taskObj);
+});
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/660d9cb6cc6415e6ca0509d8.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/660d9cb6cc6415e6ca0509d8.md
new file mode 100644
index 00000000000..b64fd2f83e9
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/660d9cb6cc6415e6ca0509d8.md
@@ -0,0 +1,318 @@
+---
+id: 660d9cb6cc6415e6ca0509d8
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Now that have finished testing your `taskObj`, you can remove the `console.log(taskObj)` statement.
+
+# --hints--
+
+You should not have a `console.log(taskObj)` statement in your code.
+
+```js
+assert.notMatch(code, /console\.log\(\s*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--
+ console.log(taskObj);
+ --fcc-editable-region--
+});
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-todo-app/6632420f81f3cc554a5e540b.md b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/6632420f81f3cc554a5e540b.md
new file mode 100644
index 00000000000..640a2c830d6
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-todo-app/6632420f81f3cc554a5e540b.md
@@ -0,0 +1,397 @@
+---
+id: 6632420f81f3cc554a5e540b
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+If you try to add a new task, edit that task, and then click on the `Add New Task` button, you will notice a bug.
+
+The form button will display the incorrect text of `"Update Task"` instead of `"Add Task"`. To fix this, you will need to assign the string `"Add Task"` to `addOrUpdateTaskBtn.innerText` inside your `reset` function.
+
+# --hints--
+
+You should assign the string `"Add Task"` to `addOrUpdateTaskBtn.innerText`.
+
+```js
+assert.match(code, /addOrUpdateTaskBtn\.innerText\s*=\s*('|")Add Task\1\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn localStorage by Building a Todo App
+
+ Todo App
+
+
+ Add New Task
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --white: #fff;
+ --light-grey: #f5f6f7;
+ --dark-grey: #0a0a23;
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+}
+
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+main {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+h1 {
+ color: var(--light-grey);
+ margin: 20px 0 40px 0;
+}
+
+.todo-app {
+ background-color: var(--white);
+ width: 300px;
+ height: 350px;
+ border: 5px solid var(--yellow);
+ border-radius: 8px;
+ padding: 15px;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.btn {
+ cursor: pointer;
+ width: 100px;
+ margin: 10px;
+ color: var(--dark-grey);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
+.large-btn {
+ width: 80%;
+ font-size: 1.2rem;
+ align-self: center;
+ justify-self: center;
+}
+
+.close-task-form-btn {
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.close-icon {
+ width: 20px;
+ height: 20px;
+}
+
+.task-form {
+ display: flex;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: var(--white);
+ border-radius: 5px;
+ padding: 15px;
+ width: 300px;
+ height: 350px;
+ flex-direction: column;
+ justify-content: space-between;
+ overflow: auto;
+}
+
+.task-form-header {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.task-form-body {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+}
+
+.task-form-footer {
+ display: flex;
+ justify-content: center;
+}
+
+.task-form-label,
+#title-input,
+#date-input,
+#description-input {
+ display: block;
+}
+
+.task-form-label {
+ margin-bottom: 5px;
+ font-size: 1.3rem;
+ font-weight: bold;
+}
+
+#title-input,
+#date-input,
+#description-input {
+ width: 100%;
+ margin-bottom: 10px;
+ padding: 2px;
+}
+
+#confirm-close-dialog {
+ padding: 10px;
+ margin: 10px auto;
+ border-radius: 15px;
+}
+
+.confirm-close-dialog-btn-container {
+ display: flex;
+ justify-content: center;
+ margin-top: 10px;
+}
+
+.discard-message-text {
+ font-weight: bold;
+ font-size: 1.5rem;
+}
+
+#tasks-container {
+ height: 100%;
+ overflow-y: auto;
+}
+
+.task {
+ margin: 5px 0;
+}
+
+.hidden {
+ display: none;
+}
+
+@media (min-width: 576px) {
+ .todo-app,
+ .task-form {
+ width: 400px;
+ height: 450px;
+ }
+
+ .task-form-label {
+ font-size: 1.5rem;
+ }
+
+ #title-input,
+ #date-input {
+ height: 2rem;
+ }
+
+ #title-input,
+ #date-input,
+ #description-input {
+ padding: 5px;
+ margin-bottom: 20px;
+ }
+}
+```
+
+```js
+const taskForm = document.getElementById("task-form");
+const confirmCloseDialog = document.getElementById("confirm-close-dialog");
+const openTaskFormBtn = document.getElementById("open-task-form-btn");
+const closeTaskFormBtn = document.getElementById("close-task-form-btn");
+const addOrUpdateTaskBtn = document.getElementById("add-or-update-task-btn");
+const cancelBtn = document.getElementById("cancel-btn");
+const discardBtn = document.getElementById("discard-btn");
+const tasksContainer = 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 = () => {
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ const taskObj = {
+ id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`,
+ title: titleInput.value,
+ date: dateInput.value,
+ description: descriptionInput.value,
+ };
+
+ if (dataArrIndex === -1) {
+ taskData.unshift(taskObj);
+ } else {
+ taskData[dataArrIndex] = taskObj;
+ }
+
+ 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 = {};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+const addOrUpdateTask = () => {
+ if(!titleInput.value.trim()){
+ alert("Please provide a title");
+ return;
+ }
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ const 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 removeSpecialChars = (val) => {
+ return val.trim().replace(/[^A-Za-z0-9\-\s]/g, '')
+}
+
+const addOrUpdateTask = () => {
+ if(!titleInput.value.trim()){
+ alert("Please provide a title");
+ return;
+ }
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ --fcc-editable-region--
+ 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);
+ } 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 removeSpecialChars = (val) => {
+ return val.trim().replace(/[^A-Za-z0-9\-\s]/g, '')
+}
+
+const addOrUpdateTask = () => {
+ if(!titleInput.value.trim()){
+ alert("Please provide a title");
+ return;
+ }
+ const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
+ const taskObj = {
+ id: `${removeSpecialChars(titleInput.value).toLowerCase().split(" ").join("-")}-${Date.now()}`,
+ title:removeSpecialChars(titleInput.value) ,
+ date: dateInput.value,
+ description: removeSpecialChars(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
+