June 3rd 2019
Spent the first half of the day going through 3/4 of chapter two of ‘Build your own AngularJS.’ Getting used to looking at fairly complex code and running a lot of functions in the jasmine debugger to see what exactly is going on behind the scenes.
Again, this isn’t to learn angular or any library in particular, but to get comfortable reading, writing, and understanding complex code.
Second half
I FINALLY finished and figured out my nested todos app exercise from the Watch and Code premium course. It wasnt that it was extremely complex, just figuring out which direction to take to get the job done was tough. I eventually went with a recursive reduce function to “render” the html of the todo list with its nested todos to the page.
I am super proud of myself for being able to figure this one out!
Heres how it looks:
And here is some of the code:
function render(todos) {
if (todos.length == 0) {
$("#todos").html('');
todoInput.value = '';
return;
}
$("#todos").html(todoParser(todos));
todoInput.value = '';
}
function todoParser(arr) {
return arr.reduce(function(accumulator,currentValue,idx) {
//add the current element to the accumulator html as the first LI tag
//accumulator += `<li>${currentValue.title}</li>`;
accumulator += todoCreator(currentValue);
//check if the current element has subTodos
if (currentValue.subTodos.length) {
//if it does, recurse through the subTodo array
accumulator += todoParser(currentValue.subTodos);
//once thats done, check if this is the last element of its array
//if it is, add a closing UL tag to end the section
if (idx == arr.length - 1) {
accumulator += `</ul>`;
return accumulator;
} else {
return accumulator;
}
} //if current element does NOT have subTodos, just check if its the last element
//and add a closing UL tag, if not, return the accumulator
else {
if (idx == arr.length - 1) {
accumulator += `</ul>`;
return accumulator;
} else {
return accumulator;
}
}
}, '<ul>')
}
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-todo</button>` +
`</li>`
)
}