Calendario de adviento para desarrollar una web app en 24 días, propuesta por @Goncy Pozzo.
Todos los días se hicieron en vivo en mi stream:
Actualizamos el día 3 para agregar una animación cada vez que se agrega un elemento a la lista.
Hice trampa? Para el día 4 había que agregar un botón a cada elemento para eliminarlo. Lo que hice fue un poco distinto: Cambié el estado hover de los elementos de la lista para que indiquen que al hacer clic se eliminaría el elemento.
Los elementos se eliminan de la página y del almacenamiento, que por ahora sigue siendo un simple array.
También discutimos cambiar de usar Document a usar DocumentFragment pero no lo utilizamos por no mejorar la performance al agregar elementos uno a uno. Posiblemente lo utilicemos cuando haya que paginar muchos elementos o eliminar varios a la vez.
Implementamos la lista con Javascript (almacenada localmente en un array, por ahora). Agregamos eventos para agregar nuevos elementos a la lista (mostrándolos y agregándolos al array). Si se intenta agregar un elemento vacío, hace una animación de "shake" y no carga el elemento vacío.
Lista estática implementada en flexbox. Me adelanté y comencé a ponerle estilos. :-)