From 8f266c02165856934732a93d3190150aac51e6a5 Mon Sep 17 00:00:00 2001 From: Mike Hicks Date: Thu, 20 Apr 2017 19:23:02 -0400 Subject: [PATCH 1/2] Rewrote code to implement state using a uuid lib for task ids. Separated state from UI. --- package.json | 3 +- src/index.js | 91 ++++++++++++++++++++++++++++++-------------- static/css/index.css | 3 ++ static/index.html | 36 +++++++----------- 4 files changed, 80 insertions(+), 53 deletions(-) create mode 100644 static/css/index.css diff --git a/package.json b/package.json index b9383bc..c4857af 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,8 @@ "license": "MIT", "dependencies": { "babel-preset-es2015": "^6.13.2", - "babel-preset-stage-0": "^6.5.0" + "babel-preset-stage-0": "^6.5.0", + "uuid": "^3.0.1" }, "devDependencies": { "babel-loader": "^6.2.10", diff --git a/src/index.js b/src/index.js index 30e1a0f..d4c3d0d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,35 +1,68 @@ -function onReady () { - const addTodoForm = document.getElementById( 'addTodoForm' ); - const todoList = document.getElementById( 'todoList' ); - const newTodoText = document.getElementById( 'newTodoText' ); - - // - todoList.textContent = ''; - - addTodoForm.addEventListener( 'submit', event => { - event.preventDefault(); - const title = newTodoText.value; - - // add it to the list - // create an li - //
  • {title}
    • - const newLi = document.createElement( 'li' ); - newLi.textContent = title; // vs newLi.innerHTML - - newLi.addEventListener( 'click', () => { - newLi.classList.toggle( 'todo--complete' ); - }); +const uuidV1 = require('uuid/v1'); + +let state = { + todos: {} +}; - // put it in the ul - todoList.appendChild( newLi ); +let todoList; +let todoForm; +let todoText; +let showState; - newTodoText.value = ''; - }); +if(document.readyState!=='loading'){ + onReady(); +}else{ + document.addEventListener('DOMContentLoaded',onReady); } -if ( document.readyState !== 'loading' ) { - onReady(); -} else { - document.addEventListener( 'DOMContentLoaded', onReady ); +function onReady(){ + todoList = document.getElementById('todolist'); + todoForm=document.getElementById('todoform'); + todoText=document.getElementById('todotext'); + showState=document.getElementById('showstate'); + + AddEvents(); + MakeTodoList(state); } +function AddEvents(){ + showState.addEventListener('click',event=>{ + alert(JSON.stringify(state)); + }); + + todoForm.addEventListener('submit',event=>{ + event.preventDefault(); + let taskId=uuidV1(); + let todo={ + id:taskId, + title:todoText.value, + complete:false + }; + state.todos[taskId]=todo; + AddItem(todo); + todoText.value=''; + }); +} + +function MakeTodoList(state){ + let taskIds=Object.keys(state.todos); + taskIds.forEach(task=>{ + AddItem(state.todos[task]); + }); +} + +function AddItem(task){ + let linode = document.createElement("li"); + linode.textContent=`${task.title}`; + linode.setAttribute('id',task.id); + if(task.complete){linode.setAttribute('class','todo--complete')} + linode.addEventListener('click',()=>{ + linode.classList.toggle('todo--complete'); + if(state.todos[task.id].complete==false){ + state.todos[task.id].complete=true; + }else{ + state.todos[task.id].complete=false; + } + }); + todoList.appendChild(linode); +} diff --git a/static/css/index.css b/static/css/index.css new file mode 100644 index 0000000..bbd0eed --- /dev/null +++ b/static/css/index.css @@ -0,0 +1,3 @@ +.todo--complete{ + text-decoration:line-through; +} \ No newline at end of file diff --git a/static/index.html b/static/index.html index 425855a..9d60a85 100644 --- a/static/index.html +++ b/static/index.html @@ -2,33 +2,23 @@ - + Todo App - -

    The Todo App!

    - -
    - - - -
    - - - - +
    +
    + +
    +
    + +
    + +
    +
    + +
    From ae847639913c39b15288b8f4369c6cb9aaa9c0d4 Mon Sep 17 00:00:00 2001 From: Mike Hicks Date: Thu, 20 Apr 2017 20:43:12 -0400 Subject: [PATCH 2/2] Made all tests work --- src/Todo.js | 55 ++++++++++++++++++++++++++++++++++++++++++++++++ src/index.js | 20 ++++++------------ src/spec.js | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 120 insertions(+), 14 deletions(-) create mode 100644 src/Todo.js diff --git a/src/Todo.js b/src/Todo.js new file mode 100644 index 0000000..d7359ac --- /dev/null +++ b/src/Todo.js @@ -0,0 +1,55 @@ +'use strict'; + +module.exports = class Todo { + constructor ( todo ) { + if(typeof(todo)=='string'){ + this.title = todo; + this.complete=false; + let myId=this.getTitle(); + myId=myId.toLowerCase(); + myId=myId.replace(/\s/g,'-'); + this.setId(myId); + + }else{ + this.title = todo.title; + if(todo.hasOwnProperty("complete")){ + this.complete=todo.complete; + }else{ + this.complete=false; + } + if(todo.hasOwnProperty("id")){ + this.id=todo.id; + }else{ + let myId=this.getTitle(); + myId=myId.toLowerCase(); + myId=myId.replace(/\s/g,'-'); + this.setId(myId); + } + } + } + + getTitle () { + return this.title; + } + setTitle(title){ + this.title=title; + return this.title; + } + setId(id){ + this.id=id; + return this.id; + } + getId () { + return this.id; + } + isComplete(){ + return this.complete; + } + toggleComplete(){ + if(this.isComplete()){ + this.complete=false; + }else{ + this.complete=true; + } + } +}; \ No newline at end of file diff --git a/src/index.js b/src/index.js index d4c3d0d..a4f6910 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -const uuidV1 = require('uuid/v1'); +let Todo = require('./Todo.js'); let state = { todos: {} @@ -32,13 +32,8 @@ function AddEvents(){ todoForm.addEventListener('submit',event=>{ event.preventDefault(); - let taskId=uuidV1(); - let todo={ - id:taskId, - title:todoText.value, - complete:false - }; - state.todos[taskId]=todo; + let todo=new Todo({title:todoText.value}); + state.todos[todo.getId()]=todo; AddItem(todo); todoText.value=''; }); @@ -54,15 +49,12 @@ function MakeTodoList(state){ function AddItem(task){ let linode = document.createElement("li"); linode.textContent=`${task.title}`; - linode.setAttribute('id',task.id); + linode.setAttribute('id',task.getId()); if(task.complete){linode.setAttribute('class','todo--complete')} linode.addEventListener('click',()=>{ linode.classList.toggle('todo--complete'); - if(state.todos[task.id].complete==false){ - state.todos[task.id].complete=true; - }else{ - state.todos[task.id].complete=false; - } + state.todos[task.getId()].toggleComplete(); + }); todoList.appendChild(linode); } diff --git a/src/spec.js b/src/spec.js index e69de29..18c259a 100644 --- a/src/spec.js +++ b/src/spec.js @@ -0,0 +1,59 @@ + +import test from 'tape'; +import Todo from './Todo'; + +test( 'Todo', t => { + let actual, expected, todo; + let testTodo = { + id: 'test', + title: 'Test', + complete: true, + }; + + todo = new Todo( testTodo ); // use new if using a constructor + + actual = todo.getId(); + expected = testTodo.id; + t.equal( actual, expected, 'with object, should store the id' ); + + actual = todo.getTitle(); + expected = testTodo.title; + t.equal( actual, expected, 'with object, should store the title' ); + + actual = todo.isComplete(); + expected = testTodo.complete; + t.equal( actual, expected, 'with object, should store the completion' ); + + todo = new Todo( 'Test' ); // use new if using a constructor + + actual = typeof todo.getId(); + expected = 'string'; + t.equal( actual, expected, 'with title, should generate an id' ); + + actual = todo.getTitle(); + expected = 'Test'; + t.equal( actual, expected, 'with title, should store the title' ); + + actual = todo.isComplete(); + expected = false; + t.equal( actual, expected, 'with title, should default to not complete' ); + + todo = new Todo( 'Test' ); // use new if using a constructor + todo.toggleComplete(); + actual = todo.isComplete(); + expected = true; + t.equal( actual, expected, 'toggleComplete should complete uncompleted todos' ); + + todo.toggleComplete(); + actual = todo.isComplete(); + expected = false; + t.equal( actual, expected, 'toggleComplete should uncomplete completed todos' ); + + todo = new Todo( 'Test' ); // use new if using a constructor + todo.setTitle( 'New' ); + actual = todo.getTitle(); + expected = 'New'; + t.equal( actual, expected, 'setTitle should change the title' ); + + t.end(); +}); \ No newline at end of file