Today's To Do
- - -Clear all completed
- - Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| toDoList.js | -
-
- |
- 97.72% | -43/44 | -90.47% | -19/21 | -100% | -13/13 | -97.5% | -39/40 | -
| toDoListSupport.js | -
-
- |
- 44.44% | -20/45 | -0% | -0/2 | -56.25% | -9/16 | -41.86% | -18/43 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 | - - - -2x - - -78x - -2x -19x -19x -19x -39x - - - - - - - - -19x -17x -17x -17x -17x - - - -2x -21x - - -2x -9x -9x -9x - - -2x -6x -4x - -6x - -6x -6x -6x - - -2x -4x - - -4x - -4x - - -2x -6x -11x -11x - - - -2x -2x -3x -3x - -2x -2x - - - - | import ToDoListHelper from './toDoListSupport.js';
-
-class ToDoList {
- constructor() {
- this.tasks = JSON.parse(localStorage.getItem('datastore')) || [];
- }
-
- getTasks = () => this.tasks;
-
- showList = () => {
- const listContainer = document.querySelector('.to-do-list');
- listContainer.innerHTML = '';
- this.getTasks().forEach((todo) => {
- listContainer.innerHTML += `<li class='todo-item'>
- <input type='checkbox' class="checkbox" id=${todo.index} ${todo.completed ? 'checked' : ''}/>
- <input type='text' class='item-description ${todo.completed ? 'strike-line' : ''}' data-pos='${todo.index}'
- value='${todo.description}' disabled/>
- <span class='modify fa fa-ellipsis-v fa_custom'></span>
- <span class='trash-btn d-none fa fa-trash delete-button' data-index=${todo.index}></span>
- </li>`;
- });
-
- if (this.getTasks().length > 0) {
- ToDoListHelper.checkBoxEventHandler(this);
- ToDoListHelper.deleteButtonEventHandler(this);
- ToDoListHelper.editElipsisEventHandler(this);
- ToDoListHelper.editTextEventHandler();
- }
- }
-
- saveToStorage = () => {
- localStorage.setItem('datastore', JSON.stringify(this.getTasks()));
- }
-
- saveTaskInList = (description, completed = false) => {
- this.tasks.push({ description, completed, index: this.getTasks().length + 1 });
- this.saveToStorage();
- this.showList();
- }
-
- deleteTaskFromList = (clear = false, itemIndex = -1) => {
- if (clear) {
- this.tasks = this.getTasks().filter((task) => task.completed === false);
- }
- if (itemIndex > 0) this.tasks.splice(itemIndex - 1, 1);
-
- this.regenerateTaskIds();
- this.saveToStorage();
- this.showList();
- }
-
- updateTaskStatus = (updateIndex) => {
- Iif (this.tasks[updateIndex].completed) {
- this.tasks[updateIndex].completed = false;
- } else {
- this.tasks[updateIndex].completed = true;
- }
- this.saveToStorage();
- }
-
- regenerateTaskIds = () => {
- this.tasks = this.getTasks().map((task, index) => {
- task.index = index + 1;
- return task;
- });
- }
-
- editDescription = ({ id, data }) => {
- this.tasks = this.getTasks().map((task) => {
- if (task.index === id && data !== '') task.description = data;
- return task;
- });
- this.saveToStorage();
- this.showList();
- }
-}
-
-export default ToDoList; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 | -2x -17x -17x -39x - - - - - - - -2x -17x -17x -39x - - - - - -2x -17x - -39x - - - - - - -39x - - - - -2x - - - - - - - -2x -17x -17x - -17x -39x - - - - - - - - - - - - - - - - - - - | class ToDoListHelper {
- static checkBoxEventHandler = (toDoList) => {
- const checkBox = document.querySelectorAll('input[type=checkbox]');
- checkBox.forEach((item) => {
- item.addEventListener('change', (event) => {
- const task = event.target.parentNode.querySelector('.item-description');
- task.classList.toggle('strike-line');
- toDoList.updateTaskStatus(parseInt(event.target.id, 10) - 1);
- });
- });
- };
-
- static deleteButtonEventHandler = (toDoList) => {
- const deleteButtons = document.querySelectorAll('.delete-button');
- deleteButtons.forEach((item) => {
- item.addEventListener('click', (event) => {
- toDoList.deleteTaskFromList(false, parseInt(event.target.getAttribute('data-index'), 10));
- });
- });
- };
-
- static editElipsisEventHandler = (toDoList) => {
- const descriptions = document.querySelectorAll('.item-description');
-
- descriptions.forEach((e) => e.addEventListener('keypress', (event) => {
- if (event.key === 'Enter') {
- event.preventDefault();
- ToDoListHelper.editDescriptionHandler(event, toDoList);
- }
- }));
-
- descriptions.forEach((e) => e.addEventListener('change', (event) => {
- ToDoListHelper.editDescriptionHandler(event, toDoList);
- }));
- };
-
- static editDescriptionHandler = (event, toDoList) => {
- const id = parseInt(event.target.getAttribute('data-pos'), 10);
- const data = event.target.value;
- toDoList.editDescription({ id, data });
- event.target.disabled = true;
- event.target.parentNode.querySelector('.modify').classList.toggle('d-none');
- }
-
- static editTextEventHandler = () => {
- const modifyDescription = document.querySelectorAll('.modify');
- const descriptions = document.querySelectorAll('.item-description');
-
- modifyDescription.forEach((item) => {
- item.addEventListener('click', (event) => {
- descriptions.forEach((e) => {
- e.disabled = true;
- e.parentNode.classList.remove('highlight');
- e.parentNode.querySelector('.modify').classList.remove('d-none');
- e.parentNode.querySelector('.fa-trash').classList.add('d-none');
- });
- event.target.parentNode.classList.add('highlight');
- const itemDescription = event.target.parentNode.querySelector('.item-description');
- const deleteButton = event.target.parentNode.querySelector('.fa-trash');
- itemDescription.disabled = false;
- itemDescription.focus();
- event.target.classList.toggle('d-none');
- deleteButton.classList.toggle('d-none');
- });
- });
- }
-}
-
-export default ToDoListHelper; |