parzibyte/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <script src="http://cdn.jsdelivr.net/npm/pouchdb@6.4.1/dist/pouchdb.min.js"></script>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
  <h1>Agenda con PouchDB</h1>
  <a target="_blank" href="https://www.parzibyte.me/blog">https://www.parzibyte.me/blog</a>
  <br />
  <label for="nombreCompleto">Nombre:</label>
  <br>
  <input placeholder="Nombre y apellidos" type="text" name="nombreCompleto" id="nombreCompleto" />
  <br>
  <br>
  <label for="direccion">Dirección:</label>
  <br>
  <textarea placeholder="Escribe la dirección..." name="direccion" id=direccion rows="4" cols="30"></textarea>
  <br>
  <br>
  <label for="telefono">Teléfono:</label>
  <br>
  <input placeholder="Por ejemplo, 555 222 333" type="tel" name="telefono" id="telefono" />
  <br>
  <br>
  <button id="btnGuardar">Guardar</button>
  <button id="btnGuardarCambios">Guardar cambios</button>
  <button id="btnCancelarEdicion">Cancelar</button>
  <br />
  <br />
  <table>
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Dirección</th>
        <th>Teléfono</th>
        <th>Editar</th>
        <th>Eliminar</th>
      </tr>
    </thead>
    <tbody id="cuerpoTabla">

    </tbody>
  </table>
  <script src="script.js"></script>
</body>

</html>

## script.js
var bd = new PouchDB("agenda"),
  $nombreCompleto = document.querySelector("#nombreCompleto"),
  $direccion = document.querySelector("#direccion"),
  $telefono = document.querySelector("#telefono"),
  $btnGuardar = document.querySelector("#btnGuardar"),
  $btnGuardarCambios = document.querySelector("#btnGuardarCambios"),
  $btnCancelarEdicion = document.querySelector("#btnCancelarEdicion"),
  $cuerpoTabla = document.querySelector("#cuerpoTabla"),
  idTemporalContacto = null, //Variable global para referirnos al id del contacto editado
  revTemporalContacto = null; //Variable global para referirnos a la revisión del contacto editado


$btnGuardar.addEventListener("click", function() {
  var nombreCompleto = $nombreCompleto.value,
    direccion = $direccion.value,
    telefono = $telefono.value;

  if (nombreCompleto && direccion && telefono) {
    bd.post({
        nombre: nombreCompleto,
        direccion: direccion,
        telefono: telefono
      })
      .then(function(respuesta) {
        if (respuesta.ok) {
          consultarContactos();
          alert("Guardado correctamente");
          cancelarEdicion(); //Pequeño truco para limpiar el formulario
        }
      });
  }
});


$btnCancelarEdicion.addEventListener("click", function() {
  cancelarEdicion();
});

$btnGuardarCambios.addEventListener("click", function() {
  var nombreCompleto = $nombreCompleto.value,
    direccion = $direccion.value,
    telefono = $telefono.value;

  if (nombreCompleto && direccion && telefono) {
    bd.put({
        nombre: nombreCompleto,
        direccion: direccion,
        telefono: telefono,
        _id: idTemporalContacto,
        _rev: revTemporalContacto
      })
      .then(function(respuesta) {
        if (respuesta.ok) {
          consultarContactos();
          alert("Cambios guardados");
          cancelarEdicion();
        }
      });
  }
});


var prepararParaEditar = function() {
  $btnGuardar.style.display = "none";
  $btnGuardarCambios.style.display = "block";
  $btnCancelarEdicion.style.display = "block";

};

var cancelarEdicion = function() {
  $btnGuardar.style.display = "block";
  $btnGuardarCambios.style.display = "none";
  $btnCancelarEdicion.style.display = "none";

  $nombreCompleto.value = $direccion.value = $telefono.value = "";

  idTemporalContacto = null;
  revTemporalContacto = null;
};


var consultarContactos = function() {
  bd.allDocs({
    include_docs: true
  }).then(function(documentos) {
    var htmlCuerpoTabla = "";
    for (var i = 0; i < documentos.rows.length; i++) {
      var contacto = documentos.rows[i].doc;
      htmlCuerpoTabla += "<tr>";

      htmlCuerpoTabla += "<td>";
      htmlCuerpoTabla += contacto.nombre;
      htmlCuerpoTabla += "</td>";

      htmlCuerpoTabla += "<td>";
      htmlCuerpoTabla += contacto.direccion;
      htmlCuerpoTabla += "</td>";

      htmlCuerpoTabla += "<td>";
      htmlCuerpoTabla += contacto.telefono;
      htmlCuerpoTabla += "</td>";


      htmlCuerpoTabla += "<td>";
      htmlCuerpoTabla += "<button class='btn-editar' data-id-contacto='" + contacto._id + "'>Editar</button>";
      htmlCuerpoTabla += "</td>";

      //Nuevo botón
      htmlCuerpoTabla += "<td>";
      htmlCuerpoTabla += "<button class='btn-eliminar' data-id-contacto='" + contacto._id + "'>Eliminar</button>";
      htmlCuerpoTabla += "</td>";

      htmlCuerpoTabla += "</tr>";
    }

    $cuerpoTabla.innerHTML = htmlCuerpoTabla; //Asignar HTML concatenado


    //Una vez dibujados los botones, los escuchamos
    escucharBotonesEditar();
    escucharBotonesEliminar();

  });
};

