83 lines
2.2 KiB
JavaScript
83 lines
2.2 KiB
JavaScript
|
const todoField = document.getElementById("todoField");
|
||
|
|
const todoButton = document.getElementById("todoButton");
|
||
|
|
const todoSummary = document.getElementById("todoSummary");
|
||
|
|
const todoList = document.getElementById("todoList");
|
||
|
|
|
||
|
|
/**
|
||
|
|
* A task for the todolist
|
||
|
|
* @typedef {Object} Task
|
||
|
|
* @property {number} createdAt - Timestamp of the time that the task was created.
|
||
|
|
* @property {string} description - Description of the task.
|
||
|
|
* @property {boolean} isCompleted - Whether or not the task is completed.
|
||
|
|
*/
|
||
|
|
|
||
|
|
const tasks = [];
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Add task to both tasks and DOM
|
||
|
|
*/
|
||
|
|
addTask = () => {
|
||
|
|
tasks.push({
|
||
|
|
createdAt: Date.now(),
|
||
|
|
description: todoField.value,
|
||
|
|
completed: false
|
||
|
|
});
|
||
|
|
|
||
|
|
const taskElement = createTaskElement(tasks[tasks.length - 1]);
|
||
|
|
todoList.prepend(taskElement);
|
||
|
|
|
||
|
|
todoField.value = '';
|
||
|
|
|
||
|
|
updateSummary();
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Generate HTML element for a task
|
||
|
|
* @param {Task} task - The task to be converted into an html element
|
||
|
|
* @return {HTMLLIElement} The <li> element
|
||
|
|
*/
|
||
|
|
createTaskElement = (task) => {
|
||
|
|
const listItem = document.createElement('li');
|
||
|
|
|
||
|
|
const checkbox = document.createElement('input');
|
||
|
|
checkbox.type = 'checkbox';
|
||
|
|
checkbox.name = tasks.length - 1
|
||
|
|
checkbox.addEventListener('change', updateCheckbox);
|
||
|
|
listItem.appendChild(checkbox);
|
||
|
|
|
||
|
|
const description = document.createElement('span');
|
||
|
|
description.innerText = task.description;
|
||
|
|
listItem.appendChild(description);
|
||
|
|
|
||
|
|
return listItem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Function to react to change on a checkbox
|
||
|
|
* @param {Event} event - the event raised by the eventlistener
|
||
|
|
*/
|
||
|
|
updateCheckbox = (event) => {
|
||
|
|
const index = tasks.length - event.target.name - 1;
|
||
|
|
tasks[index].isCompleted = event.target.checked;
|
||
|
|
console.log(event);
|
||
|
|
|
||
|
|
const descriptionSpanClasses = todoList
|
||
|
|
.children[index]
|
||
|
|
.getElementsByTagName('span')[0]
|
||
|
|
.classList
|
||
|
|
|
||
|
|
if (event.target.checked) descriptionSpanClasses.add('strikethrough');
|
||
|
|
else descriptionSpanClasses.remove('strikethrough');
|
||
|
|
|
||
|
|
updateSummary();
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Update the summary span with new task values
|
||
|
|
*/
|
||
|
|
updateSummary = () => {
|
||
|
|
const tasksCompleted = tasks.filter(task => task.isCompleted).length;
|
||
|
|
todoSummary.innerText = `${tasksCompleted}/${tasks.length} completed.`;
|
||
|
|
}
|
||
|
|
|
||
|
|
todoButton.addEventListener('click', addTask);
|