Skip to content
Snippets Groups Projects
Commit caa0834c authored by Jesus Galaz's avatar Jesus Galaz
Browse files

Adding show completed tasks button an hide completed task by default

parent a20e3d3f
No related branches found
No related tags found
1 merge request!6Adding toDo app functionability
Pipeline #15714 passed
......@@ -26,16 +26,29 @@ h1 {
margin: 0;
}
#logout-btn {
background-color: transparent;
background-color: rgb(170, 17, 17);
border: 1px solid #333;
color: #333;
color: white;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
#logout-btn:hover {
background-color: #333;
background-color: #852828;
color: #fff;
}
#toggle-completed-btn{
background-color: rgb(42, 50, 170);
border: 1px solid #333;
color: white;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
#toggle-completed-btn:hover{
background-color: #1c277e;
color: #fff;
}
#new-task-form {
......
......@@ -12,6 +12,7 @@
<header>
<h1>ToDo List</h1>
<button id="logout-btn">Logout</button>
<button id="toggle-completed-btn">Show Completed Tasks</button>
</header>
<main>
......
......@@ -3,6 +3,9 @@ document.addEventListener('DOMContentLoaded', async () => {
const input = form.querySelector('input[name="task"]');
const taskList = document.getElementById("task-list");
const logoutBtn = document.getElementById('logout-btn');
const toggleCompletedBtn = document.getElementById('toggle-completed-btn');
let showCompletedTasks = false;
// Load the tasks when page is initiated
async function loadTasks() {
......@@ -10,11 +13,11 @@ document.addEventListener('DOMContentLoaded', async () => {
const res = await fetch("/api/todos");
const todos = await res.json();
// Verificar if the response has tasks
// Verify if the response has tasks
if (todos.length > 0) {
renderTasks(todos);
} else {
console.log('No hay tareas para mostrar.');
console.log('No tasks to show.');
}
} catch (err) {
console.error("Error loading tasks:", err);
......@@ -28,6 +31,8 @@ document.addEventListener('DOMContentLoaded', async () => {
const taskItem = createTaskElement(todo);
taskList.appendChild(taskItem);
});
toggleCompletedVisibility();
}
// Function to create an element in DOM
......@@ -36,6 +41,7 @@ document.addEventListener('DOMContentLoaded', async () => {
li.dataset.id = todo._id;
if (todo.isDone) {
li.classList.add('completed');
li.style.display = 'none';
}
li.innerHTML = `
......@@ -54,6 +60,7 @@ document.addEventListener('DOMContentLoaded', async () => {
completeBtn.addEventListener("click", async () => {
await toggleComplete(todo._id, !todo.isDone);
li.classList.toggle("completed");
toggleCompletedVisibility();
});
const deleteBtn = li.querySelector(".delete-btn");
......@@ -90,6 +97,25 @@ document.addEventListener('DOMContentLoaded', async () => {
return li;
}
// Function to toggle completed task visibility
function toggleCompletedVisibility() {
const completedTasks = document.querySelectorAll('.completed');
completedTasks.forEach(task => {
if (showCompletedTasks) {
task.style.display = 'block';
} else {
task.style.display = 'none';
}
});
}
// Toggle button event listener
toggleCompletedBtn.addEventListener('click', () => {
showCompletedTasks = !showCompletedTasks;
toggleCompletedVisibility();
toggleCompletedBtn.textContent = showCompletedTasks ? 'Hide Completed Tasks' : 'Show Completed Tasks';
});
// Function to alternate to the completed state
async function toggleComplete(taskId, isDone) {
try {
......@@ -99,10 +125,10 @@ document.addEventListener('DOMContentLoaded', async () => {
body: JSON.stringify({ isDone })
});
if (!res.ok) {
console.error('Error marcando la tarea como completada.');
console.error('Error marking task as complete.');
}
} catch (err) {
console.error('Error actualizando la tarea:', err);
console.error('Error updating task:', err);
}
}
......@@ -113,10 +139,10 @@ document.addEventListener('DOMContentLoaded', async () => {
method: 'DELETE'
});
if (!res.ok) {
console.error('Error eliminando la tarea.');
console.error('Error deleting task.');
}
} catch (err) {
console.error('Error eliminando la tarea:', err);
console.error('Error deleting task:', err);
}
}
......@@ -129,10 +155,10 @@ document.addEventListener('DOMContentLoaded', async () => {
body: JSON.stringify({ description: newDescription })
});
if (!res.ok) {
console.error('Error actualizando la tarea.');
console.error('Error updating task.');
}
} catch (err) {
console.error('Error actualizando la tarea:', err);
console.error('Error updating task:', err);
}
}
......@@ -161,10 +187,10 @@ document.addEventListener('DOMContentLoaded', async () => {
const newTodo = await res.json();
taskList.appendChild(createTaskElement(newTodo));
} else {
console.error('Error añadiendo tarea.');
console.error('Error adding task.');
}
} catch (err) {
console.error('Error añadiendo tarea:', err);
console.error('Error adding task:', err);
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment