Lista de tareas en Bootstrap y Web Storage

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>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>¿Qué tenés que hacer?</h1>

</div>

<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>

</form>

</div>

Para ver más tutoriales <a href="http://www.tuweb.com">www.tuweb.com</a>

</div>

</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;
}

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 &amp;&amp; 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 &gt;= 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 += '&lt;div class="checkbox"&gt;' + '&lt;label&gt;' + '&lt;input type="checkbox" value="" onclick="eliminarNota(' + i + ')"&gt;' + almacenamiento[i] + ' (' + almacenamiento[i - 1] + ')' + '&lt;/label&gt;' + '&lt;/div&gt;';
        }
    }

    // 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();
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

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.

Lista de tareas en Bootstrap y Web Storage

Agregar comentario

Cancelar respuesta