exibe total de tarefas por categoria

zolppy · Feb 1, 2024 · 793b7a7 · 793b7a7
1 parent 779f5f8
commit 793b7a7
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -3,21 +3,17 @@
 Aplicação com interface intuitiva e agradável, construída a partir de boas práticas de desenvolvimento de software, que permite criação e gerenciamento de tarefas.
 
 ## O que tem ou pode realizar
-* Criar tarefas;
-* 
+* Criar tarefa;
+* Editar tarefa;
 * Marcar tarefa como concluída ou não concluída;
 * Remover tarefa;
 * Remover tarefas concluídas.
 
 ## Melhorias futuras
-* Pesquisar tarefas por meio das categorias "todas", "concluídas" e "em andamento".
 
 ## Principais conceitos ou tecnologias utilizados
 * HTML5;
 * CSS3;
 * JavaScript;
 
-## Principais conceitos ou tecnologias que podem vir a serem utilizados
-* React;
-* Typescript;
-* SCSS.
+## Principais conceitos ou tecnologias que podem vir a serem utilizados
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -95,12 +95,20 @@ button:active {
   background-color: blue;
 }
 
-#completed-tasks-total-container {
+#categories {
   border-bottom: 1px solid var(--black-low-opacity);
   border-top: 1px solid var(--black-low-opacity);
   margin: 1.5em auto;
   padding-bottom: .7em;
   padding-top: .7em;
+  display: flex;
+  justify-content: space-between;
+}
+
+.category {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 }
 
 #tasks-container {

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -39,7 +39,7 @@ const addTask = () => {
 
   tasksContainer.insertAdjacentHTML('afterbegin', newTask);
 
-  updateDisplayResults();
+  updateCategories();
 };
 
 const removeTask = (taskElement, mode = "no-queit") => {
@@ -55,8 +55,7 @@ const removeTask = (taskElement, mode = "no-queit") => {
       taskElement.remove();
 
       checkCompletedTasks();
-      updateDisplayResults();
-      reloadPageIfNoTasks();
+      updateCategories();
     }
   } else {
     const index = Array.from(tasksContainer.children).indexOf(taskElement);
@@ -69,8 +68,7 @@ const removeTask = (taskElement, mode = "no-queit") => {
     taskElement.remove();
 
     checkCompletedTasks();
-    updateDisplayResults();
-    reloadPageIfNoTasks();
+    updateCategories();
   }
 };
 
@@ -81,23 +79,17 @@ const checkCompletedTasks = () => {
   removeCompleteTasksButtonContainer.classList.toggle('hidden', doneTaskElements.length === 0);
 };
 
-const updateDisplayResults = () => {
-  const tasksTotal = document.querySelectorAll('.task').length;
-
-  if (tasksTotal > 0) {
-    const resultsContainer = document.querySelector('#completed-tasks-total-container');
-    const resultElement = document.querySelector('#completed-tasks-total');
-    const tasksDone = document.querySelectorAll('.done').length;
-
-    resultElement.textContent = `Completas: ${tasksDone}/${tasksTotal}`;
-    resultsContainer.classList.remove('hidden');
-  }
-};
-
-const reloadPageIfNoTasks = () => {
-  if (tasksContainer.children.length === 0) {
-    location.reload();
-  }
+const updateCategories = () => {
+  let allTotal = document.querySelectorAll(".task").length;
+  let doneTotal = document.querySelectorAll(".done").length;
+  let inProgressTotal = allTotal - doneTotal;
+  const allEl = document.querySelector("#all-total");
+  const doneEl = document.querySelector("#done-total");
+  const inProgressEl = document.querySelector("#in-progress-total");
+
+  allEl.textContent = allTotal;
+  doneEl.textContent = doneTotal;
+  inProgressEl.textContent = inProgressTotal;
 };
 
 const completeTask = (taskElement) => {
@@ -110,7 +102,7 @@ const completeTask = (taskElement) => {
 
   taskElement.classList.toggle('done');
   checkCompletedTasks();
-  updateDisplayResults();
+  updateCategories();
 };
 
 const editTask = (taskElement) => {
@@ -160,7 +152,7 @@ window.addEventListener('load', () => {
     }
 
     checkCompletedTasks();
-    updateDisplayResults();
+    updateCategories();
   }
 });
 
@@ -173,8 +165,7 @@ removeCompleteTasksButton.addEventListener('click', () => {
     });
 
     checkCompletedTasks();
-    updateDisplayResults();
-    reloadPageIfNoTasks();
+    updateCategories();
   }
 });
 

diff --git a/index.html b/index.html
@@ -32,12 +32,21 @@ <h2 id="secondary-title">Informe tarefas abaixo</h2>
           <i class="bi bi-plus-lg"></i>
         </button>
       </div>
-      <div id="completed-tasks-total-container" class="hidden">
-        <span id="completed-tasks-total"></span>
-      </div>
-      <div id="tasks-container">
-        <!-- Tarefas aqui -->
+      <div id="categories">
+        <div id="all-container" class="category">
+          Todas
+          <span id="all-total">0</span>
+        </div>
+        <div id="done-container" class="category">
+          Concluídas
+          <span id="done-total">0</span>
+        </div>
+        <div id="in-progress-container" class="category">
+          Em progresso
+          <span id="in-progress-total">0</span>
+        </div>
       </div>
+      <div id="tasks-container"></div>
       <div id="remove-complete-tasks-button-container" class="hidden">
         <button id="remove-complete-tasks-button" type="button">
           <span>Remover tarefas concluídas</span>