bendavis78/index.html

## index.html
<!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="style/base.css">
    <!--[if IE]>
      <script src="style/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">
        <ul id="todo-list"></ul>
      </section>
      <footer id="footer">
        <span id="todo-count"></span>
        <div id="sync-wrapper">
          <div id="sync-syncing">Currently syncing</div>
          <div id="sync-error">There was a problem syncing</div>
        </div>
      </footer>
    </section>
    <footer id="info">
      <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="//cdnjs.cloudflare.com/ajax/libs/pouchdb/3.2.0/pouchdb.js"></script>
    <script>

(function() {

  'use strict';

  var ENTER_KEY = 13;
  var newTodoDom = document.getElementById('new-todo');
  var syncDom = document.getElementById('sync-wrapper');

  // EDITING STARTS HERE (you dont need to edit anything above this line)
  var dbName = 'todos';

  var db = new PouchDB(dbName);
  var remoteCouch = 'http://localhost:5984/todos';

  db.info().then(function(info) {
    db.changes({
      since: 'now',
      live: true
    }).on('change', showTodos);
  }).catch(err);

  var err = console.error.bind(console);
  var log = console.log.bind(console);

  db.info(function(err, info) {
    db.changes({since: info.update_seq, onChange: showTodos, continuous: true});
  });

  // We have to create a new todo document and enter it in the database
  function addTodo(text) {
    var todo = {
      _id: new Date().toISOString(),
      title: text,
      completed: false
    };
    db.put(todo).then(function(result) {
      console.log('Successfully posted a todo!');
    }).catch(err);
  }

  // Show the current list of todos by reading them from the database
  function showTodos() {
    db.allDocs({include_docs: true, descending: true}).then(function(doc) {
      redrawTodosUI(doc.rows);
    }).catch(err);
  }

  function checkboxChanged(todo, event) {
    todo.completed = event.target.checked;
    db.put(todo);
  }

  // User pressed the delete button for a todo, delete it
  function deleteButtonPressed(todo) {
    db.remove(todo);
  }

  // The input box when editing a todo has blurred, we should save
  // the new title or delete the todo if the title is empty
  function todoBlurred(todo, event) {
    var trimmedText = event.target.value.trim();
    if (trimmedText) {
      todo.title = trimmedText;
      db.put(todo);
    } else {
      db.remove(todo);
    }
  }

  // Initialise a sync with the remote server
  function sync() {
    syncDom.setAttribute('data-sync-state', 'syncing');
    PouchDB.sync(dbName, remoteCouch, {live: true})
      .on('complete', function(info) {
        syncDom.setAttribute('data-sync-state', 'syncing');
      });
  }

  // EDITING STARTS HERE (you dont need to edit anything below this line)

  // There was some form or error syncing
  function syncError() {
    syncDom.setAttribute('data-sync-state', 'error');
  }

  // User has double clicked a todo, display an input so they can edit the title
  function todoDblClicked(todo) {
    var div = document.getElementById('li_' + todo._id);
    var inputEditTodo = document.getElementById('input_' + todo._id);
    div.className = 'editing';
    inputEditTodo.focus();
  }

  // If they press enter while editing an entry, blur it to trigger save
  // (or delete)
  function todoKeyPressed(todo, event) {
    if (event.keyCode === ENTER_KEY) {
      var inputEditTodo = document.getElementById('input_' + todo._id);
      inputEditTodo.blur();
    }
  }

  // Given an object representing a todo, this will create a list item
  // to display it.
  function createTodoListItem(todo) {
    var checkbox = document.createElement('input');
    checkbox.className = 'toggle';
    checkbox.type = 'checkbox';
    checkbox.addEventListener('change', checkboxChanged.bind(window, todo));

    var label = document.createElement('label');
    label.appendChild( document.createTextNode(todo.title));
    label.addEventListener('dblclick', todoDblClicked.bind(window, todo));

    var deleteLink = document.createElement('button');
    deleteLink.className = 'destroy';
    deleteLink.addEventListener( 'click', deleteButtonPressed.bind(window, todo));

    var divDisplay = document.createElement('div');
    divDisplay.className = 'view';
    divDisplay.appendChild(checkbox);
    divDisplay.appendChild(label);
    divDisplay.appendChild(deleteLink);

    var inputEditTodo = document.createElement('input');
    inputEditTodo.id = 'input_' + todo._id;
    inputEditTodo.className = 'edit';
    inputEditTodo.value = todo.title;
    inputEditTodo.addEventListener('keypress', todoKeyPressed.bind(window, todo));
    inputEditTodo.addEventListener('blur', todoBlurred.bind(window, todo));

    var li = document.createElement('li');
    li.id = 'li_' + todo._id;
    li.appendChild(divDisplay);
    li.appendChild(inputEditTodo);

    if (todo.completed) {
      li.className += 'complete';
      checkbox.checked = true;
    }

    return li;
  }

  function redrawTodosUI(todos) {
    var ul = document.getElementById('todo-list');
    ul.innerHTML = '';
    todos.forEach(function(todo) {
      ul.appendChild(createTodoListItem(todo.doc));
    });
  }

  function newTodoKeyPressHandler( event ) {
    if (event.keyCode === ENTER_KEY) {
      addTodo(newTodoDom.value);
      newTodoDom.value = '';
    }
  }

  function addEventListeners() {
    newTodoDom.addEventListener('keypress', newTodoKeyPressHandler, false);
  }

  addEventListeners();
  showTodos();

  if (remoteCouch) {
    sync();
  }

})();
    </script>
  </body>
