Skip to main content
se añadieron 26 caracteres en el cuerpo
Origen Enlace
if (!localStorage.getItem('checklist'))
           localStorage.setItem('checklist', "");
var checklist = []
for (var i = 0; i < lista.children.length; i++) {
            checklist.innerHTML = lista.children[i]
          }
console.log(checklist);
document.addEventListener('DOMContentLoaded', () => {

  //Asignación variables
  var lista = document.getElementById("lista"),
    tarea = document.getElementById("tarea"), //input
    agregar = document.getElementById("agregar"); //button

  if (!localStorage.getItem('checklist'))
           localStorage.setItem('checklist', "");
  var checklist = []
  //  Funciones
  var agregarTarea = function() {
    var tarea = document.getElementById("tarea").value,
      nuevaTarea = document.createElement("li"),
      enlace = document.createElement("a"),
      hr = document.createElement("hr"),
      contenido = document.createTextNode(tarea); // crea un elemento con tarea como texto

    enlace.appendChild(contenido); //agregar el valor del input a enlace
    enlace.setAttribute("href", "#"); //añadimos la propiedad a enlace.
    enlace.style.color = "black";
    nuevaTarea.appendChild(enlace);
    lista.appendChild(nuevaTarea); //por ultimo, agregamos nueva Tarea (valor del input) a lista (contenedor)
    lista.appendChild(hr);
    document.querySelector('#tarea').value = '';

     for (var i = 0; i < lista.children.length; i++) {
            checklist.innerHTML = lista.children[i]
          }
     
        console.log(checklist);
  };


  //Eventos
  agregar.addEventListener("click", agregarTarea);

});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Checklist con javascript</title>
</head>

<body>
  <div class="container">
    <div class="container bg-danger py-3">
      <h1 class="text-center text-capitalize text-white font-weight-bold"> lista de tareas con javascript</h1>
      <div class="container">
        <form action="#" class="">
          <div class="form-group mt-5">
            <input type="text" id="tarea" class="form-control text-center py-2" placeholder="Agrega una tarea a la lista." autofocus autocomplete="off">
          </div>
          <div class="form-group">
            <button type="submit" id="agregar" class="btn btn-outline-warning  btn-block btn-lg">Agregar Tarea</button>
          </div>
        </form>
      </div>
    </div>
    <!--separacion -->
    <hr class="font-weight-bold bg-warning">
    <!--endbeparacion -->

    <!--lista-->
    <div class="container" id="tareas">
      <div class="title bg-warning my-5 py-3">
        <h2 class="text-center text-danger">Tareas a Realizar</h2>
      </div>
      <ol id="lista" class="text-center text-capitalize ">
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, fugit.</a></li>
        <hr class="font-weight-bold mb-3">
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, fugit.</a></li>
        <hr class="font-weight-bold mb-3">
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, adipisci!</a></li>
        <hr class="font-weight-bold mb-3">
      </ol>

    </div>
    <!--endlista-->
  </div>
  <script src="js\checklist.js"></script>
</body>

</html>
if (!localStorage.getItem('checklist'))
           localStorage.setItem('checklist', "");
var checklist = []
for (var i = 0; i < lista.children.length; i++) {
            checklist.innerHTML = lista.children[i]
          }
console.log(checklist);
document.addEventListener('DOMContentLoaded', () => {

  //Asignación variables
  var lista = document.getElementById("lista"),
    tarea = document.getElementById("tarea"), //input
    agregar = document.getElementById("agregar"); //button


  //  Funciones
  var agregarTarea = function() {
    var tarea = document.getElementById("tarea").value,
      nuevaTarea = document.createElement("li"),
      enlace = document.createElement("a"),
      hr = document.createElement("hr"),
      contenido = document.createTextNode(tarea); // crea un elemento con tarea como texto

    enlace.appendChild(contenido); //agregar el valor del input a enlace
    enlace.setAttribute("href", "#"); //añadimos la propiedad a enlace.
    enlace.style.color = "black";
    nuevaTarea.appendChild(enlace);
    lista.appendChild(nuevaTarea); //por ultimo, agregamos nueva Tarea (valor del input) a lista (contenedor)
    lista.appendChild(hr);
    document.querySelector('#tarea').value = '';

  };


  //Eventos
  agregar.addEventListener("click", agregarTarea);

});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Checklist con javascript</title>
</head>

