Permalink
Browse files

Added todo-list tutorial

Fix localhost link
  • Loading branch information...
1 parent cc9adea commit f82502f83e94d71a7a673d408d10ac9bcafcbd53 @neojski neojski committed Jan 19, 2013
View
29 docs/todo-list-tutorial.md
@@ -0,0 +1,29 @@
+----
+layout: default
+title: Simple todo list with sync
+----
+
+# Simple todo list with sync
+
+This short tutorial shows the very simple application using pouchdb. It replaces [todomvc todos’](http://todomvc.com/vanilla-examples/vanillajs/) localStorage with pouchdb.
+
+First you need to start with cloning pouchdb:
+
+ https://github.com/daleharvey/pouchdb
+
+After that we go straight away to our example todo-list located in tutorials.
+
+To run it - due to [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) - you need to put it onto your webserver or start your own. If you have python2 just try: (http.server in python 3)
+
+ python2 -m SimpleHTTPServer 8888
+
+Then simply run our example: [http://localhost:8888](http://localhost:8888). Unfortunately, sync doesn’t work yet.
+
+## Sync
+
+More difficult part concerns couchdb server we want to sync our data to.
+
+If you already have one - you just simply edit the remove variable in app.js file. (you need to create database called todos)
+
+Otherwise, follow [couchdb’s tests](https://github.com/daleharvey/pouchdb/wiki/Running-and-Writing-Tests) tutorial to get couchdb and cors-server up and running. Create todos database and you are ready to go.
+
View
414 docs/tutorials/todo-list/base.css
@@ -0,0 +1,414 @@
+html,
+body {
+ margin: 0;
+ padding: 0;
+}
+
+button {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: none;
+ font-size: 100%;
+ vertical-align: baseline;
+ font-family: inherit;
+ color: inherit;
+ -webkit-appearance: none;
+ /*-moz-appearance: none;*/
+ -ms-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+}
+
+body {
+ font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ line-height: 1.4em;
+ background: #eaeaea url('bg.png');
+ color: #4d4d4d;
+ width: 550px;
+ margin: 0 auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-font-smoothing: antialiased;
+ -ms-font-smoothing: antialiased;
+ -o-font-smoothing: antialiased;
+ font-smoothing: antialiased;
+}
+
+#todoapp {
+ background: #fff;
+ background: rgba(255, 255, 255, 0.9);
+ margin: 130px 0 40px 0;
+ border: 1px solid #ccc;
+ position: relative;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+ box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
+ 0 25px 50px 0 rgba(0, 0, 0, 0.15);
+}
+
+#todoapp:before {
+ content: '';
+ border-left: 1px solid #f5d6d6;
+ border-right: 1px solid #f5d6d6;
+ width: 2px;
+ position: absolute;
+ top: 0;
+ left: 40px;
+ height: 100%;
+}
+
+#todoapp input::-webkit-input-placeholder {
+ font-style: italic;
+}
+
+#todoapp input:-moz-placeholder {
+ font-style: italic;
+ color: #a9a9a9;
+}
+
+#todoapp h1 {
+ position: absolute;
+ top: -120px;
+ width: 100%;
+ font-size: 70px;
+ font-weight: bold;
+ text-align: center;
+ color: #b3b3b3;
+ color: rgba(255, 255, 255, 0.3);
+ text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
+ -webkit-text-rendering: optimizeLegibility;
+ -moz-text-rendering: optimizeLegibility;
+ -ms-text-rendering: optimizeLegibility;
+ -o-text-rendering: optimizeLegibility;
+ text-rendering: optimizeLegibility;
+}
+
+#header {
+ padding-top: 15px;
+ border-radius: inherit;
+}
+
+#header:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ height: 15px;
+ z-index: 2;
+ border-bottom: 1px solid #6c615c;
+ background: #8d7d77;
+ background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
+ background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+ background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+ background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+ background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+ background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
+ border-top-left-radius: 1px;
+ border-top-right-radius: 1px;
+}
+
+#new-todo,
+.edit {
+ position: relative;
+ margin: 0;
+ width: 100%;
+ font-size: 24px;
+ font-family: inherit;
+ line-height: 1.4em;
+ border: 0;
+ outline: none;
+ color: inherit;
+ padding: 6px;
+ border: 1px solid #999;
+ box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ -moz-font-smoothing: antialiased;
+ -ms-font-smoothing: antialiased;
+ -o-font-smoothing: antialiased;
+ font-smoothing: antialiased;
+}
+
+#new-todo {
+ padding: 16px 16px 16px 60px;
+ border: none;
+ background: rgba(0, 0, 0, 0.02);
+ z-index: 2;
+ box-shadow: none;
+}
+
+#main {
+ position: relative;
+ z-index: 2;
+ border-top: 1px dotted #adadad;
+}
+
+label[for='toggle-all'] {
+ display: none;
+}
+
+#toggle-all {
+ position: absolute;
+ top: -42px;
+ left: -4px;
+ width: 40px;
+ text-align: center;
+ border: none; /* Mobile Safari */
+}
+
+#toggle-all:before {
+ content: '»';
+ font-size: 28px;
+ color: #d9d9d9;
+ padding: 0 25px 7px;
+}
+
+#toggle-all:checked:before {
+ color: #737373;
+}
+
+#todo-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+#todo-list li {
+ position: relative;
+ font-size: 24px;
+ border-bottom: 1px dotted #ccc;
+}
+
+#todo-list li:last-child {
+ border-bottom: none;
+}
+
+#todo-list li.editing {
+ border-bottom: none;
+ padding: 0;
+}
+
+#todo-list li.editing .edit {
+ display: block;
+ width: 506px;
+ padding: 13px 17px 12px 17px;
+ margin: 0 0 0 43px;
+}
+
+#todo-list li.editing .view {
+ display: none;
+}
+
+#todo-list li .toggle {
+ text-align: center;
+ width: 40px;
+ /* auto, since non-WebKit browsers doesn't support input styling */
+ height: auto;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ border: none; /* Mobile Safari */
+ -webkit-appearance: none;
+ /*-moz-appearance: none;*/
+ -ms-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+}
+
+#todo-list li .toggle:after {
+ content: '';
+ line-height: 43px; /* 40 + a couple of pixels visual adjustment */
+ font-size: 20px;
+ color: #d9d9d9;
+ text-shadow: 0 -1px 0 #bfbfbf;
+}
+
+#todo-list li .toggle:checked:after {
+ color: #85ada7;
+ text-shadow: 0 1px 0 #669991;
+ bottom: 1px;
+ position: relative;
+}
+
+#todo-list li label {
+ word-break: break-word;
+ padding: 15px;
+ margin-left: 45px;
+ display: block;
+ line-height: 1.2;
+ -webkit-transition: color 0.4s;
+ -moz-transition: color 0.4s;
+ -ms-transition: color 0.4s;
+ -o-transition: color 0.4s;
+ transition: color 0.4s;
+}
+
+#todo-list li.completed label {
+ color: #a9a9a9;
+ text-decoration: line-through;
+}
+
+#todo-list li .destroy {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 10px;
+ bottom: 0;
+ width: 40px;
+ height: 40px;
+ margin: auto 0;
+ font-size: 22px;
+ color: #a88a8a;
+ -webkit-transition: all 0.2s;
+ -moz-transition: all 0.2s;
+ -ms-transition: all 0.2s;
+ -o-transition: all 0.2s;
+ transition: all 0.2s;
+}
+
+#todo-list li .destroy:hover {
+ text-shadow: 0 0 1px #000,
+ 0 0 10px rgba(199, 107, 107, 0.8);
+ -webkit-transform: scale(1.3);
+ -moz-transform: scale(1.3);
+ -ms-transform: scale(1.3);
+ -o-transform: scale(1.3);
+ transform: scale(1.3);
+}
+
+#todo-list li .destroy:after {
+ content: '';
+}
+
+#todo-list li:hover .destroy {
+ display: block;
+}
+
+#todo-list li .edit {
+ display: none;
+}
+
+#todo-list li.editing:last-child {
+ margin-bottom: -1px;
+}
+
+#footer {
+ color: #777;
+ padding: 0 15px;
+ position: absolute;
+ right: 0;
+ bottom: -31px;
+ left: 0;
+ height: 20px;
+ z-index: 1;
+ text-align: center;
+}
+
+#footer:before {
+ content: '';
+ position: absolute;
+ right: 0;
+ bottom: 31px;
+ left: 0;
+ height: 50px;
+ z-index: -1;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
+ 0 6px 0 -3px rgba(255, 255, 255, 0.8),
+ 0 7px 1px -3px rgba(0, 0, 0, 0.3),
+ 0 43px 0 -6px rgba(255, 255, 255, 0.8),
+ 0 44px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+#todo-count {
+ float: left;
+ text-align: left;
+}
+
+#filters {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: absolute;
+ right: 0;
+ left: 0;
+}
+
+#filters li {
+ display: inline;
+}
+
+#filters li a {
+ color: #83756f;
+ margin: 2px;
+ text-decoration: none;
+}
+
+#filters li a.selected {
+ font-weight: bold;
+}
+
+#clear-completed {
+ float: right;
+ position: relative;
+ line-height: 20px;
+ text-decoration: none;
+ background: rgba(0, 0, 0, 0.1);
+ font-size: 11px;
+ padding: 0 10px;
+ border-radius: 3px;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
+}
+
+#clear-completed:hover {
+ background: rgba(0, 0, 0, 0.15);
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
+}
+
+#info {
+ margin: 65px auto 0;
+ color: #a6a6a6;
+ font-size: 12px;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+ text-align: center;
+}
+
+#info a {
+ color: inherit;
+}
+
+/*
+ Hack to remove background from Mobile Safari.
+ Can't use it globally since it destroys checkboxes in Firefox and Opera
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ #toggle-all,
+ #todo-list li .toggle {
+ background: none;
+ }
+
+ #todo-list li .toggle {
+ height: 40px;
+ }
+
+ #toggle-all {
+ top: -56px;
+ left: -15px;
+ width: 65px;
+ height: 41px;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ -webkit-appearance: none;
+ appearance: none;
+ }
+}
+
+.hidden{
+ display:none;
+}
View
57 docs/tutorials/todo-list/index.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>VanillaJS • TodoMVC</title>
+ <link rel="stylesheet" href="base.css">
+ <style type="text/css">
+#sync{
+ font-size: 24px;
+}
+#sync span {
+ line-height: 20px;
+ text-decoration: none;
+ background: rgba(0, 0, 0, 0.1);
+ padding: 0 18px;
+ border-radius: 3px;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
+}
+
+#sync span:hover {
+ background: rgba(0, 0, 0, 0.15);
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
+}
+
+ </style>
+ <!--[if IE]>
+ <script src="../../assets/ie.js"></script>
+ <![endif]-->
+</head>
+<body>
+ <section id="todoapp">
+ <header id="header">
+ <h1>todos</h1>
+ <input id="new-todo" placeholder="What needs to be done?" autofocus>
+ </header>
+ <section id="main">
+ <input id="toggle-all" type="checkbox">
+ <label for="toggle-all">Mark all as complete</label>
+ <ul id="todo-list"></ul>
+ </section>
+ <footer id="footer">
+ <span id="todo-count"></span>
+ <button id="clear-completed">Clear completed</button>
+ </footer>
+ </section>
+ <footer id="info">
+ <p id="sync"><span id="push">push</span>/<span id="get">get</span></p>
+ <p>Double-click to edit a todo</p>
+ <p>Template by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p>
+ <p>Created by <a href="http://twitter.com/ffesseler">Florian Fesseler</a></p>
+ <p>Cleanup, edits by <a href="http://github.com/boushley">Aaron Boushley</a></p>
+ </footer>
+ <script src="js/pouch.alpha.js"></script>
+ <script src="js/app.js"></script>
+</body>
+</html>
View
384 docs/tutorials/todo-list/js/app.js
@@ -0,0 +1,384 @@
+(function() {
+ 'use strict';
+
+ var todos = [],
+ stat = {},
+ ENTER_KEY = 13,
+ db = null,
+ todos = {},
+ dbname = 'idb://todos',
+ remote = 'http://127.0.0.1:2020/todos';
+
+ window.addEventListener( 'load', loadPouch, false );
+
+ function Todo( title, completed ) {
+ this._id = getUuid();
+ this.title = title;
+ this.completed = completed;
+ this.created = Date.now();
+ }
+
+ function Stat() {
+ this.todoLeft = 0;
+ this.todoCompleted = 0;
+ this.totalTodo = 0;
+ }
+
+ function loadPouch() {
+ //Pouch.destroy(dbname);
+ Pouch(dbname, function(err, pouchdb){
+ if(err){
+ alert('Can\'t open pouchdb database');
+ }else{
+ document.getElementById('push').addEventListener('click', function(){
+ var orig = this.innerHTML;
+ var that = this;
+ this.innerHTML = "working";
+ Pouch.replicate(dbname, remote, function(err, changes){
+ if(!err){
+ that.innerHTML = "synced";
+ }else{
+ that.innerHTML = "failed";
+ }
+ setTimeout(function(){
+ that.innerHTML = orig;
+ }, 1000);
+ });
+ }, false);
+
+ document.getElementById('get').addEventListener('click', function(){
+ var orig = this.innerHTML;
+ var that = this;
+ this.innerHTML = "working";
+ Pouch.replicate(remote, dbname, function(err, changes){
+ if(!err){
+ loadData();
+ }else{
+ console.log('Replication get error');
+ }
+ that.innerHTML = orig;
+ });
+ }, false);
+
+ db = pouchdb;
+ windowLoadHandler();
+ }
+ });
+ }
+
+ function loadData(){
+ db.allDocs({include_docs: true}, function(err, res){
+ var i, todo;
+ if(!err){
+ todos = {};
+ for(i = 0; i < res.rows.length; i++){
+ todo = res.rows[i].doc;
+ todos[todo._id] = todo;
+ }
+ refreshData();
+ }else{
+ console.log('Error getting all docs');
+ }
+ });
+ }
+
+ function windowLoadHandler() {
+ loadData();
+ addEventListeners();
+ }
+
+ function addEventListeners() {
+ document.getElementById('new-todo').addEventListener( 'keypress', newTodoKeyPressHandler, false );
+ document.getElementById('toggle-all').addEventListener( 'change', toggleAllChangeHandler, false );
+ }
+
+ function inputEditTodoKeyPressHandler( event ) {
+ var inputEditTodo = event.target,
+ trimmedText = inputEditTodo.value.trim(),
+ todoId = event.target.id.slice( 6 );
+
+ if ( trimmedText ) {
+ if ( event.keyCode === ENTER_KEY ) {
+ editTodo( todoId, {'title': trimmedText} );
+ }
+ } else {
+ removeTodoById( todoId );
+ }
+ }
+
+ function inputEditTodoBlurHandler( event ) {
+ var inputEditTodo = event.target,
+ todoId = event.target.id.slice( 6 );
+
+ editTodo( todoId, {'title': inputEditTodo.value} );
+ }
+
+ function newTodoKeyPressHandler( event ) {
+ if ( event.keyCode === ENTER_KEY ) {
+ addTodo( document.getElementById('new-todo').value );
+ }
+ }
+
+ function toggleAllChangeHandler( event ) {
+ var i, todo;
+ for(i in todos){
+ if(todos.hasOwnProperty(i)){
+ var todo = todos[i];
+ editTodo(todo._id, {'completed': event.target.checked});
+ }
+ }
+ }
+
+ function spanDeleteClickHandler( event ) {
+ removeTodoById( event.target.getAttribute('data-todo-id') );
+ }
+
+ function hrefClearClickHandler() {
+ removeTodosCompleted();
+ refreshData();
+ }
+
+ function todoContentHandler( event ) {
+ var todoId = event.target.getAttribute('data-todo-id'),
+ div = document.getElementById( 'li_' + todoId ),
+ inputEditTodo = document.getElementById( 'input_' + todoId );
+
+ div.className = 'editing';
+ inputEditTodo.focus();
+ }
+
+ function checkboxChangeHandler( event ) {
+ var checkbox = event.target,
+ todoId = checkbox.getAttribute('data-todo-id');
+ editTodo( todoId, {'completed': checkbox.checked} );
+ }
+
+ function addTodo( text ) {
+ var trimmedText = text.trim();
+
+ if ( trimmedText ) {
+ var todo = new Todo( trimmedText, false );
+ }
+
+ db.post(todo, function(err, res){
+ if(!err){
+ console.log('Todo added', todo._id);
+ todos[todo._id] = todo;
+ console.log(todo)
+ refreshData();
+ }else{
+ console.log('Add failed', err);
+ }
+ });
+ }
+
+ /* opt: text, completed */
+ function editTodo( todoId, opt ) {
+
+ db.get(todoId, function(err, todo){
+ console.log(todo);
+ if('title' in opt){
+ todo.title = opt.title;
+ }
+ if('completed' in opt){
+ todo.completed = opt.completed;
+ }
+ db.put(todo, function(err, res){
+ if(!err){
+ console.log('Todo edited', opt);
+ todos[todoId] = todo;
+ refreshData();
+ }else{
+ console.log('Edit failed');
+ }
+ });
+ });
+ }
+
+ function removeTodoById( todoId ) {
+ db.get(todoId, function(err, res){
+ db.remove(res, function(err, res){
+ if(!err){
+ console.log('Todo removed');
+ delete todos[todoId];
+ refreshData();
+ }else{
+ console.log('Remove failed');
+ }
+ });
+ });
+ }
+
+ function removeTodosCompleted() {
+ var i, todo;
+ for(i in todos){
+ if(todos.hasOwnProperty(i)){
+ var todo = todos[i];
+ if(todo.completed){
+ removeTodoById(todo._id);
+ }
+ }
+ }
+ }
+
+ function refreshData() {
+ var todosArr = [];
+ var i, todo;
+ for(i in todos){
+ if(todos.hasOwnProperty(i)){
+ todo = todos[i];
+ todosArr.push(todo);
+ }
+ }
+ todosArr.sort(function(a, b){
+ return a.created - b.created;
+ });
+ computeStats(todosArr);
+ redrawTodosUI(todosArr);
+ redrawStatsUI(todosArr);
+ changeToggleAllCheckboxState(todosArr);
+ }
+
+ function computeStats(todos) {
+ var i, l;
+
+ stat = new Stat();
+ stat.totalTodo = todos.length;
+
+ for ( i = 0, l = todos.length; i < l; i++ ) {
+ if ( todos[ i ].completed ) {
+ stat.todoCompleted++;
+ }
+ }
+
+ stat.todoLeft = stat.totalTodo - stat.todoCompleted;
+ }
+
+
+ function redrawTodosUI(todos) {
+ var todo, checkbox, label, deleteLink, divDisplay, inputEditTodo, li, i, l,
+ ul = document.getElementById('todo-list');
+
+ document.getElementById('main').style.display = todos.length ? 'block' : 'none';
+
+ ul.innerHTML = '';
+ document.getElementById('new-todo').value = '';
+
+ for ( i = 0, l = todos.length; i < l; i++ ) {
+ todo = todos[ i ];
+
+ // create checkbox
+ checkbox = document.createElement('input');
+ checkbox.className = 'toggle';
+ checkbox.setAttribute( 'data-todo-id', todo._id );
+ checkbox.type = 'checkbox';
+ checkbox.addEventListener( 'change', checkboxChangeHandler );
+
+ // create div text
+ label = document.createElement('label');
+ label.setAttribute( 'data-todo-id', todo._id );
+ label.appendChild( document.createTextNode( todo.title ) );
+ label.addEventListener( 'dblclick', todoContentHandler );
+
+
+ // create delete button
+ deleteLink = document.createElement('button');
+ deleteLink.className = 'destroy';
+ deleteLink.setAttribute( 'data-todo-id', todo._id );
+ deleteLink.addEventListener( 'click', spanDeleteClickHandler );
+
+ // create divDisplay
+ divDisplay = document.createElement('div');
+ divDisplay.className = 'view';
+ divDisplay.setAttribute( 'data-todo-id', todo._id );
+ divDisplay.appendChild( checkbox );
+ divDisplay.appendChild( label );
+ divDisplay.appendChild( deleteLink );
+
+ // create todo input
+ inputEditTodo = document.createElement('input');
+ inputEditTodo.id = 'input_' + todo._id;
+ inputEditTodo.className = 'edit';
+ inputEditTodo.value = todo.title;
+ inputEditTodo.addEventListener( 'keypress', inputEditTodoKeyPressHandler );
+ inputEditTodo.addEventListener( 'blur', inputEditTodoBlurHandler );
+
+
+ // create li
+ li = document.createElement('li');
+ li.id = 'li_' + todo._id;
+ li.appendChild( divDisplay );
+ li.appendChild( inputEditTodo );
+
+
+ if ( todo.completed ) {
+ li.className += 'complete';
+ checkbox.checked = true;
+ }
+
+ ul.appendChild( li );
+ }
+ }
+
+ function changeToggleAllCheckboxState(todos) {
+ var toggleAll = document.getElementById('toggle-all');
+
+ toggleAll.checked = stat.todoCompleted === todos.length;
+ }
+
+ function redrawStatsUI(todos) {
+ removeChildren( document.getElementsByTagName('footer')[0] );
+ document.getElementById('footer').style.display = todos.length ? 'block' : 'none';
+
+ if ( stat.todoCompleted ) {
+ drawTodoClear();
+ }
+
+ if ( stat.totalTodo ) {
+ drawTodoCount();
+ }
+ }
+
+ function drawTodoCount() {
+ var number = document.createElement('strong'),
+ remaining = document.createElement('span'),
+ text = ' ' + ( stat.todoLeft === 1 ? 'item' : 'items' ) + ' left';
+
+ // create remaining count
+ number.innerHTML = stat.todoLeft;
+
+ remaining.id = 'todo-count';
+ remaining.appendChild( number );
+ remaining.appendChild( document.createTextNode( text ) );
+
+ document.getElementsByTagName('footer')[0].appendChild( remaining );
+ }
+
+ function drawTodoClear() {
+ var buttonClear = document.createElement('button');
+
+ buttonClear.id = 'clear-completed';
+ buttonClear.addEventListener( 'click', hrefClearClickHandler );
+ buttonClear.innerHTML = 'Clear completed (' + stat.todoCompleted + ')';
+
+ document.getElementsByTagName('footer')[0].appendChild( buttonClear );
+ }
+
+ function removeChildren( node ) {
+ node.innerHTML = '';
+ }
+
+ function getUuid() {
+ var i, random,
+ uuid = '';
+
+ for ( i = 0; i < 32; i++ ) {
+ random = Math.random() * 16 | 0;
+ if ( i === 8 || i === 12 || i === 16 || i === 20 ) {
+ uuid += '-';
+ }
+ uuid += ( i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random) ).toString( 16 );
+ }
+ return uuid;
+ }
+})();
View
4,220 docs/tutorials/todo-list/js/pouch.alpha.js
4,220 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.

0 comments on commit f82502f

Please sign in to comment.