crgc/microverse-todo-list

microverse-todo-list's Issues

Self-assessment: DRY, KISS, and YAGNI

No violations found. Code is DRY, simple as possible but not 'simpler', and not over-engineered.

Self-assessment: JS best practices

> Simplicity

microverse-todo-list/src/index.js

Lines 63 to 123 in d2065f9

	function buildTaskRightElement(task) {
	const taskRightElement = createDivWithClass('todo-list-task-right');
	const editElement = createElementWithClass('i', 'fa fa-ellipsis-v');
	editElement.setAttribute('id', `edit-task-${task.index}`);
	editElement.setAttribute('aria-hidden', 'true');
	editElement.addEventListener('click', (e) => {
	const targetElement = e.target;
	const { parentElement } = targetElement;
	const taskElement = parentElement.parentElement;
	const taskIndex = targetElement.id.substring('edit-task-'.length);
	const deleteElement = document.getElementById(`delete-task-${taskIndex}`);
	taskElement.classList.add('editable');
	targetElement.classList.add('hidden');
	deleteElement.classList.remove('hidden');
	const tasks = loadTasks();
	const editableTask = tasks.filter((task) => task.index === parseInt(taskIndex, 10))[0];
	const taskDescriptionInputElement = createElement('input');
	taskDescriptionInputElement.setAttribute('type', 'text');
	taskDescriptionInputElement.setAttribute('class', 'editable');
	taskDescriptionInputElement.setAttribute('value', editableTask.description);
	taskDescriptionInputElement.id = `task-description-${taskIndex}`;
	const taskDescriptionElement = document.getElementById(`todo-list-task-description-${taskIndex}`);
	const taskLeftElement = taskDescriptionElement.parentElement;
	/* Remove description and add new input */
	taskLeftElement.removeChild(taskDescriptionElement);
	taskLeftElement.appendChild(taskDescriptionInputElement);
	});
	const deleteElement = createElementWithClass('i', 'fa fa-trash hidden');
	deleteElement.setAttribute('id', `delete-task-${task.index}`);
	deleteElement.setAttribute('aria-hidden', 'true');
	deleteElement.addEventListener('click', (e) => {
	const taskIndex = e.target.id.substring('delete-task-'.length);
	let tasks = loadTasks();
	tasks = tasks.filter((task) => task.index !== parseInt(taskIndex, 10));
	let shiftedTasks = [];
	for (let i = 0; i < tasks.length; i += 1) {
	const task = tasks[i];
	shiftedTasks = shiftedTasks.concat({
	description: task.description,
	completed: task.completed,
	index: i + 1,
	});
	}
	saveTasks(shiftedTasks);
	displayTasks(); /* eslint-disable-line */
	});
	taskRightElement.appendChild(editElement);
	taskRightElement.appendChild(deleteElement);
	return taskRightElement;
	}

This function could definitely be broken down into smaller functions.

Self-assessment: HTML and CSS best practices

No violations found:

• HTML has proper use of semantic tags (there's a main tag)
• !important is used only once
• All element names and attributes are in lowercase
• Attribute values (including the ones generated by JS) are quoted