var escucharBotonesEditar = function() {
  var botonesEditar = document.getElementsByClassName("btn-editar");
  for (var i = 0; i < botonesEditar.length; i++) {
    botonesEditar[i].addEventListener('click', editarContacto);
  }
};
var escucharBotonesEliminar = function() {
  var botonesEliminar = document.getElementsByClassName("btn-eliminar");
  for (var i = 0; i < botonesEliminar.length; i++) {
    botonesEliminar[i].addEventListener('click', eliminarContacto);
  }
};

var eliminarContacto = function() {

  //Detener si no se confirma
  if (!confirm("¿Seguro?")) return;

  var idContacto = this.dataset.idContacto;

  obtenerUnContacto(idContacto)
    .then(function(contacto) {
      return contacto;
    })
    .then(function(contacto) {
      return bd.remove(contacto).then(function(respuesta) {
        return respuesta;
      });
    })
    .then(function(respuesta) {
      if (respuesta.ok) {
        alert("Eliminado correctamente");
        consultarContactos();
      }
    });

};

var editarContacto = function() {
  // Acceder a data-id-contacto
  // Javascript remueve los guiones y el "data", luego
  // pone todos los datos en un objeto llamado dataset
  // y convierte dichos guiones a camelCase
  // Ejemplo: data-id-contacto => dataset.idContacto

  var idContacto = this.dataset.idContacto;
  obtenerUnContacto(idContacto).then(function(contacto) {

    //Ocultar y mostrar botones respectivos
    prepararParaEditar();

    $nombreCompleto.value = contacto.nombre;
    $direccion.value = contacto.direccion;
    $telefono.value = contacto.telefono;

    idTemporalContacto = contacto._id;
    revTemporalContacto = contacto._rev;
  });
};

var obtenerUnContacto = function(idContacto) {
  return bd.get(idContacto).then(function(contacto) {
    return contacto;
  });
};

//Por defecto, ocultar botones que sólo se muestran al editar
cancelarEdicion();

consultarContactos();

