From 2fe426d83994fb2be10be85d11e9317ee9634f32 Mon Sep 17 00:00:00 2001 From: Matthew Epler Date: Wed, 1 Mar 2017 08:59:11 -0500 Subject: [PATCH 1/2] adds simple todo list for review via PR --- src/index.js | 34 ++++++++++++++++++++++++++++++---- static/index.html | 9 +++++---- static/styles.css | 7 +++++++ 3 files changed, 42 insertions(+), 8 deletions(-) create mode 100644 static/styles.css diff --git a/src/index.js b/src/index.js index 341b624..aad9796 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,32 @@ -/** -* Put your JavaScript here -*/ +let state = { + todos: [ + { title: 'First todo', complete: false }, + { title: 'Second todo', complete: true }, + { title: 'Third todo', complete: true }, + ], +}; + +document.onload = init(); + +function init() { + const listNode = document.getElementById('list'); + + const filterButton = document.getElementById('filter-button') + filterButton.addEventListener('click', (event) => { + const items = document.querySelectorAll('#list li.todo--complete'); + items.forEach( item => item.classList.toggle('hide') ); + }) + + state.todos.forEach( item => addTodoNode(item) ) + + function addTodoNode ({title, complete}) { + let item = document.createElement('li'); + item.textContent = title; + if (complete === true) item.classList.add('todo--complete'); + item.addEventListener('click', event => event.target.classList.toggle('todo--complete') ); + listNode.appendChild(item); + }; +} + -console.log( 'Open the dev console to see me. :-)' ); diff --git a/static/index.html b/static/index.html index 336731e..3e6f8dc 100644 --- a/static/index.html +++ b/static/index.html @@ -2,13 +2,14 @@ - + Todo App -

Welcome!

- - + + + + diff --git a/static/styles.css b/static/styles.css new file mode 100644 index 0000000..fe45251 --- /dev/null +++ b/static/styles.css @@ -0,0 +1,7 @@ +.todo--complete { + text-decoration: line-through; +} + +.hide { + display: none; +} \ No newline at end of file From 71b1234b752ba54ab9270e4fceeed1255a743833 Mon Sep 17 00:00:00 2001 From: Matthew Epler Date: Wed, 1 Mar 2017 21:29:52 -0500 Subject: [PATCH 2/2] creates seperation of concerns for data and GUI functions --- src/index.js | 79 ++++++++++++++++++++++++++++++++++++++--------- static/index.html | 8 ++++- 2 files changed, 71 insertions(+), 16 deletions(-) diff --git a/src/index.js b/src/index.js index aad9796..c8e5886 100644 --- a/src/index.js +++ b/src/index.js @@ -4,29 +4,78 @@ let state = { { title: 'Second todo', complete: true }, { title: 'Third todo', complete: true }, ], + filtered: false }; -document.onload = init(); +if (document.readyState !== 'loading') { + init(); +} else { + document.addEventListener( 'DOMContentLoaded', init() ); +} function init() { const listNode = document.getElementById('list'); + const inputForm = document.getElementById('input-form'); + const inputBox = document.getElementById('input-box'); + const submitButton = document.getElementById('submit-button'); + + inputForm.addEventListener( 'submit', (event) => { + event.preventDefault(); + createNewTodo(inputBox.value); + }) - const filterButton = document.getElementById('filter-button') + const filterButton = document.getElementById('filter-button'); filterButton.addEventListener('click', (event) => { - const items = document.querySelectorAll('#list li.todo--complete'); - items.forEach( item => item.classList.toggle('hide') ); - }) - - state.todos.forEach( item => addTodoNode(item) ) - - function addTodoNode ({title, complete}) { - let item = document.createElement('li'); - item.textContent = title; - if (complete === true) item.classList.add('todo--complete'); - item.addEventListener('click', event => event.target.classList.toggle('todo--complete') ); - listNode.appendChild(item); - }; + state.filtered = !state.filtered; + state.filtered ? + this.textContent = "Show Completed" : + this.textContent = "Hide Completed"; + const items = document.querySelectorAll('#list li.todo--complete'); + items.forEach( item => item.classList.toggle('hide') ); + }) + + function createNewTodo ( title ) { + state.todos.push({ + title, + complete: false + }) + renderTheUi( state.todos ); + } + + function renderTheUi ( todos ) { + clearList(); + todos.forEach( item => createNewNode( item ) ); + } + + function clearList () { + while (listNode.firstChild) { + listNode.removeChild(listNode.firstChild); + } + } + + function createNewNode ( todo ) { + const newTodo = document.createElement( 'li' ); + newTodo.textContent = todo.title; + if (todo.complete === true) newTodo.classList.add('todo--complete'); + newTodo.addEventListener( 'click', event => { + changeCompleteValue(event.target) + }) + listNode.appendChild(newTodo); + } + + function changeCompleteValue ( node ) { + state.todos.forEach( (element, index, array) => { + if ( element.title === node.textContent ) { + array[index].complete = !array[index].complete; + } + }) + renderTheUi( state.todos ); + } + + renderTheUi( state.todos ); } + + diff --git a/static/index.html b/static/index.html index 3e6f8dc..c113e1b 100644 --- a/static/index.html +++ b/static/index.html @@ -7,7 +7,13 @@ - +
+ + + +
+ +