Added Task Categorization and Priority Tagging

CONTRIBUTING.md

@@ -16,7 +16,6 @@ Once you've forked the repository, clone it to your local machine.
 git clone https://github.com/YOUR-USERNAME/To-Do-List.git
 ```
 
-
 ## Linting and Formatting
 
 This project uses **ESLint** and **Prettier** to ensure code quality and consistency.

README.md

@@ -26,7 +26,6 @@ Open `index.html` in your browser to use the application.
 - **Edit a Task:** Click the edit icon next to the task, make your changes, and save.
 - **Delete a Task:** Click the delete icon next to the task.
 
-
 ## Linting and Formatting
 
 This project uses **ESLint** and **Prettier** to ensure code quality and consistency.

eslint.config.mjs

@@ -3,10 +3,10 @@ import pluginJs from '@eslint/js';
 
 export default [
   {
-    files: ["**/*.js"],
-    languageOptions: { 
-      globals: globals.browser 
-    }
+    files: ['**/*.js'],
+    languageOptions: {
+      globals: globals.browser,
+    },
   },
-  pluginJs.configs.recommended
+  pluginJs.configs.recommended,
 ];

index.html

@@ -31,17 +31,21 @@ <h1>Todo-List</h1>
           <option value="medium">Medium</option>
           <option value="low">Low</option>
         </select>
-        <button class="js-add-button" onclick="addTodo();">
+        <button class="js-add-button">
           <img src="assets/add-icon.png" alt="Add" width="16" height="16" /> Add
         </button>
       </div>
-      
+
       <!-- Add this new div for sorting buttons -->
       <div class="sort-buttons">
-        <button class="sort-button" onclick="sortTodos('category')">Sort by Category</button>
-        <button class="sort-button" onclick="sortTodos('priority')">Sort by Priority</button>
+        <button class="sort-button" onclick="sortTodos('category')">
+          Sort by Category
+        </button>
+        <button class="sort-button" onclick="sortTodos('priority')">
+          Sort by Priority
+        </button>
       </div>
-      
+
       <div class="js-add-html js-add-grid"></div>
     </div>
     <footer>

script.js

@@ -21,7 +21,9 @@ function addTodo() {
 
   // Validation checks
   if (!name || !date || !time || !category || !priority) {
-    alert('Please fill in all fields: task, date, time, category, and priority.');
+    alert(
+      'Please fill in all fields: task, date, time, category, and priority.'
+    );
     return;
   }
 
@@ -78,13 +80,13 @@ function updateTodoList() {
       const dateB = new Date(b.date + ' ' + b.time);
       return dateA - dateB;
     } else if (currentSortMethod === 'category') {
-      return currentCategorySortOrder === 'asc' 
-        ? a.category.localeCompare(b.category) 
+      return currentCategorySortOrder === 'asc'
+        ? a.category.localeCompare(b.category)
         : b.category.localeCompare(a.category);
     } else if (currentSortMethod === 'priority') {
       const priorityOrder = { high: 0, medium: 1, low: 2 };
-      return currentSortOrder === 'asc' 
-        ? priorityOrder[a.priority] - priorityOrder[b.priority] 
+      return currentSortOrder === 'asc'
+        ? priorityOrder[a.priority] - priorityOrder[b.priority]
         : priorityOrder[b.priority] - priorityOrder[a.priority];
     }
   });
@@ -104,14 +106,29 @@ function updateTodoList() {
       </div>
       <div class="small-container">${todo.date}</div>
       <div class="small-container">${todo.time}</div>
-      <button class="js-delete-button" onclick="deleteTodo(${i});">
+      <button class="js-delete-button" data-index="${i}">
         <img src="assets/delete-icon.png" alt="Delete" width="16" height="16">delete
       </button>
-      <button class="js-edit-button" onclick="editTodo(${i});">
+      <button class="js-edit-button" data-index="${i}">
         <img src="assets/edit-icon.png" alt="Edit" width="16" height="16">edit
       </button>`;
   }
   addElement.innerHTML = todoListhtml;
+
+  // Add event listeners for delete and edit buttons
+  document.querySelectorAll('.js-delete-button').forEach((button) => {
+    button.addEventListener('click', (event) => {
+      const index = event.currentTarget.getAttribute('data-index');
+      deleteTodo(index);
+    });
+  });
+
+  document.querySelectorAll('.js-edit-button').forEach((button) => {
+    button.addEventListener('click', (event) => {
+      const index = event.currentTarget.getAttribute('data-index');
+      editTodo(index);
+    });
+  });
 }
 
 function updateTodo(index) {
@@ -129,7 +146,9 @@ function updateTodo(index) {
     !inputCategoryElement.value ||
     !inputPriorityElement.value
   ) {
-    alert('Please fill in all fields: task, date, time, category, and priority.');
+    alert(
+      'Please fill in all fields: task, date, time, category, and priority.'
+    );
     return;
   }
 
@@ -175,7 +194,8 @@ function sortTodos(sortBy) {
   if (sortBy === 'priority') {
     currentSortOrder = currentSortOrder === 'asc' ? 'desc' : 'asc'; // Toggle sort order
   } else if (sortBy === 'category') {
-    currentCategorySortOrder = currentCategorySortOrder === 'asc' ? 'desc' : 'asc'; // Toggle category sort order
+    currentCategorySortOrder =
+      currentCategorySortOrder === 'asc' ? 'desc' : 'asc'; // Toggle category sort order
   }
   currentSortMethod = sortBy;
   updateTodoList();
@@ -189,4 +209,15 @@ document.addEventListener('DOMContentLoaded', () => {
   // Set focus on the name input field
   const inputNameElement = document.querySelector('.js-name-input');
   inputNameElement.focus();
+
+  // Add event listeners to buttons
+  document.querySelector('.js-add-button').addEventListener('click', addTodo);
+
+  // Add event listeners for sorting buttons
+  document
+    .querySelector('.sort-button-category')
+    .addEventListener('click', () => sortTodos('category'));
+  document
+    .querySelector('.sort-button-priority')
+    .addEventListener('click', () => sortTodos('priority'));
 });

style.css

@@ -85,12 +85,11 @@ h1 {
   min-height: 3px;
 }
 
-
 .task-info {
   display: flex;
   align-items: center;
   gap: 10px;
-  flex-wrap: wrap; 
+  flex-wrap: wrap;
 }
 
 .task-name {
@@ -189,7 +188,7 @@ footer p {
 }
 
 .sort-button {
-  background-color: #4CAF50;
+  background-color: #4caf50;
   border: none;
   color: white;
   padding: 10px 20px;