[WD-PT-SEPT2024-ES] Selena Sánchez

assets/js/main.js

@@ -2,9 +2,9 @@ window.addEventListener('DOMContentLoaded', () => {
   console.log('DOM LOADED!!');
 
   const taskManager = new TaskManager('tasks-container', 'create-task-form');
-  taskManager.add({ name: 'Task 1' });
-  taskManager.add({ name: 'Task 2' });
-  taskManager.add({ name: 'Task 3' });
-  taskManager.add({ name: 'Task 4' });
+  taskManager.add({ name: 'Task 1', priority: 1, date: "2024/10/14"});
+  taskManager.add({ name: 'Task 2', priority: 2, date: "2024/10/15"});
+  taskManager.add({ name: 'Task 3', priority: 3, date: "2024/11/10"});
+  taskManager.add({ name: 'Task 4', priority: 4, date: "2024/12/01" });
   taskManager.render();
 });

assets/js/models/task-manager.js

@@ -1,70 +1,158 @@
 class TaskManager {
-
   constructor(containerId, createTaskFormId) {
     this.containerId = containerId;
     this.createTaskFormId = createTaskFormId;
     this.tasks = [];
 
     document.getElementById(this.createTaskFormId)
       .addEventListener('submit', (event) => this.onTaskFormSubmit(event));
+
+     //Filter Buttons:
+     const allButton = document.getElementById('all-btn');
+     allButton.addEventListener('click', () => {
+       this.render();
+     })
+
+     const criticalButton = document.getElementById('critical-btn')
+     criticalButton.addEventListener('click', () => {
+       this.taskFilter(criticalButton.name);
+     })
+
+     const highButton = document.getElementById('high-btn');
+     highButton.addEventListener('click', () => {
+       this.taskFilter(highButton.name);
+     })
+
+     const mediumButton = document.getElementById('medium-btn');
+     mediumButton.addEventListener('click', () => {
+       this.taskFilter(mediumButton.name);
+     })
+
+     const lowButtton = document.getElementById('low-btn');
+     lowButtton.addEventListener('click', () => {
+       this.taskFilter(lowButtton.name);
+     })
+
+     const minorButton = document.getElementById('minor-btn');
+     minorButton.addEventListener('click', () => {
+       this.taskFilter(minorButton.name);
+     })
   }
 
   onTaskFormSubmit(event) {
     event.preventDefault();
 
     const form = event.target;
     const task = Object.fromEntries(new FormData(form).entries());
-    if (task.name.trim() !== '') {
+    if (task.name.trim() !== '' && task.date !== '') {
       this.add(task);
-      form.reset();
+      //Deletes the input text when pressing the button:
+      form.reset(); 
       this.render();
     }
   }
 
   add(task) {
     this.tasks.push({ 
       id: self.crypto.randomUUID(), 
-      name: task.name
+      name: task.name,
+      priority: +task.priority,
+      isCompleted: false,
+      date: task.date
     });
   }
 
   delete(id) {
     this.tasks = this.tasks.filter((task) => task.id !== id);
   }
 
+  complete(id) {
+    //Find the task and store it in the task varible
+    const task = this.tasks.find((task) => task.id === id);
+    if (task) {
+      task.isCompleted = true;
+    }
+  }
+
+  taskFilter(priority) {
+    const filteredTasks = this.tasks.filter((task) => getPriorityFromNumber(task.priority) === priority);
+    this.render(filteredTasks);
+  }
+
+
+
   buildTaskHTML(task) {
     const taskNode = document.createElement('li');
     taskNode.setAttribute('id', task.id);
     taskNode.classList.add('list-group-item', 'd-flex', 'gap-1', 'align-items-baseline');
+
+    const priorityTaskNode = document.createElement('img');
+    priorityTaskNode.classList.add('priority-icon');
+    priorityTaskNode.setAttribute('src', `assets/img/icons/priority/${getPriorityFromNumber(task.priority)}.svg`);
+    taskNode.appendChild(priorityTaskNode);
 
     const taskNameNode = document.createElement('div');
-    taskNameNode.classList.add('me-auto');
-    taskNameNode.appendChild(document.createTextNode(task.name));
+    taskNameNode.classList.add('me-auto', 'text-justify');
+    if (task.isCompleted) {
+      taskNameNode.classList.add('text-decoration-line-through');
+      taskNode.classList.add('bg-light');
+    }
+    taskNameNode.appendChild(document.createTextNode(`${task.name}  -  ${task.date}`));
     taskNode.appendChild(taskNameNode);
 
+
+
     const taskActionsNode = document.createElement('div');
     taskActionsNode.classList.add('d-flex', 'gap-2');
     taskNode.appendChild(taskActionsNode);
 
-    const deleteTaskNode = document.createElement('i');
-    deleteTaskNode.classList.add('fa', 'fa-trash-o', 'text-danger');
-    deleteTaskNode.setAttribute('role', 'button');
-    taskActionsNode.appendChild(deleteTaskNode);
+    const checkTaskNode = document.createElement('i');
+    checkTaskNode.classList.add('fa', 'fa-check', 'text-success');
+    checkTaskNode.setAttribute('role', 'button');
+    taskActionsNode.appendChild(checkTaskNode);
 
-    deleteTaskNode.addEventListener('click', () => {
-      this.delete(task.id);
+    checkTaskNode.addEventListener('click', () => {
+      this.complete(task.id);
       this.render();
-    });
+    }
+    )
+
+    //Task completed:
+    if (!task.isCompleted) {
+      const deleteTaskNode = document.createElement('i');
+      deleteTaskNode.classList.add('fa', 'fa-trash-o', 'text-danger');
+      deleteTaskNode.setAttribute('role', 'button');
+      taskActionsNode.appendChild(deleteTaskNode);
 
+      deleteTaskNode.addEventListener('click', () => {
+        this.delete(task.id);
+        this.render();
+      });
+    }
     return taskNode;
   }
 
-  render() {
+
+  render(filteredTasks) {
     const container = document.getElementById(this.containerId);
     container.innerHTML = '';
 
-    for (let i = 0; i < this.tasks.length; i++) {
-      const task = this.tasks[i];
+    const printTasks = (!filteredTasks) ? this.tasks : filteredTasks;
+
+    printTasks.sort(function (a, b) {
+      const aDate = new Date (a.date);
+      const bDate = new Date (b.date);
+      if (aDate > bDate) {
+        return 1;
+      } else if (aDate < bDate) {
+        return -1;
+      } else {
+        return 0;
+      }
+    })
+
+    for (let i = 0; i < printTasks.length; i++) {
+      const task = printTasks[i];
       container.appendChild(this.buildTaskHTML(task));
     }
   }

assets/js/utils.js

@@ -0,0 +1,15 @@
+//Function to get the priority string from a number
+function getPriorityFromNumber(priority) {
+    switch (priority) {
+        case 1: 
+            return 'critical';
+        case 2: 
+            return 'high';
+        case 3:
+            return 'medium';
+        case 4:
+            return 'low';
+        default:
+            return 'minor';
+    }
+}

assets/styles/style.css

@@ -0,0 +1,7 @@
+#create-task-form [name = "priority"] {
+    max-width: 100px;
+}
+
+.priority-icon {
+    height: 15px;
+}

index.html

@@ -16,26 +16,58 @@
     crossorigin="anonymous" 
     referrerpolicy="no-referrer" 
     />
+  <link rel="stylesheet" href="assets/styles/style.css">
 </head>
 <body>
 
   <div class="container py-5">
-    <h2 class="fw-light mb-3">Task Manager</h2>
-
+    <div class="d-flex justify-content-between">
+      <h2 class="fw-light mb-3">Task Manager</h2>
+      <div class="filter-container d-flex mb-3">
+        <button id="all-btn" name="all" class="btn btn-outline-light btn-sm">
+          <span class="text-dark">All</span>
+        </button>
+        <button id="critical-btn" name="critical" class="btn btn-outline-light btn-sm">
+          <img src="assets/img/icons/priority/critical.svg" class="priority-icon" alt="critical">
+        </button>
+        <button id="high-btn" name="high" class="btn btn-outline-light btn-sm">
+          <img src="assets/img/icons/priority/high.svg" class="priority-icon" alt="high">
+        </button>
+        <button id="medium-btn" name="medium" class="btn btn-outline-light btn-sm">
+          <img src="assets/img/icons/priority/medium.svg" class="priority-icon" alt="medium">
+        </button>
+        <button id="low-btn" name="low" class="btn btn-outline-light btn-sm">
+          <img src="assets/img/icons/priority/low.svg" class="priority-icon" alt="low">
+        </button>
+        <button id="minor-btn" name="minor" class="btn btn-outline-light btn-sm">
+          <img src="assets/img/icons/priority/minor.svg" class="priority-icon" alt="minor">
+        </button>
+    </div>
+    </div>
+
     <form id="create-task-form" action="/" method="post">
       <div class="input-group mb-3">
         <span class="input-group-text"><i class="fa fa-tag"></i></span>
-        <input name="name" type="text" class="form-control" placeholder="Enter task name...">
+        <select class="form-select" name = "priority">
+          <option value="1">Critical</option>
+          <option value="2">High</option>
+          <option value="3">Medium</option>
+          <option value="4">Low</option>
+          <option value="5">Minor</option>
+        </select>
+        <input name="name" type="text" class="form-control w-50" placeholder="Enter task name...">
+        <input type="date" name="date" class="form-control" >
         <button class="btn btn-outline-secondary" type="submit"><i class="fa fa-plus"></i></button>
       </div>
     </form>
 
     <ul id="tasks-container" class="list-group">
-      <li class="list-group-item d-flex gap-1 align-items-baseline">
+      <li class="list-group-item d-flex gap-1 align-items-baseline bg-danger bg-warning">
+        <img src="assets/img/icons/priority/critical.svg" class ="priority-icon" alt="1">
         <div class="me-auto">Task 1</div>
         <div class="d-flex gap-2">
+          <i class="fa fa-check text-success" role="button"></i>
           <i class="fa fa-trash-o text-danger" role="button"></i>
-          <i class="fa fa-edit text-success" role="button"></i>
         </div>
       </li>
       <li class="list-group-item">A second item</li>
@@ -47,7 +79,8 @@ <h2 class="fw-light mb-3">Task Manager</h2>
 
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
-  <script src="/assets/js/models/task-manager.js"></script>
-  <script src="/assets/js/main.js"></script>
+  <script src="assets/js/utils.js"></script>
+  <script src="assets/js/models/task-manager.js"></script>
+  <script src="assets/js/main.js"></script>
 </body>
 </html>