<body>
  <div class="container">
    <div class="container bg-danger py-3">
      <h1 class="text-center text-capitalize text-white font-weight-bold"> lista de tareas con javascript</h1>
      <div class="container">
        <form action="#" class="">
          <div class="form-group mt-5">
            <input type="text" id="tarea" class="form-control text-center py-2" placeholder="Agrega una tarea a la lista." autofocus autocomplete="off">
          </div>
          <div class="form-group">
            <button type="submit" id="agregar" class="btn btn-outline-warning  btn-block btn-lg">Agregar Tarea</button>
          </div>
        </form>
      </div>
    </div>
    <!--separacion -->
    <hr class="font-weight-bold bg-warning">
    <!--endbeparacion -->

    <!--lista-->
    <div class="container" id="tareas">
      <div class="title bg-warning my-5 py-3">
        <h2 class="text-center text-danger">Tareas a Realizar</h2>
      </div>
      <ol id="lista" class="text-center text-capitalize ">
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, fugit.</a></li>
        <hr class="font-weight-bold mb-3">
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, fugit.</a></li>
        <hr class="font-weight-bold mb-3">
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, adipisci!</a></li>
        <hr class="font-weight-bold mb-3">
      </ol>

    </div>
    <!--endlista-->
  </div>
  <script src="js\checklist.js"></script>
</body>

</html>
document.addEventListener('DOMContentLoaded', () => {

  //Asignación variables
  var lista = document.getElementById("lista"),
    tarea = document.getElementById("tarea"), //input
    agregar = document.getElementById("agregar"); //button

  if (!localStorage.getItem('checklist'))
           localStorage.setItem('checklist', "");
  var checklist = []
  //  Funciones
  var agregarTarea = function() {
    var tarea = document.getElementById("tarea").value,
      nuevaTarea = document.createElement("li"),
      enlace = document.createElement("a"),
      hr = document.createElement("hr"),
      contenido = document.createTextNode(tarea); // crea un elemento con tarea como texto

    enlace.appendChild(contenido); //agregar el valor del input a enlace
    enlace.setAttribute("href", "#"); //añadimos la propiedad a enlace.
    enlace.style.color = "black";
    nuevaTarea.appendChild(enlace);
    lista.appendChild(nuevaTarea); //por ultimo, agregamos nueva Tarea (valor del input) a lista (contenedor)
    lista.appendChild(hr);
    document.querySelector('#tarea').value = '';

     for (var i = 0; i < lista.children.length; i++) {
            checklist.innerHTML = lista.children[i]
          }
     
        console.log(checklist);
  };


  //Eventos
  agregar.addEventListener("click", agregarTarea);

});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Checklist con javascript</title>
</head>

<body>
  <div class="container">
    <div class="container bg-danger py-3">
      <h1 class="text-center text-capitalize text-white font-weight-bold"> lista de tareas con javascript</h1>
      <div class="container">
        <form action="#" class="">
          <div class="form-group mt-5">
            <input type="text" id="tarea" class="form-control text-center py-2" placeholder="Agrega una tarea a la lista." autofocus autocomplete="off">
          </div>
          <div class="form-group">
            <button type="submit" id="agregar" class="btn btn-outline-warning  btn-block btn-lg">Agregar Tarea</button>
          </div>
        </form>
      </div>
    </div>
    <!--separacion -->
    <hr class="font-weight-bold bg-warning">
    <!--endbeparacion -->

    <!--lista-->
    <div class="container" id="tareas">
      <div class="title bg-warning my-5 py-3">
        <h2 class="text-center text-danger">Tareas a Realizar</h2>
      </div>
      <ol id="lista" class="text-center text-capitalize ">
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, fugit.</a></li>
        <hr class="font-weight-bold mb-3">
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, fugit.</a></li>
        <hr class="font-weight-bold mb-3">
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, adipisci!</a></li>
        <hr class="font-weight-bold mb-3">
      </ol>

    </div>
    <!--endlista-->
  </div>
  <script src="js\checklist.js"></script>
