94 lines
3.2 KiB
JavaScript
94 lines
3.2 KiB
JavaScript
const tasks = [
|
|
{
|
|
id: 1,
|
|
completed: false,
|
|
title: "Buy groceries for the week",
|
|
description: "Pick up vegetables, fruits, milk, eggs, and bread from the supermarket.",
|
|
dueDate: "14/03/2026",
|
|
dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
|
|
},
|
|
{
|
|
id: 2,
|
|
completed: false,
|
|
title: "Clean the apartment",
|
|
description: "Vacuum the floors, wipe kitchen surfaces, and take out the trash.",
|
|
dueDate: "16/03/2026",
|
|
dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
|
|
},
|
|
{
|
|
id: 3,
|
|
completed: false,
|
|
title: "Call the dentist for appointment",
|
|
description: "Book a routine checkup and confirm available time slots for next week.",
|
|
dueDate: "17/03/2026",
|
|
dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
|
|
},
|
|
{
|
|
id: 4,
|
|
completed: true,
|
|
title: "Do laundry and fold clothes",
|
|
description: "Wash dark and light loads separately, then fold and organize clean clothes.",
|
|
dueDate: "21/03/2026",
|
|
dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
|
|
}
|
|
];
|
|
|
|
// GLOBALS
|
|
|
|
const $taskForm = document.getElementById('taskForm');
|
|
const $toDoList = document.getElementById('toDoList');
|
|
const $completedList = document.getElementById('completedList');
|
|
|
|
// EVENT LISTENERS
|
|
window.addEventListener("DOMContentLoaded", () => {
|
|
displayTasks();
|
|
})
|
|
|
|
// DISPLAY TASKS
|
|
|
|
function displayTasks(){
|
|
|
|
function formatTask(task){
|
|
const li = document.createElement("li");
|
|
|
|
li.classList.add('card','p-3','mt-2');
|
|
const done = task.completed
|
|
? "text-decoration-line-through opacity-50"
|
|
: "";
|
|
li.innerHTML = `
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<h4 class="${done} col-11">${task.title}</h4>
|
|
<button data-id="${task.id}" type="button" class="btn-close delete" aria-label="Close"></button>
|
|
</div>
|
|
<p class="${done}">${task.description}</p>
|
|
<p class="${done}"><strong>Due: </strong>${task.dueDate}</p>
|
|
<div class="d-flex justify-content-between align-items-end">
|
|
<div>
|
|
${
|
|
task.completed
|
|
? `<button data-id="${task.id}" class="btn btn-primary shadow-sm notDone" type="button">Not done</button>`
|
|
: `
|
|
<button data-id="${task.id}" class="btn btn-primary shadow-sm edit" type="button">Edit</button>
|
|
<button data-id="${task.id}" class="btn btn-primary shadow-sm done" type="button">Done</button>
|
|
`
|
|
}
|
|
</div>
|
|
<p class="m-0 ${done}"><strong>Created on: </strong>${task.dateCreated}</p>
|
|
</div>
|
|
`;
|
|
|
|
return li;
|
|
|
|
}
|
|
|
|
$toDoList.innerHTML = "";
|
|
$completedList.innerHTML = "";
|
|
|
|
tasks.forEach(task => {
|
|
const formattedTask = formatTask(task);
|
|
task.completed
|
|
? $completedList.appendChild(formattedTask)
|
|
: $toDoList.appendChild(formattedTask)
|
|
})
|
|
}
|