Understore Todomvc

Understore Todomvc

by understore

HTML

<script src="https://unpkg.com/[email protected]/dist/understore.min.js"></script>
	<div class="todoapp">
		<div class="header">
			<h1>todos</h1>
			<form action="javascript:;" class="todo_input"></form>
		</div>
		<div class="main">
			<input class="toggle-all" type="checkbox">
			<div class="todo-list"></div>
		</div>
		<div class="footer">
			<span class="todo-count"></span>
			<ul class="filters">
				<li>
					<a href="#/all">All</a>
				</li>
				<li>
					<a class="" href="#/active">Active</a>
				</li>
				<li>
					<a class="" href="#/completed">Completed</a>
				</li>
			</ul><button class="clear-completed" onclick="clearTodo()">Clear completed</button>
		</div>
	</div>

CSS

item {
	position: relative;
	display: block;
	border-bottom: 1px solid #ededed;
}
item:last-child {
	border-bottom: none;
}
i {
	text-align: center;
	width: 40px;
	/* auto, since non-WebKit browsers doesn't support input styling */
	height: 40px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	border: none;
	/* Mobile Safari */
	-webkit-appearance: none;
	appearance: none;
}
i:after {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
}
i.checked:after {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
}
i.checked+.view label {
	color: #d9d9d9;
	text-decoration: line-through;
}
label {
	white-space: pre-line;
	word-break: break-all;
	padding: 15px 60px 15px 15px;
	margin-left: 45px;
	display: block;
	line-height: 1.2;
	transition: color 0.4s;
}
label br {
	display: none;
}
label * {
	display: inline;
}
.completed label {
	color: #d9d9d9;
	text-decoration: line-through;
}
.destroy {
  display: none;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 40px;
  height: 40px;
  line-height: 52px;
  text-align: center;
  margin: auto 0;
  font-size: 30px;
  color: #cc9a9a;
  margin-bottom: 11px;
  transition: color 0.2s ease-out;
}
.destroy:hover {
	color: #af5b5e;
}
item:hover .destroy:after {
	content: '×';
}
item:hover .destroy {
	display: block;
}
.edit {
	display: none;
}
.editing:last-child {
	margin-bottom: -1px;
}
html, body {
	margin: 0;
	padding: 0;
}
button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 100%;
	vertical-align: baseline;
	font-family: inherit;
	font-weight: inherit;
	color: inherit;
	-webkit-appearance:...

JavaScript

var todoItemTpl = '<item>\
	<i class="{ this.complete }" @click="checked" ></i>\
	<div class="view ">\
		<label @keyup="submit" @dblclick="setMode" >{this.title}</label> <a @click="remove" class="destroy"></a>\
	</div></item>';

var todoStatusTpl = '<todo_count><strong>{ this.count }</strong> item left</todo_count>';

var inputTpl = '<todo_input><input type="text" value="{ this.title }" @keyup="write" class="new-todo" placeholder="What needs to be done?" /></todo_input>';

function clearTodo(){
	var id = "todo_item";
	var todo_index = eval("["+_.getCookie(id)+"]");

	for(var i = 0, len = todo_index.length; i < len; i++){
		var todo_item = _.getItem({id : id, idx : todo_index[i]});
		if(todo_item.data.complete == "checked"){
			_.removeItem({id : id, idx : todo_index[i]});
		}
	}
}

var setTodo = function(event){
	if(event.which == 13){
		_.setItem({
			id :  event.id,
			idx : event.idx,
			data : {title:event.target.textContent}
		});
		event.target.removeAttribute("contenteditable");
	}else if(event.which == 27){

		event.target.textContent = event.data.title;
		event.target.removeAttribute("contenteditable");
	}
};

var setMode = function(event){
	event.target.setAttribute("contenteditable", true);
	event.target.focus();
};

var newTodo = function(event){
	if((event.keyCode == 13 || event.which == 13) && event.target.value.length > 0){
		_.addItem({
		  id :  "todo_item",
		  data : {title:event.target.value , complete : ""}
		});

		event.target.value = "";
	}
};

var route = function(e){
	var path = window.location.hash;
	path = path.replace("#/", ""); 
	document.body.className = path;
};

var removeTodo = function(event){
	_.removeItem({id: event.id, idx : event.idx});
};

var completeTodo = function(event){

	event.target.className == "" ? event.data.complete = "checked" : event.data.complete = "";

	_.setItem(event);
};


_.addItem({
	id : "todo_count",
	template : todoStatusTpl,
	target : document.querySelector(".todo-count"),
	data : {count :...