Lista de tareas en Bootstrap y Web Storage

| Desarrollos Web | 25/02/2015 |
web stora

Actualizado el domingo, 19 junio, 2016

En este ejemplo vamos a crear una sencilla lista de tareas o lista to-do utilizando Web Storage para crear una aplicación que nos permite guardar nuestras tareas.

Estructura

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>To-Do</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="container">
        <div class="jumbotron text-center">
            <h1>¿Qué tenés que hacer?</h1>
            <form role="form">
                <div class="form-group">
                    <input type="text" id="txtNota" class="form-control">
                </div>
                <select id="cboCategorias" class="form-control" onchange="cargarTareas()">
                    <option value="" selected="selected">Todas las categorías</option>
                    <option>Personal</option>
                    <option>Trabajo</option>
                    <option>Estudio</option>
                </select>
                <button type="submit" class="btn btn-success btn-lg" onclick="guardarTarea()">Guardar</button>
            </form>
        </div>
        <div class="row">
            <form role="form" id="tareas">

            </form>
        </div>
    </div>
    <div id="tuweb">
        Para ver más tutoriales <a href="http://www.tuweb.com">www.tuweb.com</a> 
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="scripts.js"></script>
</body>

</html>
En nuestro HTML tenemos un formulario que posee un Textbox y un Combo, con ello podremos escribir una tarea a realizar y asociarla a una de las tres categorías (personal, trabajo o estudio). Al hacer click en el botón llamaremos a una función JavaScript para guardar la tarea. Al cambiar el valor del combo de categorías llamaremos a una función que cargará todas las tareas de dicha categoría. Al final del documento hay otro formulario que es el lugar donde iremos poniendo las tareas que se fueron creando.
 CSS


@media (min-width: 768px) {
    .container {
        max-width: 730px;
    }
    .jumbotron h1,
    .jumbotron .h1 {
        font-size: 50px;
    }
}
body {
    padding-top: 20px;
    padding-bottom: 20px;
}
.btn {
    margin-top: 20px;
}
#tareas {
    margin: 30px;
}

JavaScript

onload = function () {

    // verificamos que el navegador soporte Web Storage
    if ('localStorage' in window && window['localStorage'] !== null) {
        cargarTareas();
    } else {
        alert('Tu navegador no tiene soporte para Web Storage');
    }
}

function guardarTarea() {

    // obtenemos la tarea y la categoría del formulario
    var categoria = document.getElementById("cboCategorias").value;
    var tarea = document.getElementById("txtNota").value;

    // si no se eligió ninguna categoría impedimos agregar la nota
    if (categoria == "") {
        alert("Por favor indique una categoría.");
        return false;
    }

    // impedimos agregar una tarea vacía
    if (tarea == "") {
        alert("Por favor ingrese una tarea a guardar");
        return false;
    }

    // obtenemos la lista de quehaceres del Local Storage
    var almacenamiento = JSON.parse(localStorage.getItem('ListaQuehaceres'));

    // obtenemos la cantidad de elementos que tenemos guardados
    var cantidadElementos = almacenamiento.length;

    // almacenamos la nueva tarea
    almacenamiento[cantidadElementos] = categoria;
    almacenamiento[cantidadElementos + 1] = tarea;

    try {
        localStorage.setItem('ListaQuehaceres', JSON.stringify(almacenamiento));
    } catch (e) {
        if (e == QUOTA_EXCEEDED_ERR) {
            alert('Se llegó al límite de almacenamiento');
        }
    }

    // dejamos todo listo para ingresar una nueva tarea
    categoria = "";
    cargarTareas();
    limpiarNota();
    return false;
}

function limpiarNota() {
    var tarea = document.getElementById("txtnota");
    tarea.value = '';
}

function cargarTareas() {

    // obtenemos la lista de quehaceres
    var almacenamiento = JSON.parse(localStorage.getItem('ListaQuehaceres'));

    // en caso que la lista no exista la creamos
    if (!almacenamiento) {
        almacenamiento = [];

        try {
            localStorage.setItem('ListaQuehaceres', JSON.stringify(almacenamiento));
        } catch (e) {
            if (e == QUOTA_EXCEEDED_ERR) {
                alert('Se llegó al límite de almacenamiento');
            }
        }
    }

    // obtenemos el formulario que posee todas las tareas ya ingresadas
    var tareas = document.getElementById("tareas");

    // verificamos el filtro que está puesto
    var currentFilter = document.getElementById("cboCategorias").value;
    var checkBox = "";

    // iteramos entre las notas agregadas
    for (var i = almacenamiento.length - 1; i >= 0; i = i - 2) {

        // sólo mostramos las notas del filtro aplicado
        if (currentFilter == almacenamiento[i - 1] || currentFilter == "") {

            // agregamos un checkbox con la nota y le agregamos una llamada a eliminarNota si se hace click
            checkBox += '<div class="checkbox">' + '<label>' + '<input type="checkbox" value="" onclick="eliminarNota(' + i + ')">' + almacenamiento[i] + ' (' + almacenamiento[i - 1] + ')' + '</label>' + '</div>';
        }
    }

    // agregamos los checkboxes creados al formulario
    if (checkBox != undefined) {
        tareas.innerHTML = checkBox;
    } else {
        tareas.innerHTML = "";
    }

    return false;
}

function eliminarNota(itemId) {

    // obtenemos la lista de elementos
    var almacenamiento = JSON.parse(localStorage.getItem('ListaQuehaceres'));

    // eliminamos la tarea y su categoría
    almacenamiento.splice(itemId - 1, 2);

    // volvemos a guardar la lista de quehaceres

    try {
        localStorage.setItem('ListaQuehaceres', JSON.stringify(almacenamiento));
    } catch (e) {
        if (e == QUOTA_EXCEEDED_ERR) {
            alert('Se llegó al límite de almacenamiento');
        }
    }

    cargarTareas();
}

Estel código JavaScript, debe encargarse de guardar las tareas, mostrar las tareas filtradas por categoría, agregar las nuevas tareas a la página y permitir eliminar una tarea seleccionada.

 

Agregar comentario