</html>
	<!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="style/base.css">
	<!--[if IE]>
	<script src="style/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">
	<ul id="todo-list"></ul>
	</section>
	<footer id="footer">
	<span id="todo-count"></span>
	<div id="sync-wrapper">
	<div id="sync-syncing">Currently syncing</div>
	<div id="sync-error">There was a problem syncing</div>
	</div>
	</footer>
	</section>
	<footer id="info">
	<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="//cdnjs.cloudflare.com/ajax/libs/pouchdb/3.2.0/pouchdb.js"></script>
	<script>

	(function() {

	'use strict';

	var ENTER_KEY = 13;
	var newTodoDom = document.getElementById('new-todo');
	var syncDom = document.getElementById('sync-wrapper');

	// EDITING STARTS HERE (you dont need to edit anything above this line)
	var dbName = 'todos';

	var db = new PouchDB(dbName);
	var remoteCouch = 'http://localhost:5984/todos';

	db.info().then(function(info) {
	db.changes({
	since: 'now',
	live: true
	}).on('change', showTodos);
	}).catch(err);

	var err = console.error.bind(console);
	var log = console.log.bind(console);

	db.info(function(err, info) {
	db.changes({since: info.update_seq, onChange: showTodos, continuous: true});
	});

	// We have to create a new todo document and enter it in the database
	function addTodo(text) {
	var todo = {
	_id: new Date().toISOString(),
	title: text,
	completed: false
	};
	db.put(todo).then(function(result) {
	console.log('Successfully posted a todo!');
	}).catch(err);
	}

	// Show the current list of todos by reading them from the database
	function showTodos() {
	db.allDocs({include_docs: true, descending: true}).then(function(doc) {
	redrawTodosUI(doc.rows);
	}).catch(err);
	}

	function checkboxChanged(todo, event) {
	todo.completed = event.target.checked;
	db.put(todo);
	}

	// User pressed the delete button for a todo, delete it
	function deleteButtonPressed(todo) {
	db.remove(todo);
	}

	// The input box when editing a todo has blurred, we should save
	// the new title or delete the todo if the title is empty
	function todoBlurred(todo, event) {
	var trimmedText = event.target.value.trim();
	if (trimmedText) {
	todo.title = trimmedText;
	db.put(todo);
	} else {
	db.remove(todo);
	}
	}

	// Initialise a sync with the remote server
	function sync() {
	syncDom.setAttribute('data-sync-state', 'syncing');
	PouchDB.sync(dbName, remoteCouch, {live: true})
	.on('complete', function(info) {
	syncDom.setAttribute('data-sync-state', 'syncing');
	});
	}

	// EDITING STARTS HERE (you dont need to edit anything below this line)

	// There was some form or error syncing
	function syncError() {
	syncDom.setAttribute('data-sync-state', 'error');
	}

	// User has double clicked a todo, display an input so they can edit the title
	function todoDblClicked(todo) {
	var div = document.getElementById('li_' + todo._id);
	var inputEditTodo = document.getElementById('input_' + todo._id);
	div.className = 'editing';
	inputEditTodo.focus();
	}

	// If they press enter while editing an entry, blur it to trigger save
	// (or delete)
	function todoKeyPressed(todo, event) {
	if (event.keyCode === ENTER_KEY) {
	var inputEditTodo = document.getElementById('input_' + todo._id);
	inputEditTodo.blur();
	}
	}

	// Given an object representing a todo, this will create a list item
	// to display it.
	function createTodoListItem(todo) {
	var checkbox = document.createElement('input');
	checkbox.className = 'toggle';
	checkbox.type = 'checkbox';
	checkbox.addEventListener('change', checkboxChanged.bind(window, todo));

	var label = document.createElement('label');
	label.appendChild( document.createTextNode(todo.title));
	label.addEventListener('dblclick', todoDblClicked.bind(window, todo));

	var deleteLink = document.createElement('button');
	deleteLink.className = 'destroy';
	deleteLink.addEventListener( 'click', deleteButtonPressed.bind(window, todo));

	var divDisplay = document.createElement('div');
	divDisplay.className = 'view';
	divDisplay.appendChild(checkbox);
	divDisplay.appendChild(label);
	divDisplay.appendChild(deleteLink);

	var inputEditTodo = document.createElement('input');
	inputEditTodo.id = 'input_' + todo._id;
	inputEditTodo.className = 'edit';
	inputEditTodo.value = todo.title;
	inputEditTodo.addEventListener('keypress', todoKeyPressed.bind(window, todo));
	inputEditTodo.addEventListener('blur', todoBlurred.bind(window, todo));

	var li = document.createElement('li');
	li.id = 'li_' + todo._id;
	li.appendChild(divDisplay);
	li.appendChild(inputEditTodo);

	if (todo.completed) {
	li.className += 'complete';
	checkbox.checked = true;
	}

	return li;
	}

	function redrawTodosUI(todos) {
	var ul = document.getElementById('todo-list');
	ul.innerHTML = '';
	todos.forEach(function(todo) {
	ul.appendChild(createTodoListItem(todo.doc));
	});
	}

	function newTodoKeyPressHandler( event ) {
	if (event.keyCode === ENTER_KEY) {
	addTodo(newTodoDom.value);
	newTodoDom.value = '';
	}
	}

	function addEventListeners() {
	newTodoDom.addEventListener('keypress', newTodoKeyPressHandler, false);
	}

	addEventListeners();
	showTodos();

	if (remoteCouch) {
	sync();
	}

	})();
	</script>
	</body>
	</html>