marti1125/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>PouchDB</title>
    <link rel="stylesheet" href="https://cdn.concisecss.com/concise.min.css">
    <link rel="stylesheet" href="https://cdn.concisecss.com/concise-ui/concise-ui.min.css">
  </head>
  <body>
    <main grid>
      <section column="top"></section>
      <section column="center">
        <h1>Todo</h1>
        <h5>PouchDB</h5>
        <button id="cleardb">CLEAR DATABASE</button>
        <br/>
        <input id="add" type="text" placeholder="Title" />
        <br/>
        <textarea rows="6" cols="50" id="content" placeholder="Message"></textarea>
        <br/>
        <button id="addtodb">ADD</button>
        <br/><br/>
        <div id="result"></div>
      </section>
      <section column="bottom"></section>
    </main>

    <script type="text/javascript" src="pouchdb-6.1.2.min.js" ></script>

    <script type="text/javascript">

    window.onload=function(){

      var db = new PouchDB('mydatabase');

      console.log("DATABASE "+db);

      var remoteCouch = false;

      db.changes({
        since: 'now',
        live: true
      }).on('change', showTodos);

      function destroyDB(){
        db.allDocs({include_docs: true, attachments: true}, function(err, docs) {
           if (err) {
              return console.log(err);
           } else {
             for(var i = 0; i < docs.rows.length; i++) {
               db.remove(docs.rows[i].doc._id, docs.rows[i].doc._rev, function(err){
                 if (err) {
                    return console.log(err);
                 } else {
                    console.log("Document deleted successfully");
                 }
               });
             }
           }
        });
      }

      function deleteDoc(id, rev) {
        db.remove(id, rev, function(err){
          if (err) {
             return console.log(err);
          } else {
             console.log("Document deleted successfully");
          }
        });
      }

      function addTodo(text, content) {
        var todo = {
          _id: new Date().toISOString(),
          title: text,
          content: content,
          completed: false
        };
        db.put(todo, function callback(err, result) {
          if (!err) {
            console.log('Successfully posted a todo!');
          }
        });
      }

      function showTodos() {
        db.allDocs({include_docs: true, descending: true}, function(err, doc) {
          console.log(JSON.stringify(doc))
          redrawTodosUI(doc.rows);
        });
      }

      function redrawTodosUI(rows){
        document.getElementById("result").innerHTML = "";
        for(var i = 0; i < rows.length; i++) {

          var divCardBox = document.createElement("div");
          divCardBox.setAttribute("class", "card-box");

          var cardContent = document.createElement("div");
          cardContent.setAttribute("class", "card-content");

          var h3Title = document.createElement("h3");
          h3Title.setAttribute("class", "title");
          h3Title.appendChild(document.createTextNode(rows[i].doc.title));

          cardContent.appendChild(h3Title);

          var pContent = document.createElement("p");
          pContent.setAttribute("class", "content");
          pContent.appendChild(document.createTextNode(rows[i].doc.content));

          cardContent.appendChild(pContent);

          var divFooter = document.createElement("div");
          divFooter.setAttribute("class", "footer");

          var buttonUpdate = document.createElement("button");
          var buttonUpdateText = document.createTextNode("Update");
          buttonUpdate.appendChild(buttonUpdateText);
          buttonUpdate.setAttribute("class", "btnupdate");
          buttonUpdate.setAttribute("data-id", rows[i].doc._id);
          buttonUpdate.setAttribute("data-rev", rows[i].doc._rev);

          var buttonDelete = document.createElement("button");
          var buttonDeleteText = document.createTextNode("Delete");
          buttonDelete.appendChild(buttonDeleteText);
          buttonDelete.setAttribute("class", "btndelete");
          buttonDelete.setAttribute("data-id", rows[i].doc._id);
          buttonDelete.setAttribute("data-rev", rows[i].doc._rev);

          divFooter.appendChild(buttonUpdate);
          divFooter.appendChild(buttonDelete);

          divCardBox.appendChild(cardContent);
          divCardBox.appendChild(divFooter);


          /*var buttonUpdate = document.createElement("button");
          var buttonUpdateText = document.createTextNode("Update");

          buttonUpdate.appendChild(buttonUpdateText);
          buttonUpdate.setAttribute("class", "btnupdate");
          buttonUpdate.setAttribute("data-id", rows[i].doc._id);
          buttonUpdate.setAttribute("data-rev", rows[i].doc._rev);

          var buttonDelete = document.createElement("button");
          var buttonDeleteText = document.createTextNode("Delete");

          buttonDelete.appendChild(buttonDeleteText);
          buttonDelete.setAttribute("class", "btndelete");
          buttonDelete.setAttribute("data-id", rows[i].doc._id);
          buttonDelete.setAttribute("data-rev", rows[i].doc._rev);

          linode.appendChild(buttonUpdate);
          linode.appendChild(buttonDelete);*/

          document.getElementById("result").appendChild(divCardBox);
          document.getElementById("result").appendChild(document.createElement("br"));

        }
      }

      document.getElementById("cleardb").onclick = function(){
        destroyDB();
      }

      document.getElementById("addtodb").onclick = function(){
        addTodo(document.getElementById("add").value, document.getElementById("content").value);
      }

      document.addEventListener('click', function(event) {
          var element = event.target;
          if(element.className == 'btndelete') {
            callback(element.getAttribute('data-id'), element.getAttribute('data-rev'));
          }
      });
      function callback(id, rev){
         deleteDoc(id, rev)
      }

    };

    </script>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>PouchDB</title>
	<link rel="stylesheet" href="https://cdn.concisecss.com/concise.min.css">
	<link rel="stylesheet" href="https://cdn.concisecss.com/concise-ui/concise-ui.min.css">
	</head>
	<body>
	<main grid>
	<section column="top"></section>
	<section column="center">
	<h1>Todo</h1>
	<h5>PouchDB</h5>
	<button id="cleardb">CLEAR DATABASE</button>
	<br/>
	<input id="add" type="text" placeholder="Title" />
	<br/>
	<textarea rows="6" cols="50" id="content" placeholder="Message"></textarea>
	<br/>
	<button id="addtodb">ADD</button>
	<br/><br/>
	<div id="result"></div>
	</section>
	<section column="bottom"></section>
	</main>

	<script type="text/javascript" src="pouchdb-6.1.2.min.js" ></script>

	<script type="text/javascript">

	window.onload=function(){

	var db = new PouchDB('mydatabase');

	console.log("DATABASE "+db);

	var remoteCouch = false;

	db.changes({
	since: 'now',
	live: true
	}).on('change', showTodos);

	function destroyDB(){
	db.allDocs({include_docs: true, attachments: true}, function(err, docs) {
	if (err) {
	return console.log(err);
	} else {
	for(var i = 0; i < docs.rows.length; i++) {
	db.remove(docs.rows[i].doc._id, docs.rows[i].doc._rev, function(err){
	if (err) {
	return console.log(err);
	} else {
	console.log("Document deleted successfully");
	}
	});
	}
	}
	});
	}

	function deleteDoc(id, rev) {
	db.remove(id, rev, function(err){
	if (err) {
	return console.log(err);
	} else {
	console.log("Document deleted successfully");
	}
	});
	}

	function addTodo(text, content) {
	var todo = {
	_id: new Date().toISOString(),
	title: text,
	content: content,
	completed: false
	};
	db.put(todo, function callback(err, result) {
	if (!err) {
	console.log('Successfully posted a todo!');
	}
	});
	}

	function showTodos() {
	db.allDocs({include_docs: true, descending: true}, function(err, doc) {
	console.log(JSON.stringify(doc))
	redrawTodosUI(doc.rows);
	});
	}

	function redrawTodosUI(rows){
	document.getElementById("result").innerHTML = "";
	for(var i = 0; i < rows.length; i++) {

	var divCardBox = document.createElement("div");
	divCardBox.setAttribute("class", "card-box");

	var cardContent = document.createElement("div");
	cardContent.setAttribute("class", "card-content");

	var h3Title = document.createElement("h3");
	h3Title.setAttribute("class", "title");
	h3Title.appendChild(document.createTextNode(rows[i].doc.title));

	cardContent.appendChild(h3Title);

	var pContent = document.createElement("p");
	pContent.setAttribute("class", "content");
	pContent.appendChild(document.createTextNode(rows[i].doc.content));

	cardContent.appendChild(pContent);

	var divFooter = document.createElement("div");
	divFooter.setAttribute("class", "footer");

	var buttonUpdate = document.createElement("button");
	var buttonUpdateText = document.createTextNode("Update");
	buttonUpdate.appendChild(buttonUpdateText);
	buttonUpdate.setAttribute("class", "btnupdate");
	buttonUpdate.setAttribute("data-id", rows[i].doc._id);
	buttonUpdate.setAttribute("data-rev", rows[i].doc._rev);

	var buttonDelete = document.createElement("button");
	var buttonDeleteText = document.createTextNode("Delete");
	buttonDelete.appendChild(buttonDeleteText);
	buttonDelete.setAttribute("class", "btndelete");
	buttonDelete.setAttribute("data-id", rows[i].doc._id);
	buttonDelete.setAttribute("data-rev", rows[i].doc._rev);

	divFooter.appendChild(buttonUpdate);
	divFooter.appendChild(buttonDelete);

	divCardBox.appendChild(cardContent);
	divCardBox.appendChild(divFooter);


	/*var buttonUpdate = document.createElement("button");
	var buttonUpdateText = document.createTextNode("Update");

	buttonUpdate.appendChild(buttonUpdateText);
	buttonUpdate.setAttribute("class", "btnupdate");
	buttonUpdate.setAttribute("data-id", rows[i].doc._id);
	buttonUpdate.setAttribute("data-rev", rows[i].doc._rev);

	var buttonDelete = document.createElement("button");
	var buttonDeleteText = document.createTextNode("Delete");

	buttonDelete.appendChild(buttonDeleteText);
	buttonDelete.setAttribute("class", "btndelete");
	buttonDelete.setAttribute("data-id", rows[i].doc._id);
	buttonDelete.setAttribute("data-rev", rows[i].doc._rev);

	linode.appendChild(buttonUpdate);
	linode.appendChild(buttonDelete);*/

	document.getElementById("result").appendChild(divCardBox);
	document.getElementById("result").appendChild(document.createElement("br"));

	}
	}

	document.getElementById("cleardb").onclick = function(){
	destroyDB();
	}

	document.getElementById("addtodb").onclick = function(){
	addTodo(document.getElementById("add").value, document.getElementById("content").value);
	}

	document.addEventListener('click', function(event) {
	var element = event.target;
	if(element.className == 'btndelete') {
	callback(element.getAttribute('data-id'), element.getAttribute('data-rev'));
	}
	});
	function callback(id, rev){
	deleteDoc(id, rev)
	}

	};

	</script>

	</body>
	</html>