Merge branch 'hotfix/form'

src/dialogFormContent.html

@@ -12,7 +12,7 @@ <h2 class="cs-title">Todo</h2>
             <p class="cs-text">title, description, dueDate and priority</p>
         </div>
         <form id="todo-form" name="New Todo" method="dialog">
-            <label class="cs-label">
+            <label class="cs-label" for="title">
                 Title
                 <input
                     class="cs-input"
@@ -23,14 +23,15 @@ <h2 class="cs-title">Todo</h2>
                     placeholder="Title"
                 />
             </label>
-            <label class="cs-label" id="project-container">
+            <label class="cs-label" id="project-container" for="project">
                 Project
                 <input
                     class="cs-input project-container-input"
                     type="text"
                     id="project"
                     name="project"
                     placeholder="Create new or add to existing project"
+                    required
                 />
                 <!-- <button
                     class="add-project-button"
@@ -41,14 +42,15 @@ <h2 class="cs-title">Todo</h2>
                     +
                 </button> -->
             </label>
-            <label class="cs-label">
+            <label class="cs-label" for="description">
                 Description
                 <input
                     class="cs-input"
                     type="text"
                     id="description"
                     name="description"
                     placeholder="Why?"
+                    required
                 />
             </label>
             <label class="cs-label" for="dueDate">
@@ -81,7 +83,6 @@ <h2 class="cs-title">Todo</h2>
                         type="radio"
                         value="medium"
                         id="priority-medium"
-                        required
                     />
                     <label for="priority-medium" class="priority-button medium">
                         Medium
@@ -99,7 +100,9 @@ <h2 class="cs-title">Todo</h2>
                 </div>
             </div>
 
-            <button class="cs-button-solid cs-submit" type="" id="form-button">Add</button>
+            <button class="cs-button-solid cs-submit" type="" id="form-button">
+                Add
+            </button>
         </form>
     </div>
 </section>

src/index.js

