0

Tengo una duda en cómo crear divs para insertar cards de Bootstrap; dependiendo del status se acomoda dentro del div correspondiente.

Lo que busco es que las tarjetas se dividan por divs como están en la imagen de abajo, esto al presionar el botón correspondiente a su status.

Este es el código usado, uso localstorage también.

Código HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Gestor de Tareas V1</title>
    <!-- BOOTSTRAP 4 THEME -->
    <link rel="stylesheet" href="bootstrap.min.css">
  </head>
  <body>

    <!-- NAVIGATION -->
    <nav class="navbar navbar-dark bg-primary">
      <div class="container">
        <a class="navbar-brand">Gestor de Tareas</a>
      </div>
    </nav>

    <div class="container">
      <div>
        <br>
        <center>
          <div class="col-md-4">
            <div class="card bg-primary">
              <div class="card-body">
                <!-- FORM TO ADD TASKS -->
                <h5>Notas</h5>
                <form id="formTask">
                  <div class="form-group">
                    <input type="text" id="title" placeholder="Responsable" class="form-control">
                  </div>
                  <div class="form-group">
                    <textarea id="description" cols="30" rows="10" placeholder="Descripcion de la Tarea" class="form-control"></textarea>
                  </div>
                  <button type="submit" class="btn btn-secondary btn-block">Agregar</button>
                </form>
              </div>
            </div>
            <br>
          </div>
        </center>
      </div>
      <div>
          <center><h5>Estatus</h5></center>
          <br>
          <!--<div class="row">-->
            <div id="tasks"></div>
          <!--</div>-->
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Código JS

parte1: muestra cómo guardo las tarjetas en el local storage

document.getElementById('formTask').addEventListener('submit', saveTask);

//funcion guardar Tarea
function saveTask(e) {

  let title = document.getElementById('title').value;
  let description = document.getElementById('description').value;
  let status = "sin asignar";

  if ((title === "")) {
    window.alert("no se agrego responsable en la nota de tarea");
  }
  else if (description === "") {
    window.alert("no se agrego descripcion en la nota de tarea");
  } else {
    let task = {
      title,
      description,
      status
    };

    if (localStorage.getItem('tasks') === null) {
      let tasks = [];
      tasks.push(task);
      localStorage.setItem('tasks', JSON.stringify(tasks));
      console.log("se agrego una nueva tarea con responsable y descripcion con status:", status);
    } else {
      let tasks = JSON.parse(localStorage.getItem('tasks'));
      tasks.push(task);

      localStorage.setItem('tasks', JSON.stringify(tasks));
      console.log(title, "agrego la Tarea:", description);
      console.log("se agrego una nueva tarea con responsable y descripcion con status:", status);
    }
  }

  getTasks();
  document.getElementById('formTask').reset();
  e.preventDefault();
}

parte 2: muestra cómo envía la información en el inner a las cards las cuales se deben de acomodar en cada div dependiendo su status de cada card

function getTasks() {

  var position;
  var tasks = JSON.parse(localStorage.getItem('tasks'));
  let tasksView = document.getElementById('tasks');
  tasksView.innerHTML = `
  <div class="row">
    <div class="col">
      <button class="btn btn-block border-secondary">Sin Asignar</button>
    </div>
    <div class="col">
      <button class="btn btn-danger btn-block">Pendiente</button>
    </div>
    <div class="col">
      <button class="btn btn-warning btn-block">Proceso</button>
    </div>
    <div class="col">
      <button class="btn btn-success btn-block">Finalizado</button>
    </div>
  </div>
  </br>
  `;
  for (var i = 0; i < tasks.length; i++) {
    let title = tasks[i].title;
    let description = tasks[i].description;
    let status = tasks[i].status;

    console.log("-SOY LA- Tarea: ", "'", description, "'", status, "de:", title);
    
    if (status === "sin asignar") {
      position = 0;
      console.log("entre sin asignar");
      tasksView.innerHTML += `
          <div class="card mb-2 border-secondary">
            <div class="card-header"><b>${title} :</b></div>
            <div class="card-body">
              <p> ${description}
                </br>
                </br>
                <a href="#" onclick="pendienteTask('${title}','${description}', '${status}', '${position}')" class="btn btn-danger ml-3">Pendiente</a>
                <a href="#" onclick="procesoTask('${title}','${description}', '${status}', '${position}')" class="btn btn-warning ml-3">Proceso</a>
                <a href="#" onclick="completadoTask('${title}','${description}', '${status}', '${position}')" class="btn btn-success ml-3">Finalizado</a>
                <a href="#" onclick="deleteTask('${title}','${description}', '${status}', '${position}')" class="btn btn-secondary ml-3">Borrar</a>
              </p>
            </div>
          </div>
      `;
    }
    else if (status === "pendiente") {
      console.log("entre pendiente");
      tasksView.innerHTML += `
          <div class="card mb-2 bg-danger">
            <div class="card-header"><b>${title} :</b></div>
            <div class="card-body">
              <p> ${description}
              </br>
              </br>
              <a href="#" onclick="procesoTask('${title}','${description}', '${status}', '${position}')" class="btn btn-warning ml-4">Proceso</a>
              <a href="#" onclick="completadoTask('${title}','${description}', '${status}', '${position}')" class="btn btn-success ml-4">Finalizado</a>
              <a href="#" onclick="deleteTask('${title}','${description}', '${status}', '${position}')" class="btn btn-secondary ml-4">Borrar</a>
              </p>
            </div>
          </div>
      `;
    }
    else if (status === "proceso") {
      console.log("entre proceso");
      tasksView.innerHTML += `
          <div class="card mb-2 bg-warning">
            <div class="card-header"><b>${title} :</b></div>
            <div class="card-body">
              <p> ${description}
                </br>
                </br>
                <a href="#" onclick="completadoTask('${title}','${description}', '${status}', '${position}')" class="btn btn-success ml-6">Finalizado</a>
                <a href="#" onclick="deleteTask('${title}','${description}', '${status}', '${position}')" class="btn btn-secondary ml-6">Borrar</a>
              </p>
            </div>
          </div>
      `;
    }
    else {
      console.log("entre finalizado");
      tasksView.innerHTML += `
          <div class="card mb-2 bg-success">
            <div class="card-header"><b>${title} :</b></div>
            <div class="card-body">
              <p> ${description}
                </br>
                </br>
                <a href="#" onclick="deleteTask('${title}','${description}', '${position}')" class="btn btn-secondary ml-12">Borrar</a>
              </p>
            </div>
          </div>
      `;
    }
    //
  }
  if (i == 0) {
    window.alert("NO HAY TAREAS ");
  }
}

Adjunto una imagen de cómo se ve: imagen de descripcion

Y el CSS es la librería de Bootstrap.

1 respuesta 1

0

Lo qué puedes hacer, es asignar una función onClick a los botones del header, pasándole como argumento el valor literal de status, algo así:

<button onClick="mostrarTarea('finalizado')" class="btn btn-success btn-block">Finalizado</button>
<button onClick="mostrarTarea('proceso')" class="btn btn-warning btn-block">Proceso</button>

Luego, en la función mostrarTarea podrías recorrer la lista de tareas de la misma forma que hiciste la primera vez, y filtrar, qué si el status es igual al del argumento, cargué el div con el innerHTML. Es importante aclarar, que dentro de esa función crees un elemento dónde se va a cargar el HTML, y lo limpies previo al bucle que recorra la lista de tareas, así solo va a cargar las tareas de ese status y no traer consigo todas las demas almacenadas en la variable. Espero haberte ayudado.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.