<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body { background: white;
}
.new-todo { padding: 4px;
}
.todo { border: 1px solid black;
overflow: hidden;
background: #efefef;
}
.todo-close { display: none;
}
.todo:hover .todo-close { display: block;
}
.todo * { float: left;
padding: 10px;
}
.todo-complete { background: green;
}
.todo-complete .todo-val { text-decoration: line-through;
color: white;
}
.show-active .todo-complete { display: none;
}
.show-complete .todo:not(.todo-complete) { display: none;
}
.todo-edit { background: gray !important;
color: black !important;
text-decoration: none !important;
}
.todo-name { width: 200px;
border: 1px solid gray;
}
.check-all[data-on="true"] { font-weight: bold;
background: darkGray;
}
</style>
</head>
<body>
<div class="app">
<button class="check-all">▼</button>
<input class="todo-name" type="text" placeholder="What needs to be done?"/>
<div class="todos"></div>
<div class="todo-foot">
<span>
<span class="todo-num">#</span>
item<span class="plural">s</span>
left
</span>
<button class="all">all</button>
<button class="active">active</button>
<button class="completed">completed</button>
<button class="clear-completed">clear completed</button>
</div>
</div>
<script id="todo" type="text/html">
<div class="todo">
<input class="todo-check" type="checkbox" />
<div class="todo-val">$val</div>
<button class="todo-close">X</button>
</div>
</script>
<script>
(function() { var todoName = document.querySelector('.todo-name'), todoTmpl = document.querySelector('#todo').innerHTML, todos = document.querySelector('.todos'), todoFoot = document.querySelector('.todo-foot'), todoNum = document.querySelector('.todo-num'), plural = document.querySelector('.plural'), checkAll = document.querySelector('.check-all'), evts = {};
function save() { localStorage.todos = todos.innerHTML;
}
function addTodo(value) { if (value.trim().length > 0) { todoName.value = '';
todos.innerHTML += todoTmpl.replace('$val', value); generalUpdate();
}
}
function updateProp(target, attr, val) { val ? target.setAttribute(attr, attr) : target.removeAttribute(attr);
target[attr] = val;
}
function setTodoComplete(todo, val) { if (val) { todo.classList.add('todo-complete'); } else { todo.classList.remove('todo-complete'); checkAll.setAttribute('data-on', false); localStorage.setItem('allChecked', false); }
updateProp(todo.querySelector('.todo-check'), 'checked', val); }
function updateItemsLeft(todoCount) { todoNum.innerHTML = todoCount;
plural.style.display = todoCount === 1 ? 'none' : 'inline';
}
function handleNoItems(todoCount) { todoFoot.style.display = todoCount === 0 ? 'none' : 'block';
}
function generalUpdate() { var todoCount = document.querySelectorAll('.todo').length, todoCompleted = document.querySelectorAll('.todo-complete'); updateItemsLeft(todoCount - todoCompleted.length);
handleNoItems(todoCount);
save();
}
evts['check-all-click'] = function() { var todos = document.querySelectorAll('.todo'), leng = todos.length,
val = checkAll.allChecked = !checkAll.allChecked;
for (var i = 0; i < leng; i++) { setTodoComplete(todos[i], val);
}
checkAll.setAttribute('data-on', val); localStorage.setItem('allChecked', val); };
evts['todo-close-click'] = function(e, todo) { todos.removeChild(todo);
};
evts['todo-check-click'] = function(e, todo) { setTodoComplete(todo, e.target.checked);
};
evts['all-click'] = function() { todos.classList.remove('show-active'); todos.classList.remove('show-complete'); delete localStorage.mode;
};
evts['active-click'] = function() { evts['all-click']();
todos.classList.add('show-active'); localStorage.mode = 'active';
};
evts['completed-click'] = function() { evts['all-click']();
todos.classList.add('show-complete'); localStorage.mode = 'completed';
};
evts['clear-completed-click'] = function(e, todo) { var completed = document.querySelectorAll('.todo-complete'), leng = completed.length;
for (var i = 0; i < leng; i++) { completed[i].parentNode.removeChild(completed[i]);
}
};
todoName.addEventListener('change', function(e) { addTodo(todoName.value);
});
document.addEventListener('click', function(e) { var key = e.target.className + '-click',
todo = e.target.parentNode;
if (evts[key] != null) { evts[key](e, todo);
generalUpdate();
}
});
function todoBlur(e) { e.target.removeEventListener('blur', todoBlur); e.target.classList.remove('todo-edit'); e.target.contentEditable = false;
if (e.target.innerHTML.trim().length === 0) { e.target.parentNode.parentNode.removeChild(e.target.parentNode);
}
save();
}
document.addEventListener('dblclick', function(e) { var range, sel;
if (e.target.className === 'todo-val') { e.target.contentEditable = true;
e.target.initialVal = e.target.innerHTML;
e.target.focus();
e.target.addEventListener('blur', todoBlur); e.target.classList.add('todo-edit');
// put cursor at end
range = document.createRange();
range.selectNodeContents(e.target);
range.collapse(false);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
});
document.addEventListener('keydown', function(e) { if (document.activeElement.classList.contains('todo-val')) { if (e.which === 27) { // ESC e.target.innerHTML = e.target.initialVal;
todoBlur(e);
} else if (e.which === 13) { // ENTER todoBlur(e);
}
}
});
document.addEventListener('keyup', function(e) { if (document.activeElement.classList.contains('todo-val')) { save();
}
});
if (localStorage.todos != null) todos.innerHTML = localStorage.todos;
if (localStorage.allChecked === 'true') evts['check-all-click']();
if (localStorage.mode != null) evts[localStorage.mode + '-click']();
generalUpdate();
})();
</script>
</body>
</html>
