En este tutorial crearemos una Lista de tareas pendientes usando JavaScript. Este código le permitirá organizar su tarea enviando las entradas del formulario. La función onclick () del usuario de código que llama a un método específico que agregará una nueva lista mediante el uso de la notación de puntos push (). Este tipo de código fácil de usar no dude en modificarlo y usarlo como propio.

Usaremos JavaScript para agregar alguna característica nueva a la interfaz del sitio web al escribirla en una página HTML. Es lo que le da a su página diferentes elementos interactivos y animaciones que atraen al usuario.

Empezando:
Este es el enlace para la rutina de carga que utilicé para el diseño del diseño https://getbootstrap.com/.

La interfaz principal
Este código contiene la interfaz de la aplicación. Para crear esto simplemente escriba este bloque de código dentro del editor de texto y guárdelo como index.html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  </head>
<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <a class="navbar-brand" href="https://compubinario.com">CompuBinario</a>
    </div>
  </nav>
  <div class="col-md-3"></div>
  <div class="col-md-6 well">
    <h3 class="text-primary">Código Fuente para una Lista de Tareas en Javascript</h3>
    <hr style="border-top:1px dotted #ccc;"/>
    <div class="form-inline">
      <label>Agregar Lista</label>
      <br />
      <input type="text" id="list" class="form-control"/>
      <button class="btn btn-success" onclick="addList()">Agregar</button>
    </div>
    <div class="col-md-6">
    <h3 class="text-primary">Mi Lista</h3>
    <ul class="list-group" id="result" style="word-wrap:break-word;"/></ul>
    </div>
  </div>
</body>
<script src="js/script.js"></script>
</html>

Creando el Script
Este código contiene el script de la aplicación. Este código puede agregar su tarea cuando se hace clic en el botón. Para hacerlo, simplemente copie y escriba estos bloques de códigos como se muestra a continuación dentro del editor de texto y guárdelo como script.js dentro de la carpeta js.

var items = document.getElementById('list');
var lists = []

function addList(){
  var list = document.getElementById('list');
  var val = list.value;
  if(val == ""){
    alert("Por Favor Ingrese la Lista primero!");
  }else{
    lists.push(val.trim());
    list.value = '';
    displayList();
  }
  
}

function displayList(){
  var data = '';
  if(lists.length > 0){
    for(var i=0; i < lists.length; i++){
      data += "<li class='list-group-item'><button class='pull-right' onclick='removeList("+i+")'><span class='glyphicon glyphicon-trash'></span></button>"+lists[i]+"</li>";
    }
  }
  
  document.getElementById('result').innerHTML = data;
}

function removeList(list){
  lists.splice(list, 1);
  displayList();
}

Ahí lo tienes, creamos con éxito una Lista de tareas con JavaScript. Espero que este sencillo tutorial te ayude a lo que estás buscando.

Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube: