frontend-1

diff --git a/css/tasks.css b/css/tasks.css
index 8944165cd221398f23dcd85a1508ad1e6e5a001b..4819d3091e8e5dbe5a11200d95443273089a23cf 100644
--- a/css/tasks.css
+++ b/css/tasks.css
@@ -23,3 +23,16 @@ input:valid, textarea:valid, select:valid {
   border-color: green;
 }
 
+.task-filters {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.task-filters select {
+  margin-left: 5px;
+}
+
+#task-summary {
+  margin: 1rem 0px;
+}




diff --git a/js/tasks.js b/js/tasks.js
index eb6db368d62797fb73d7c9233740a67f973298e9..727535098bedc97158250ef05f7fb6ff695f747b 100644
--- a/js/tasks.js
+++ b/js/tasks.js
@@ -1,6 +1,8 @@
 document.addEventListener("DOMContentLoaded", () => {
   const taskForm = document.getElementById("task-form");
   const taskList = document.querySelector("#task-list ul");
+  const priorityFilter = document.getElementById("priority-filter");
+  const taskSummary = document.getElementById("task-summary");
 
   const toggleErrorMessage = (field, condition, message) => {
     const errorMessage = field.nextElementSibling; // Mensagem de erro associada ao campo
@@ -53,19 +55,103 @@
     return errors.length === 0;
   };
 
-  const addTaskToList = (task) => {
-    const taskItem = document.createElement("li");
-    taskItem.innerHTML = `
-      <strong>${task.title}</strong>
-      <p>${task.description}</p>
-      <p>Prazo: ${task.deadline}</p>
-      <p>Prioridade: ${task.priority}</p>
-      <button class="remove-task">Remover</button>
+  // Tasks stuff
+  // TODO: Move this shit into somewhere else?
+
+  const loadTasks = () => {
+    const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
+
+    renderTasks(tasks);
+    updateTaskSummary(tasks);
+  };
+
+  const saveTasks = (tasks) => {
+    localStorage.setItem("tasks", JSON.stringify(tasks));
+
+    updateTaskSummary(tasks);
+  };
+
+  const updateTaskSummary = (tasks) => {
+    const summary = tasks.reduce((acc, task) => {
+      acc[task.priority] = (acc[task.priority] || 0) + 1;
+
+      return acc;
+    }, {});
+
+    taskSummary.innerHTML = `
+      <p>Prioridade Alta: ${summary["alta"] || 0}</p>
+      <p>Prioridade Média: ${summary["media"] || 0}</p>
+      <p>Prioridade Baixa: ${summary["baixa"] || 0}</p>
     `;
+  };
 
-    taskList.appendChild(taskItem);
+  const renderTasks = (tasks) => {
+    taskList.innerHTML = "";
+
+    tasks.map((task) => {
+      const taskItem = document.createElement("li");
+      taskItem.innerHTML = `
+        <strong>${task.title}</strong>
+        <p>${task.description}</p>
+        <p>Prazo: ${task.deadline}</p>
+        <p>Prioridade: ${task.priority}</p>
+        <button class="remove-task">Remover</button>
+      `;
+      taskList.appendChild(taskItem);
+    });
+  };
+
+  const addTask = (task) => {
+    const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
+    tasks.push(task);
+
+    saveTasks(tasks);
+    renderTasks(tasks);
   };
 
+  const removeTask = (index) => {
+    const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
+    tasks.splice(index, 1);
+
+    saveTasks(tasks);
+    renderTasks(tasks);
+    updateTaskSummary(tasks);
+  };
+
+  const filterTasksByPriority = (priority) => {
+    const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
+    const filteredTasks = priority === "Todas" ? tasks : tasks.filter((task) => task.priority === priority);
+
+    renderTasks(filteredTasks);
+  };
+
+  taskForm.addEventListener("submit", (e) => {
+    e.preventDefault();
+
+    if (validateForm()) {
+      const task = {
+        title: document.getElementById("task-title").value.trim(),
+        description: document.getElementById("task-desc").value.trim(),
+        deadline: document.getElementById("task-deadline").value,
+        priority: document.getElementById("task-priority").value,
+      };
+
+      addTask(task);
+      taskForm.reset();
+    }
+  });
+
+  taskList.addEventListener("click", (e) => {
+    if (e.target.classList.contains("remove-task")) {
+      const index = Array.from(taskList.children).indexOf(e.target.parentElement);
+      removeTask(index);
+    }
+  });
+
+  priorityFilter.addEventListener("change", (e) => {
+    filterTasksByPriority(e.target.value);
+  });
+
   const resetForm = () => {
     taskForm.reset();
   };
@@ -89,26 +175,6 @@         break;
     }
   });
 
-  taskForm.addEventListener("submit", (e) => {
-    e.preventDefault();
-
-    if (validateForm()) {
-      const task = {
-        title: document.getElementById("task-title").value.trim(),
-        description: document.getElementById("task-desc").value.trim(),
-        deadline: document.getElementById("task-deadline").value,
-        priority: document.getElementById("task-priority").value,
-      };
-
-      addTaskToList(task);
-      resetForm();
-    }
-  });
-
-  taskList.addEventListener("click", (e) => {
-    if (e.target.classList.contains("remove-task")) {
-      e.target.parentElement.remove();
-    }
-  });
+  loadTasks();
 });
 




diff --git a/tasks.html b/tasks.html
index e9f07959915b3933eb9675486b7927b9c9913839..2acbd1ea9619216265e7f1aa4a445bcc439dbefe 100644
--- a/tasks.html
+++ b/tasks.html
@@ -44,7 +44,7 @@
         <label for="task-priority">Prioridade:</label>
         <select id="task-priority" name="priority" required>
           <option value="alta">Alta</option>
-          <option value="média">Média</option>
+          <option value="media">Média</option>
           <option value="baixa">Baixa</option>
         </select>
         <small class="error-message hidden">Por favor, selecione uma prioridade.</small>
@@ -57,6 +57,20 @@     
 
     <section id="task-list">
       <h2>Lista de Tarefas</h2>
+      <div class="task-filters">
+        <label for="priority-filter">Filtrar por Prioridade:</label>
+        <select id="priority-filter">
+          <option value="Todas">Todas</option>
+          <option value="alta">Alta</option>
+          <option value="media">Média</option>
+          <option value="baixa">Baixa</option>
+        </select>
+      </div>
+
+      <div id="task-summary">
+        Nenhuma tarefa adicionada
+      </div>
+
       <ul></ul>
     </section>
   </main>