Continuando con lo visto en la clase anterior sobre el trabajo práctico del DOM, pensamos en conjunto cómo resolver el enunciado de “Lista de Compras”.

Lista de Compras

Seguimos con la idea de pensar de forma ordenada los pasos para resolver el enunciado.

Agregar Producto

function agregarProducto(nombreProducto) {
	// crear un nuevo elemento LI (item de lista)
	// agregar nombreProducto como texto al nuevo elemento
	// buscar el elemento #lista-productos
	// agregar el nuevo elemento como hijo de #lista-productos
}

Borrar Listado

Discutimos y encontramos varias soluciones posibles:

• Borrar el elemento <ul> completo.
• Conseguir un listado con cada uno de los elementos <li> para borrarlos.
• Volver a cargar la página.
• Asignar el contenido "" (string vacío) al elemento <ul> lista de productos.

Borrar Elemento Individual

Para esta funcionalidad también encontramos varias opciones posibles:

• Agregar un checkbox o radio button para seleccionar/marcar elementos a eliminar.
• Agregar un formulario nuevo para escribir el nombre del elemento que queremos eliminar.
• Agregar un botón eliminar a cada elemento.

Orden Alfabético

Primero tenemos que definir cuándo se va a aplicar el ordenamiento

• A partir de un botón que puede presionar el usuario.
• Cada vez que se modifica la lista, de forma automática.

Después tenemos que pensar cómo vamos a hacer ese ordenamiento

function ordenarListado() {
	// obtener un listado de elementos
	// convertir listado de elementos a lista (array) de JavaScript
	// ordenar listado usando sort()
	// volver a dibujar el listado
}

Para el punto de convertir un resultado de querySelectorAll() a una lista/Array de JavaScript, podemos ver lo siguiente:

// obtenemos un resultado de tipo NodeList
let nodeListDeElementos = document.querySelectorAll('selector');
nodeListDeElementos.sort() // NO FUNCIONA

// convertimos de NodeList a Array
let listaDeElementos = Array.from(nodeListDeElementos);
listaDeElementos.sort() // Ahora el .sort() si funciona

Referencia: https://developer.mozilla.org/es/docs/Web/API/NodeList

Editor de Texto

Presentamos el enunciado de “Editor de Texto” para empezar a trabajar.