¿Cómo crear una lista de tareas pendientes con jQuery?

Este artículo se enfoca en desarrollar una lista de tareas pendientes con algunas características básicas como:

  1. Agregar tarea
  2. Eliminar tarea
  3. Cruzar las tareas completadas

Prerrequisitos:
Conocimiento básico de desarrollo Front-end usando HTML, CSS, JS, jQuery y Bootstrap-3.

Pasos:

  1. 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>
    <html lang="en">
      
    <head>
        <meta charset="utf-8" />
        <!-- Required CDN's -->
        <link rel="stylesheet"
              href=
        <script src=
      </script>
        <script src=
      </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>
      
            <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>
      
            <!-- Rest of the screen used for Adding Tasks -->
            <br>
            <h2 class="text text-success">My Tasks:</h2>
            <br>
      
            <div class="container">
                <!-- For adding tasks to the list -->
            </div>
      
        </center>
    </body>
      
    </html>
  2. 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>
    <html lang="en">
      
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet"
              href=
        <script src=
      </script>
        <script src=
      </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>
      
            <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 something is written
                    if ($('#text').val().length != 0) {
                        //Store previous data
                        var x = $('.container').html();
      
                        // Add typed text in alert container
                        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>`;
      
                        //Update
                        $('.container').html(y + x);
                        //Clear after addition
                        $('#text').val("");
                    } else alert("Enter some Text!");
                });
            });
        </script>
    </body>
      
    </html>
  3. 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *