JSFiddle - React, Tailwind, and code Playground

by Terrance Smith

HTML

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/pouchdb.min.js"></script>
<input type="text" id="todoText" />

<button onclick="showData">
Show Data
</button>

<button onclick="clearData">
Clear Data
</button>

<div id="displayData">
  Shows data here
</div>

JavaScript 1.7

var db = new PouchDB('todos');
var remoteCouch = false;

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

function getTodos() {
  return db.allDocs({
    include_docs: true,
    descending: true
  });
}

addTodo("Say Hello")

function showData() {
  getTodos().then(function(data) {
    _.each(data.rows, function(row) {
      console.log(row)
    })
  });
}

function addText() {
  var txt = getById("todoText").value
  addTodo(txt)
}

function displayData() {
  var displayDiv = getById("displayData")
  var data = getTodos().then(function(data) {
    _.each(data.rows, function(row) {
      displayDiv.innerHtml += "<p>" + row + "</p>"
    })
  })
}

function getById(id) {
  return document.getElementById("todoText");
}

displayData();