Ejemplo de TODO en Javascript con ES6

El siguiente ejemplo es una implementación sencilla de una lista de tareas, un TODO. Realizado en pocas líneas con Javascript puro. Usando el estándar ECMAScript 6 para Javascript.

DEMO

TODO

No nos complicaremos mucho con el código HTML. Un input para escribir, un botón que cuando pulsemos ejecutaremos add(), y un div con la id tareas para mostrar el resultado final. La lista con las tareas.

<div>
    <h2>TODO</h2>
    <form id="form" action="">
        <input id="new_note" type="text" name="new_note">
        <a onclick="add()">+</a>
    </form>
    <div id="tareas">
    </div>
</div>

Y el código Javascript esta utilizando el último estándar (ES6). Variable let, bucle de itereación for of, y la nueva forma de concadenar Strings.

        let tareas = [];

        /**
         * Función para añadir una nueva tarea
         */
        let add = function() {
            let new_note = document.querySelector('#new_note');
            // Guardamos la tarea en el array
            tareas.push(new_note.value);
            // Borramos la tarea del input
            new_note.value = '';
            new_note.focus();
            // Redibujamos
            render();
        }

        /**
          Función para borrar una tarea
          */
        let del = function(pos) {
            // Borramos de tareas
            tareas.splice(pos, 1);
            // Redibujamos
            render();
        }

        /**
         * Función que redibuja las tareas
         */
        let render = function() {
            let html_tareas = document.querySelector('#tareas');
            let html_final = '';
            // Generamos el HTML
            let num = 0;
            for(let i of tareas) {
                html_final += `
                    <div class="panel panel-default">
                        <a href="#" class="btn btn-danger pull-right" onclick="del(${num})">X</a>
                        <div class="panel-body">
                        ${i}
                        </div>
                    </div>
                    `;
                num += 1;
            }
            // Insertamos el HTML
            html_tareas.innerHTML = html_final;
        }

A continuación el ejemplo completo usando Bootstrap para decorarlo un poco.

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>TODO</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        form#form {
            display: flex;
        }
    </style>
</head>
<body>
    <div class="container text-center">
        <h2>TODO</h2>
        <form id="form" action="">
            <input id="new_note" class="form-control" type="text" name="new_note">
            <a onclick="add()" class="btn btn-success">+</a>
        </form>
        <div id="tareas">
        </div>
    </div>
    <script>
        let tareas = [];

        /**
         * Función para añadir una nueva tarea
         */
        let add = function() {
            let new_note = document.querySelector('#new_note');
            // Guardamos la tarea en el array
            tareas.push(new_note.value);
            // Borramos la tarea del input
            new_note.value = '';
            new_note.focus();
            // Redibujamos
            render();
        }

        /**
          Función para borrar una tarea
          */
        let del = function(pos) {
            // Borramos de tareas
            tareas.splice(pos, 1);
            // Redibujamos
            render();
        }

        /**
         * Función que redibuja las tareas
         */
        let render = function() {
            let html_tareas = document.querySelector('#tareas');
            let html_final = '';
            // Generamos el HTML
            let num = 0;
            for(let i of tareas) {
                html_final += `
                    <div class="panel panel-default">
                        <a href="#" class="btn btn-danger pull-right" onclick="del(${num})">X</a>
                        <div class="panel-body">
                        ${i}
                        </div>
                    </div>
                    `;
                num += 1;
            }
            // Insertamos el HTML
            html_tareas.innerHTML = html_final;
        }
    </script>
</body>
</html>