</body>

</html>
se eliminaron 3 caracteres en el cuerpo
Origen Enlace
user128299
user128299

Estoy trabajando con un ejemplo de @falconmater:este http://www.falconmasters.com/javascript/app-lista-tareas-javascript/ejemplo el cual es una aplicacionaplicación en JavaScript que crea tareas en forma de listas.

Estoy trabajando con un ejemplo de @falconmater:http://www.falconmasters.com/javascript/app-lista-tareas-javascript/ es una aplicacion en JavaScript que crea tareas en forma de listas.

Estoy trabajando con este ejemplo el cual es una aplicación en JavaScript que crea tareas en forma de listas.

Origen Enlace

crear y asignar una lista a LocalStorage

Estoy trabajando con un ejemplo de @falconmater:http://www.falconmasters.com/javascript/app-lista-tareas-javascript/ es una aplicacion en JavaScript que crea tareas en forma de listas.

Dentro de la funcion agreagar Tarea , quiero implementar localstorage. pero no consigo que funcione, creo la variable llamada checklist y una lista vacia.

if (!localStorage.getItem('checklist'))
           localStorage.setItem('checklist', "");
var checklist = []

despues de crear el elemento lista, hago un bucle para insertar en mi lista vacia los elemento que boy añadiendo div id="tareas"luego quiero imprimir la lista checklist. Pero no lo consigo.

for (var i = 0; i < lista.children.length; i++) {
            checklist.innerHTML = lista.children[i]
          }

imprimo checklist

console.log(checklist);

este es mi codigo.

document.addEventListener('DOMContentLoaded', () => {

  //Asignación variables
  var lista = document.getElementById("lista"),
    tarea = document.getElementById("tarea"), //input
    agregar = document.getElementById("agregar"); //button


  //  Funciones
  var agregarTarea = function() {
    var tarea = document.getElementById("tarea").value,
      nuevaTarea = document.createElement("li"),
      enlace = document.createElement("a"),
      hr = document.createElement("hr"),
      contenido = document.createTextNode(tarea); // crea un elemento con tarea como texto

    enlace.appendChild(contenido); //agregar el valor del input a enlace
    enlace.setAttribute("href", "#"); //añadimos la propiedad a enlace.
    enlace.style.color = "black";
    nuevaTarea.appendChild(enlace);
    lista.appendChild(nuevaTarea); //por ultimo, agregamos nueva Tarea (valor del input) a lista (contenedor)
    lista.appendChild(hr);
    document.querySelector('#tarea').value = '';

  };


  //Eventos
  agregar.addEventListener("click", agregarTarea);

});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Checklist con javascript</title>
</head>

<body>
  <div class="container">
    <div class="container bg-danger py-3">
      <h1 class="text-center text-capitalize text-white font-weight-bold"> lista de tareas con javascript</h1>
      <div class="container">
        <form action="#" class="">
          <div class="form-group mt-5">
            <input type="text" id="tarea" class="form-control text-center py-2" placeholder="Agrega una tarea a la lista." autofocus autocomplete="off">
          </div>
          <div class="form-group">
            <button type="submit" id="agregar" class="btn btn-outline-warning  btn-block btn-lg">Agregar Tarea</button>
          </div>
        </form>
      </div>
    </div>
    <!--separacion -->
    <hr class="font-weight-bold bg-warning">
    <!--endbeparacion -->

    <!--lista-->
    <div class="container" id="tareas">
      <div class="title bg-warning my-5 py-3">
        <h2 class="text-center text-danger">Tareas a Realizar</h2>
      </div>
      <ol id="lista" class="text-center text-capitalize ">
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, fugit.</a></li>
        <hr class="font-weight-bold mb-3">
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, fugit.</a></li>
        <hr class="font-weight-bold mb-3">
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, adipisci!</a></li>
        <hr class="font-weight-bold mb-3">
      </ol>

    </div>
    <!--endlista-->
  </div>
  <script src="js\checklist.js"></script>
</body>

</html>

Agradesco que me ayuden o me digan como puedo asignar los elementos que se crean a la lista y almacenarlo a la variable localstorage('checklist'). Gracias