Javascript

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>