Una vez más aquí. Hoy vengo a dejar un pequeño artículo que tenía pensado publicar hace ya unas cuantas semanas, pero por una cosa u otra, el tiempo se me pasó. Por eso vengo a solventarlo, y en las siguiente líneas vamos a ver cómo se puede crear una lista de cosas que hacer usando HTML, CSS y jQuery. Esto supongo que se puede ver como la típica lista de tareas pendientes, que todos tenemos en algún sitio.
Con esta sencilla aplicación web, cualquiera podrá administrar sus tareas pendientes, la cual puede ser de ayuda a la hora de mantenernos organizados y administrar mejor nuestro día. Con ella, cualquiera puede añadir las cosas que tiene que hacer durante el día. Tras finalizar las tareas, tan solo será necesario eliminar ese elemento de la lista.
Un vistazo rápido a la lista de cosas que hacer
Como puede ver en la siguiente imagen, el diseño de esta lista de cosas que hacer es minimalista. En la aplicación encontraremos un campo en el que veremos la lista de tareas pendientes, otro en el que se situará la entrada para insertar elementos a la lista y un botón para añadirlos. Cuando el usuario escriba algo y pulse el botón «Añadir«, el elemento se agregará a la lista y será visible.
Al pasar el cursor por encima de alguno de los elementos, aparecerá un icono de papelera. Si se hace clic sobre este, el elemento asociado se eliminará de la lista.
Si quieres ver ver este sencillo ejemplo funcionando, antes de probarlo en tu equipo, tan solo tendrás que seguir el siguiente enlace.
Lista de cosas que hacer. El código necesario
Para crear este miniprograma de lista de cosas que hacer, tan solo serán necesarios dos archivos. El primero de ellos será un archivo HTML y otro es CSS. Después de crear estos archivos, los cuales deben guardarse dentro de la misma carpeta, simplemente será necesario pegar los siguientes códigos dentro del correspondiente archivo.
Archivo index.html
Como decíamos, el primero de los archivos a crear será un archivo HTML. Le vamos a dar el nombre de index.html, y dentro solo será necesario pegar el siguiente código.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Que-hacer</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
</head>
<body>
<div class="envoltura">
<div class="titulo">QUE-HACER</div>
<div class="boton">
<span class="text">No te olvides de...</span>
<span class="icono"><i class="fas fa-caret-square-down" title="Desplegar"></i></span>
</div>
<div class="desplegable"> <!-- desplegable y botón añadir más -->
<input type="text" required placeholder="Añadir cosas para hacer" />
<span class="add-btn">AÑADIR</span>
</div>
<ul> <!-- listado de tareas por defecto -->
<li>
<span><i class="fa fa-trash-alt" title="Borrar"></i></span>Pensar en un tema para un artículo
</li>
<li>
<span><i class="fa fa-trash-alt" title="Borrar"></i></span>Escribir el código del ejemplo
</li>
<li>
<span><i class="fa fa-trash-alt" title="Borrar"></i></span>Escribir el artículo
</li>
<li>
<span><i class="fa fa-trash-alt" title="Borrar"></i></span>Subir el ejemplo al servidor
</li>
<li>
<span><i class="fa fa-trash-alt" title="Borrar"></i></span>Publicar el artículo
</li>
</ul>
</div>
<script>
// añadir nueva tarea
$(".add-btn").click(function () {
$("ul").append(
"<li><span><i class='fa fa-trash-alt' title='Borrar'></i></span>" +
$("input").val() +
"</li>"
);
$("input").val("");
});
// borrar tarea
$("ul").on("click", "span", function () {
$(this)
.parent()
.fadeOut(500, function () {
$(this).remove();
});
});
// esconder icono de la papelera
$(".icono").click(function () {
$(".desplegable").toggleClass("hide");
});
</script>
</body>
</html>
Como se puede ver en el código anterior, encontraremos algunas tareas pendientes definidas por defecto. Estas serán las que se van a ver cada vez que abramos la aplicación o refresquemos la página. Pero se pueden cambiar sin ningún problema, o se pueden directamente eliminar.
Archivo style.css
En segundo lugar, vamos a crear un archivo CSS con el nombre de style.css. Dentro no hay más que pegar las siguientes reglas CSS. Con ellas le daremos estilo a nuestra lista de cosas para hacer.
* {
margin: 0;
padding: 0;
color: #f2f2f2;
box-sizing: border-box;
}
/* envoltura */
.envoltura {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
background: #1b1b1b;
border-radius: 5px;
box-shadow: 0px 10px 15px rgb(0, 0, 0);
}
.envoltura .boton {
width: 350px;
background: #000000;
height: 50px;
padding: 0 20px;
border-radius: 5px 5px 0 0;
}
.envoltura .desplegable {
height: 45px;
width: 350px;
background: #f2f2f2;
position: relative;
display: block;
}
.envoltura ul {
list-style: none;
overflow: hidden;
}
/* botón */
.boton .text {
font-size: 25px;
font-weight: 600;
line-height: 50px;
letter-spacing: 1px;
font-family: "Open Sans", sans-serif;
}
.boton .icono {
font-size: 25px;
float: right;
line-height: 40px;
cursor: pointer;
margin-top: 5px;
}
/* desplegable */
.desplegable.hide {
display: none;
}
.desplegable input {
height: 100%;
width: 100%;
padding-left: 15px;
font-size: 18px;
outline: none;
background: none;
color: #202020;
border: 2px solid #1b1b1b;
}
.desplegable .add-btn {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background: #666;
font-size: 17px;
padding: 4px 8px;
border-radius: 3px;
cursor: pointer;
font-family: sans-serif;
display: none;
}
.desplegable .add-btn:hover {
background: #fff;
color: #000;
border: 1px solid #000;
}
/* botón añadir */
input:valid~.add-btn {
display: block;
}
/* listado */
ul li {
height: 45px;
width: 100%;
line-height: 45px;
background: #333;
font-family: "Noto Sans", sans-serif;
}
ul li:nth-child(2n) {
background: #1b1b1b;
}
ul li:last-child {
border-radius: 0 0 5px 5px;
}
ul li:last-child span {
border-radius: 0 5px 5px 5px;
}
ul li span {
margin-right: 20px;
height: 45px;
width: 45px;
margin-left: -45px;
background: #f71900;
display: inline-block;
line-height: 45px;
text-align: center;
cursor: pointer;
border-radius: 0 5px 5px 0;
transition: 0.3s ease;
}
ul li:hover span {
margin-left: 0px;
}
/*Título*/
.titulo {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
border: none;
font: normal 38px / normal "Warnes", Helvetica, sans-serif;
color: rgba(255, 255, 255, 1);
text-decoration: normal;
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
white-space: pre;
text-shadow: 0 0 10px rgb(255, 0, 0), 0 0 20px rgba(255, 0, 0),
0 0 30px rgba(255, 0, 0), 0 0 40px #727272, 0 0 70px #727272,
0 0 80px #4e4e4e, 0 0 100px #2b2b2b;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
width: 100%;
margin-top: 10px;
}
.titulo:hover {
text-shadow: 0 0 10px rgb(27, 27, 27), 0 0 20px rgba(27, 27, 27),
0 0 30px rgba(27, 27, 27), 0 0 40px #000000, 0 0 70px #000000,
0 0 80px #000000, 0 0 100px #000000;
}
Y con solo lo que acabamos de ver, tendremos creado con éxito una mínima aplicación web para realizar una lista de cosas que hacer, utilizando tan solo HTML, un poco de jQuery y CSS.
Hay que decir que la aplicación no va a guardar las tareas que añadamos indefinidamente. Por eso cuando cerremos el navegador o refresquemos la página, perderemos las cosas que tengamos apuntadas, y volverán a mostrarse las que están puestas por defecto. Pero si quieres que las cosas que tengas apuntadas persistan en el tiempo, siempre se le puede añadir una conexión a una base de datos, etc…