DRY, KISS, and YAGNI rules.

[emiliazm]

• Clean code: There are some attributes that I am not using it. (id, classes)
  

  todoList/src/ui.js

  Lines 73 to 77 in 17c7503

  	<input id="ck-${task.id}" class="check-box" type="checkbox" name="checkBox">
  	<label class="lb-task" id="lb-${task.id}" for="ta-${task.id}">${task.description}</label>
  	<textarea id="ta-${task.id}" class="ta-task" name="edit-task">${task.description}</textarea>
  	<span class="dots material-symbols-outlined">more_vert</span>
  	<span class="trash material-symbols-outlined">delete</span>

• Create a variable for set local storage to use it over the code:
  

  todoList/src/methods.js

  Line 29 in 17c7503

  localStorage.setItem('tasks', JSON.stringify(tasks));

  
  

  todoList/src/methods.js

  Line 35 in 17c7503

  localStorage.setItem('tasks', JSON.stringify(tasks));

  
  

  todoList/src/methods.js

  Line 43 in 17c7503

  localStorage.setItem('tasks', JSON.stringify(tasks));

  
  

  todoList/src/methods.js

  Line 49 in 17c7503

  localStorage.setItem('tasks', JSON.stringify(tasks));

  
  

  todoList/src/methods.js

  Line 55 in 17c7503

  localStorage.setItem('tasks', JSON.stringify(tasks));

• DRY: (same const declare in several functions (like liElement, lblElement, taElement)
  

  todoList/src/ui.js

  Lines 7 to 64 in 17c7503

  	const uiClickLabel = (e) => {
  	const labelElement = e.target.parentNode;
  	labelElement.classList.add('editing', 'erasing');
  	const taElement = e.target.nextElementSibling;
  	taElement.focus();
  	};
  	const uiBlurTextArea = (e) => {
  	const lblElement = e.target.previousElementSibling;
  	lblElement.innerHTML = e.target.value;
  	const taElement = e.target.parentNode;
  	const { taskid } = e.target.parentNode.dataset;
  	setTimeout(() => {
  	taElement.classList.remove('editing', 'erasing');
  	}, 2000);
  	updateTask(taskid, e.target.value);
  	};
  	// remove item
  	const uiRemoveTask = (e) => {
  	const { taskid } = e.target.parentNode.dataset;
  	deleteTask(taskid);
  	const liElement = e.target.parentNode;
  	liElement.remove();
  	const lis = document.querySelectorAll('.list-items');
  	const tasks = getTasks();
  	lis.forEach((e) => {
  	e.dataset.taskindex = tasks.find((ee) => ee.id === Number(e.dataset.taskid)).index;
  	});
  	};
  	// status
  	const uiCheckStatus = (e) => {
  	const { taskid } = e.target.parentNode.dataset;
  	checkStatus(taskid);
  	const liElement = e.target.parentNode;
  	liElement.classList.toggle('completed', !liElement.classList.contains('completed'));
  	};
  	// Clear completed
  	const uiClearCompleted = () => {
  	const ulElement = document.querySelector('.check-list');
  	const liElements = ulElement.childNodes;
  	let i = 0;
  	while (i < liElements.length) {
  	const liElement = liElements[i];
  	const cbElement = liElement.querySelector('.check-box');
  	if (cbElement.checked) {
  	liElement.remove();
  	} else {
  	i += 1;
  	liElement.dataset.taskindex = i;
  	}
  	}
  	clearAllBtn();