May 30th 2019
Spent a couple hours working back on the nested todos exercise for the Watch and Code premium users. I was excited to FIX the issue where my nested todos were rendering BEFORE their parent element.
A couple issues still exist however:
-
I cannot nest a subTodo on an already nested todo:
I think the issue here is that I have a ‘findTodo’ function that runs when the addSubTodo button is clicked. I am having an issue translating the ID of the todo that is clicked, to the push method targeting the correct subTodo.
-
I cannot toggle a nested todo
I believe the issue here is similar to the above.
Here is the code I used to fix the ordering problem:
function render(todos) {
if (todos.length == 0) {
$("#todos").html('');
todoInput.value = '';
return;
}
$("#todos").html(todosParser(todos));
todoInput.value = '';
}
function todosParser(todos) {
let html = '';
if (todos.length >= 1) {
// recursively builds html to append to #todos UL
for (let a = 0; a < todos.length; a++) {
let todo = todos[a];
if (!todo.subTodos.length > 0) html += todosParser(todo);
// builds up the inner arrays if subTodo exists
if (todo.subTodos.length > 0) {
html += todoCreator(todo);
for (let b = 0; b < todo.subTodos.length; b++) {
let subTodo = todo.subTodos[b];
// if this is the beginning of a subTodo array, add <ul> to the front
if (b == 0) {
html += '<ul>'
}
// if this is the end of a subTodo array, add </ul> to the back
if (b == todo.subTodos.length - 1) {
html += todosParser(subTodo) + '</ul>'
}
// this this isnt the beg or end, return an <li> from todoparser
else {
html += todosParser(subTodo)
}
}
}
}
}
else {
html += todoCreator(todos)
}
return html;
}
function todoCreator(todo) {
let completed = todo.completed ? "class='todo completed'" : "class='todo'"
let completeTodoButton = `<button id="complete-todo">`;
if (todo.completed) {
completeTodoButton += `(*)</button>`
// only inserts button IF subTodos are all complete or non-existant
} else if (todo.subTodos.filter(e=>e.completed).length === todo.subTodos.length) {
completeTodoButton += `()</button>`
} else {
completeTodoButton = '';
}
return (
`<li id="${todo.id}" ${completed}>` +
`${completeTodoButton} ${todo.title}` +
`<button id="delete-todo-btn">remove</button>` +
`<button id="add-sub-todos-btn">add sub-todos</button>` +
`</li>`
)
}