## style.css
table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}
	<!DOCTYPE html>
	<html>

	<head>
	<script src="http://cdn.jsdelivr.net/npm/pouchdb@6.4.1/dist/pouchdb.min.js"></script>
	<link rel="stylesheet" href="style.css" type="text/css" />
	</head>

	<body>
	<h1>Agenda con PouchDB</h1>
	<a target="_blank" href="https://www.parzibyte.me/blog">https://www.parzibyte.me/blog</a>
	<br />
	<label for="nombreCompleto">Nombre:</label>
	<br>
	<input placeholder="Nombre y apellidos" type="text" name="nombreCompleto" id="nombreCompleto" />
	<br>
	<br>
	<label for="direccion">Dirección:</label>
	<br>
	<textarea placeholder="Escribe la dirección..." name="direccion" id=direccion rows="4" cols="30"></textarea>
	<br>
	<br>
	<label for="telefono">Teléfono:</label>
	<br>
	<input placeholder="Por ejemplo, 555 222 333" type="tel" name="telefono" id="telefono" />
	<br>
	<br>
	<button id="btnGuardar">Guardar</button>
	<button id="btnGuardarCambios">Guardar cambios</button>
	<button id="btnCancelarEdicion">Cancelar</button>
	<br />
	<br />
	<table>
	<thead>
	<tr>
	<th>Nombre</th>
	<th>Dirección</th>
	<th>Teléfono</th>
	<th>Editar</th>
	<th>Eliminar</th>
	</tr>
	</thead>
	<tbody id="cuerpoTabla">

	</tbody>
	</table>
	<script src="script.js"></script>
	</body>

	</html>
	var bd = new PouchDB("agenda"),
	$nombreCompleto = document.querySelector("#nombreCompleto"),
	$direccion = document.querySelector("#direccion"),
	$telefono = document.querySelector("#telefono"),
	$btnGuardar = document.querySelector("#btnGuardar"),
	$btnGuardarCambios = document.querySelector("#btnGuardarCambios"),
	$btnCancelarEdicion = document.querySelector("#btnCancelarEdicion"),
	$cuerpoTabla = document.querySelector("#cuerpoTabla"),
	idTemporalContacto = null, //Variable global para referirnos al id del contacto editado
	revTemporalContacto = null; //Variable global para referirnos a la revisión del contacto editado





	$btnGuardar.addEventListener("click", function() {
	var nombreCompleto = $nombreCompleto.value,
	direccion = $direccion.value,
	telefono = $telefono.value;

	if (nombreCompleto && direccion && telefono) {
	bd.post({
	nombre: nombreCompleto,
	direccion: direccion,
	telefono: telefono
	})
	.then(function(respuesta) {
	if (respuesta.ok) {
	consultarContactos();
	alert("Guardado correctamente");
	cancelarEdicion(); //Pequeño truco para limpiar el formulario
	}
	});
	}
	});


	$btnCancelarEdicion.addEventListener("click", function() {
	cancelarEdicion();
	});

	$btnGuardarCambios.addEventListener("click", function() {
	var nombreCompleto = $nombreCompleto.value,
	direccion = $direccion.value,
	telefono = $telefono.value;

	if (nombreCompleto && direccion && telefono) {
	bd.put({
	nombre: nombreCompleto,
	direccion: direccion,
	telefono: telefono,
	_id: idTemporalContacto,
	_rev: revTemporalContacto
	})
	.then(function(respuesta) {
	if (respuesta.ok) {
	consultarContactos();
	alert("Cambios guardados");
	cancelarEdicion();
	}
	});
	}
	});


	var prepararParaEditar = function() {
	$btnGuardar.style.display = "none";
	$btnGuardarCambios.style.display = "block";
	$btnCancelarEdicion.style.display = "block";

	};

	var cancelarEdicion = function() {
	$btnGuardar.style.display = "block";
	$btnGuardarCambios.style.display = "none";
	$btnCancelarEdicion.style.display = "none";

	$nombreCompleto.value = $direccion.value = $telefono.value = "";

	idTemporalContacto = null;
	revTemporalContacto = null;
	};





	var consultarContactos = function() {
	bd.allDocs({
	include_docs: true
	}).then(function(documentos) {
	var htmlCuerpoTabla = "";
	for (var i = 0; i < documentos.rows.length; i++) {
	var contacto = documentos.rows[i].doc;
	htmlCuerpoTabla += "<tr>";

	htmlCuerpoTabla += "<td>";
	htmlCuerpoTabla += contacto.nombre;
	htmlCuerpoTabla += "</td>";

	htmlCuerpoTabla += "<td>";
	htmlCuerpoTabla += contacto.direccion;
	htmlCuerpoTabla += "</td>";

	htmlCuerpoTabla += "<td>";
	htmlCuerpoTabla += contacto.telefono;
	htmlCuerpoTabla += "</td>";


	htmlCuerpoTabla += "<td>";
	htmlCuerpoTabla += "<button class='btn-editar' data-id-contacto='" + contacto._id + "'>Editar</button>";
	htmlCuerpoTabla += "</td>";

	//Nuevo botón
	htmlCuerpoTabla += "<td>";
	htmlCuerpoTabla += "<button class='btn-eliminar' data-id-contacto='" + contacto._id + "'>Eliminar</button>";
	htmlCuerpoTabla += "</td>";

	htmlCuerpoTabla += "</tr>";
	}

	$cuerpoTabla.innerHTML = htmlCuerpoTabla; //Asignar HTML concatenado


	//Una vez dibujados los botones, los escuchamos
	escucharBotonesEditar();
	escucharBotonesEliminar();

	});
	};

	var escucharBotonesEditar = function() {
	var botonesEditar = document.getElementsByClassName("btn-editar");
	for (var i = 0; i < botonesEditar.length; i++) {
	botonesEditar[i].addEventListener('click', editarContacto);
	}
	};
	var escucharBotonesEliminar = function() {
	var botonesEliminar = document.getElementsByClassName("btn-eliminar");
	for (var i = 0; i < botonesEliminar.length; i++) {
	botonesEliminar[i].addEventListener('click', eliminarContacto);
	}
	};

	var eliminarContacto = function() {

	//Detener si no se confirma
	if (!confirm("¿Seguro?")) return;

	var idContacto = this.dataset.idContacto;

	obtenerUnContacto(idContacto)
	.then(function(contacto) {
	return contacto;
	})
	.then(function(contacto) {
	return bd.remove(contacto).then(function(respuesta) {
	return respuesta;
	});
	})
	.then(function(respuesta) {
	if (respuesta.ok) {
	alert("Eliminado correctamente");
	consultarContactos();
	}
	});

	};

	var editarContacto = function() {
	// Acceder a data-id-contacto
	// Javascript remueve los guiones y el "data", luego
	// pone todos los datos en un objeto llamado dataset
	// y convierte dichos guiones a camelCase
	// Ejemplo: data-id-contacto => dataset.idContacto

	var idContacto = this.dataset.idContacto;
	obtenerUnContacto(idContacto).then(function(contacto) {

	//Ocultar y mostrar botones respectivos
	prepararParaEditar();

	$nombreCompleto.value = contacto.nombre;
	$direccion.value = contacto.direccion;
	$telefono.value = contacto.telefono;

	idTemporalContacto = contacto._id;
	revTemporalContacto = contacto._rev;
	});
	};

	var obtenerUnContacto = function(idContacto) {
	return bd.get(idContacto).then(function(contacto) {
	return contacto;
	});
	};

	//Por defecto, ocultar botones que sólo se muestran al editar
	cancelarEdicion();

	consultarContactos();
	table {
	border-collapse: collapse;
	}

	table,
	th,
	td {
	border: 1px solid black;
	}