@@ -53,11 +53,9 @@ try {
     navigationButtons.forEach((navigationButton) => {
         const button = document.getElementById(navigationButton);
 
-        button.addEventListener('click', () => {
-            buttonEventHandler();
-        });
+        button.addEventListener('click', buttonEventHandler);
 
-        const buttonEventHandler = () => {
+        function buttonEventHandler() {
             switch (navigationButton) {
                 case 'home':
                     homePageLoader(content);
@@ -72,11 +70,7 @@ try {
                     homePageLoader(content); // Default page if page is not specified
             }
             updateNavigationActiveState(navigationButton);
-        };
-
-        button.removeEventListener('click', () => {
-            buttonEventHandler();
-        });
+        }
     });
 } catch (error) {
     console.error(
@@ -91,10 +85,9 @@ try {
 try {
     // Add event listeners to Project dropdown items
     const dropdown = document.getElementById('projects');
-    dropdown.addEventListener('click', (event) => {
-        dropdownButtonEventHandler(event);
-    });
-    const dropdownButtonEventHandler = (event) => {
+    dropdown.addEventListener('click', dropdownButtonEventHandler);
+
+    function dropdownButtonEventHandler(event) {
         // Check if the clicked element is a dropdown item
         if (event.target.classList.contains('cs-drop-link')) {
             // Prevent default behavior of links
@@ -106,10 +99,7 @@ try {
             // Pass the selected project name to the projectsPageLoader function
             projectsPageLoader(content, selectedProjectName);
         }
-    };
-    dropdown.removeEventListener('click', () => {
-        dropdownButtonEventHandler();
-    });
+    }
 } catch (error) {
     console.error('Error handling dropdown buttons: ', error);
 }
@@ -124,9 +114,6 @@ try {
     newTodoButton.addEventListener('click', () => {
         handleNewTodoButtonClick();
     });
-    newTodoButton.removeEventListener('click', () => {
-        handleNewTodoButtonClick();
-    });
 } catch (error) {
     handleDialogError(error);
 }

src/modules/entities/todoItems.js

@@ -100,11 +100,14 @@ export class TodoManager {
             todoDueDate.style.textDecoration = 'line-through';
         }
 
-        checkbox.addEventListener('click', (event) => {
+        // Function to handle checkbox click event
+        const handleCheckBoxClick = (event) => {
             event.preventDefault();
-            handleCheckBoxClick();
-        });
-        const handleCheckBoxClick = () => {
+            handleCheckBox();
+        };
+
+        // Function to toggle completion status and update visual representation
+        const handleCheckBox = () => {
             // Toggle the 'todo-checked' class
             checkbox.classList.toggle('todo-checked');
 
@@ -118,9 +121,65 @@ export class TodoManager {
             // Update todo completion status in local storage
             this.updateTodoCompletion(todoId, isCompleted);
         };
-        checkbox.removeEventListener('click', () => {
-            handleCheckBoxClick();
-        });
+
+        // Add event listener to checkbox
+        checkbox.addEventListener('click', handleCheckBoxClick);
+
+        // Function to remove event listener from checkbox
+        const removeEventListenerFromCheckBox = () => {
+            checkbox.removeEventListener('click', handleCheckBoxClick);
+        };
+
+        return removeEventListenerFromCheckBox;
+    }
+
+    /**
+     * Handles the details button click event for a Todo item.
+     *
+     * @param {HTMLElement} todoDetails - The details button element.
+     * @param {HTMLElement} todoDetailsId - The details ID element.
+     * @param {number} id - The ID of the Todo item.
+     */
+    todoDetailsHandler(todoDetails, todoDetailsId, id) {
+        // Function to handle details button click event
+        const handleDetailsButtonClick = (event) => {
+            event.preventDefault();
+            handleDetails();
+        };
+
+        // Function to handle details action
+        const handleDetails = async () => {
+            try {
+                // Retrieve todo data from local storage based on todo ID
+                const existingData =
+                    getDataFromLocalStorage(PROJECTS_STORAGE_KEY);
+                const todoData = this.findTodoById(existingData, id);
+
+                if (!todoData) {
+                    console.error(
+                        'Todo with id: ',
+                        id,
+                        'not found in local storage'
+                    );
+                    return;
+                }
+
+                // Open dialog with Todo details
+                await dialogHandler(todoDetails, todoDetailsId, todoData);
+            } catch (error) {
+                console.error('Error handling details click: ', error);
+            }
+        };
+
+        // Add event listener to details button
+        todoDetails.addEventListener('click', handleDetailsButtonClick);
+
+        // Function to remove event listener from details button
+        const removeEventListenerFromDetails = () => {
+            todoDetails.removeEventListener('click', handleDetailsButtonClick);
+        };
+
+        return removeEventListenerFromDetails;
     }
 
     /**
@@ -131,32 +190,62 @@ export class TodoManager {
      * @param {string} projectName - The project name of the Todo item.
      */
     todoDeleteHandler(todoDelete, todoId, projectName) {
-        todoDelete.addEventListener('click', (event) => {
+        // Function to handle delete button click event
+        const handleDeleteButtonClick = (event) => {
             event.preventDefault();
-            handleDeleteButtonClick();
-        });
-        const handleDeleteButtonClick = () => {
+            handleDelete();
+        };
+
+        // Function to handle delete action
+        const handleDelete = () => {
             const todoToRemove = todoId;
 
-            let existingData = getDataFromLocalStorage(PROJECTS_STORAGE_KEY);
+            // Remove event listener from delete button
+            todoDelete.removeEventListener('click', handleDeleteButtonClick);
 
-            let updatedData = removeTodoFromLocalStorage(
-                existingData,
-                todoToRemove
-            );
+            // Remove event listeners for checkbox and details buttons
+            const checkbox = document.getElementById(`checkbox-${todoId}`);
+            const detailsButton = document.getElementById(`details-${todoId}`);
 
-            saveDataToLocalStorage(PROJECTS_STORAGE_KEY, updatedData);
+            if (checkbox && detailsButton) {
+                const checkboxRemoveEventListener = this.checkboxHandler(
+                    checkbox,
+                    this.todoTitle,
+                    this.todoDueDate,
+                    this.todoId
+                );
+                const detailsRemoveEventListener = this.todoDetailsHandler(
+                    detailsButton,
+                    this.todoDetailsId,
+                    this.todoId
+                );
 
-            projectManager.removeTodoFromProject(projectName, todoToRemove);
+                // Remove the event listeners before deleting todo item
+                checkboxRemoveEventListener();
+                detailsRemoveEventListener();
 
-            const section = document.querySelector('#content');
-            const todoContainer = renderContainer(existingData);
-            clearPage(section);
-            section.appendChild(todoContainer);
+                // Remove todo item from local storage
+                let existingData =
+                    getDataFromLocalStorage(PROJECTS_STORAGE_KEY);
+                let updatedData = removeTodoFromLocalStorage(
+                    existingData,
+                    todoToRemove
+                );
+                saveDataToLocalStorage(PROJECTS_STORAGE_KEY, updatedData);
+
+                // Remove todo item from project manager
+                projectManager.removeTodoFromProject(projectName, todoToRemove);
+
+                // Re-render the page
+                const section = document.querySelector('#content');
+                const todoContainer = renderContainer(existingData);
+                clearPage(section);
+                section.appendChild(todoContainer);
+            }
         };
-        todoDelete.removeEventListener('click', () => {
-            handleDeleteButtonClick();
-        });
+
+        // Add event listener to delete button
+        todoDelete.addEventListener('click', handleDeleteButtonClick);
     }
 
     /**
@@ -176,6 +265,7 @@ export class TodoManager {
                 return;
             }
 
+            // Update completion status of the Todo item in local storage
             const updatedData = existingData.map((project) => ({
                 ...project,
                 todos: project.todos.map((todo) => {
@@ -186,50 +276,13 @@ export class TodoManager {
                 }),
             }));
 
+            // Save update data to local storage
             saveDataToLocalStorage(PROJECTS_STORAGE_KEY, updatedData);
         } catch (error) {
             console.error(error);
         }
     }
 
-    /**
-     * Handles the details button click event for a Todo item.
-     *
-     * @param {HTMLElement} todoDetails - The details button element.
-     * @param {HTMLElement} todoDetailsId - The details ID element.
-     * @param {number} id - The ID of the Todo item.
-     */
-    todoDetailsHandler(todoDetails, todoDetailsId, id) {
-        todoDetails.addEventListener('click', (event) => {
-            event.preventDefault();
-            handleDetailsButtonClick();
-        });
-        const handleDetailsButtonClick = async () => {
-            try {
-                // Retrieve todo data from local storage based on todo ID
-                const existingData =
-                    getDataFromLocalStorage(PROJECTS_STORAGE_KEY);
-                const todoData = this.findTodoById(existingData, id);
-
-                if (!todoData) {
-                    console.error(
-                        'Todo with id: ',
-                        id,
-                        'not found in local storage'
-                    );
-                    return;
-                }
-
-                await dialogHandler(todoDetails, todoDetailsId, todoData); // Pass details element and its id
-            } catch (error) {
-                console.error('Error handling details click: ', error);
-            }
-        };
-        todoDetails.removeEventListener('click', () => {
-            handleDetailsButtonClick();
-        });
-    }
-
     /**
      * Retrieves the todos that are due today.
      *
@@ -326,7 +379,6 @@ export class TodoManager {
      * @returns {Array|null} - An array of todos for the specified project, or null if the project is not found.
      */
     getTodosForProject(existingData, projectName) {
-        // const existingData = getDataFromLocalStorage(PROJECTS_STORAGE_KEY);
         if (!existingData) {
             console.error('No existing data found in local storage');
             return null;