Este artículo se enfoca en desarrollar una lista de tareas pendientes con algunas características básicas como:
- Agregar tarea
- Eliminar tarea
- Cruzar las tareas completadas
Prerrequisitos:
Conocimiento básico de desarrollo Front-end usando HTML, CSS, JS, jQuery y Bootstrap-3.
Pasos:
- Inicialice el diseño:
– Agregue un cuadro de texto de entrada con un botón para agregar las tareas a la lista principal.
– Estableceremos el contenedor que contiene lo anterior como fijo en el botón usando alguna propiedad fija de posición CSS.
– Ahora agregaremos el contenedor donde se agregarán las tareas.A continuación se muestra el código junto con la explicación de lo anterior:
<!-- Initialize the layout --><!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"/><!-- Required CDN's --><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script>integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script><style>.container {width: 90%;height: auto;}.foot {position: fixed;left: 10%;bottom: 0;width: 80%;text-align: center;}</style></head><body><center><divclass="foot"><divclass="row"><divclass="col-sm-1"> </div><divclass="col-sm-10"><!-- Input for tasks --><divclass="input-group"><inputtype="text"class="form-control"placeholder="Add Task"id="text"><divclass="input-group-btn"><buttonclass="btn btn-success"><iclass="glyphicon glyphicon-plus"></i></button></div></div><br><br></div></div></div><!-- Rest of the screen used for Adding Tasks --><br><h2class="text text-success">My Tasks:</h2><br><divclass="container"><!-- For adding tasks to the list --></div></center></body></html> - Script jQuery para agregar tareas:
Ahora agregaremos el código jQuery para que podamos agregar tareas en nuestra lista de tareas pendientes. Aquí hemos usado la clase de alerta Bootstrap para agregar contenedores de tareas.- Al hacer clic en el botón cruzado a la derecha de la tarea, se eliminará la tarea de forma permanente.
( la alerta tiene un atributo para eso, de lo contrario, también tendríamos que implementar un script para eliminar).
A continuación se muestra el código junto con la explicación de lo anterior:
<!-- Adding tasks in the list --><!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"/><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script>integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script><style>.container {width: 80%;height: auto;}.foot {position: fixed;left: 10%;bottom: 0;width: 80%;text-align: center;}</style></head><body><center><divclass="foot"><divclass="row"><divclass="col-sm-1"> </div><divclass="col-sm-10"><!-- Input for tasks --><divclass="input-group"><inputtype="text"class="form-control"placeholder="Add Task"id="text"><divclass="input-group-btn"><buttonclass="btn btn-success"><iclass="glyphicon glyphicon-plus"></i></button></div></div><br><br></div></div></div><br><h2class="text text-success">My Tasks:</h2><br><divclass="container"></div></center><script>$(document).ready(function() {$('.btn-success').click(function() {// If something is writtenif ($('#text').val().length != 0) {//Store previous datavar x = $('.container').html();// Add typed text in alert containervar y =`<divclass="alert alert-success alert-dismissible fade in"><ahref="#"class="close"data-dismiss="alert"aria-label="close">×</a>` + $('#text').val() + `</div>`;//Update$('.container').html(y + x);//Clear after addition$('#text').val("");} else alert("Enter some Text!");});});</script></body></html> - Al hacer clic en el botón cruzado a la derecha de la tarea, se eliminará la tarea de forma permanente.
- Secuencia de comandos para indicar tareas completadas:
Finalmente, agregaremos la secuencia de comandos para implementar la función de que cada vez que hagamos clic en la tarea, se cruzará y, si ya se ha hecho, se restaurará.
Para cruzar la tarea, usaremos la propiedad text-decoration-line : line-through en CSS.
Solución final:
<!-- To-Do List implemented using jQuery -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity=
"sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<style>
.container {
width: 80%;
height: auto;
}
.foot {
position: fixed;
left: 10%;
bottom: 0;
width: 80%;
text-align: center;
}
</style>
</head>
<body>
<center>
<div class="foot">
<div class="row">
<div class="col-sm-1"> </div>
<div class="col-sm-10">
<!-- Input for tasks -->
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Add Task"
id="text">
<div class="input-group-btn">
<button class="btn btn-success">
<i class="glyphicon glyphicon-plus">
</i></button>
</div>
</div>
<br>
<br>
</div>
</div>
</div>
<br>
<h2 class="text text-success">My Tasks:</h2>
<br>
<div class="container">
</div>
</center>
<script>
$(document).ready(function() {
$('.btn-success').click(function() {
if ($('#text').val().length != 0) {
var x = $('.container').html();
var y =
`<div class="alert alert-success alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
` + $('#text').val() + `</div>`;
$('.container').html(y + x);
$('#text').val("");
} else alert("Enter some Text!");
});
// When Task is clicked
$(document).on('click', '.alert', function() {
if ($(this).css('text-decoration-line') == "none")
$(this).css('text-decoration-line', 'line-through');
else
$(this).css('text-decoration-line', 'none');
});
});
</script>
</body>
</html>
Salida:
Antes de agregar las tareas: 
Después de agregar las tareas:
Publicación traducida automáticamente
Artículo escrito por devproductify y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA