Node.js / Mejorando la pagina de borrado

Bienvenidos sean a este post, hoy veremos la ultima modificacion de nuestra aplicacion Notas.

Si vienen de los posts anteriores ya hemos mejorado en muchos aspectos a nuestra aplicacion Notas y hoy nos centraremos en la ultima accion que nos falta como es el borrado de las notas, para ello necesitaremos el codigo del post anterior, en caso de no tenerlo les dejo un link para descargar un archivo con todo el contenido:

Una vez descargado simplemente extraigan el directorio en el PC y ya tienen la aplicacion lista para usarse, nuestro primer paso sera ir al archivo borrarnota.hbs en el directorio views y modificaremos el codigo existente de la siguiente manera:

views/borrarnota.hbs

<form method='POST' action='/notas/borrar/confirmar'>
  <div class="container-fluid">
    <input type='hidden' name='clavenota'
        value='{{#if nota}}{{clavenota}}{{/if}}'>
    <p class="form-text">¿ Borrar {{nota.titulo}} ?</p>
    <div class="btn-group">
        <button type="submit" value="Borrar"
                class="btn btn-outline-dark">Borrar</button>
        <a class="btn btn-outline-dark"
                href="/notas/ver?clave={{#if nota}}{{clavenota}}{{/if}}"
                role="button">Cancelar</a>
    </div>
  </div>
</form>

Si siguieron todas estas modificaciones en los posts anteriores notaran que solamente agregamos los div para contener todos los elementos y dar un mejor formato, el primero es justamente para eso, al parrafo (<p>) solamente le aplicamos una clase para que este mas en contexto con el formulario y a la hora de las acciones usamos para agruparlos como botones, donde modificamos el primero donde el lugar de usar un input usamos un button con un nuevo estilo y el link para cancelar lo convertimos en un boton muy similar al anterior y le asignamos ese rol, con esto tenemos modificada la pagina, veamos como se ve ahora

Como pueden ver ahora tenemos otro estilo comparado con el anterior, especialmente en el tema de los botones, pero esto lo podemos mejorar un poco mas y para ello debemos ir al archivo notas.mjs en el directorio routes y tomaremos este bloque de coddigo:

router.get('/borrar', async(req, res, next) => {
        try {
          let nota = await notas.read(req.query.clave);
          res.render('borrarnota', {
                title: nota ? nota.titulo : "",
                clavenota: req.query.clave,
                nota: nota
          });
        } catch(err) { next(err); }
});

Y lo modificaremos de la siguiente manera:

router.get('/borrar', async(req, res, next) => {
        try {
          let nota = await notas.read(req.query.clave);
          res.render('borrarnota', {
                title: nota ? `Borrar ${nota.titulo}` : "",
                clavenota: req.query.clave,
                nota: nota
          });
        } catch(err) { next(err); }
});

La unica modificacion es la resaltada, donde cambiamos como mostrara el titulo de la pagina de borrado cada vez que sea utilizada, con esto comentado veamos como trabaja ahora mediante el siguiente video

Con esto ya tenemos nuestra aplicacion completamente modificada para tener un mejor aspecto sin importar el dispositivo que utilicemos esta se adaptara al mismo, priorizando a los dispositivos moviles, antes de finalizar les dejo un archivo con todos los codigos del proyecto y los modificados en este post:

En resumen, hoy hemos modificado la pagina de eliminacion de notas, al igual que en posts anteriores simplemente fue algo estetico para que se adapte de mejor forma a cualquier dispositivo desde el cual abramos la aplicacion, espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.