Lista de Compras

Estuvimos trabajando en el enunciado “Lista de Compras” para el trabajo práctico del DOM.

Dejo ordenadas las ideas del funcionamiento de las soluciones:

Agregar Producto

function agregarProducto(nombreProducto) {
	// crear un nuevo item de lista
	// agregar nombreProducto como texto al nuevo item de lista

	// agregar el item de lista creado a la lista de productos, para eso
		// buscar el elemento lista de productos
		// agregar item de lista como hijo del elemento encontrado
}

Borrar Listado Completo

Para esta funcionalidad vimos varias soluciones posibles

• Versión 1: Volver a cargar la página.
• Versión 2: Asignar el contenido "" (string vacío) al elemento lista de productos <ul>, usando el atributo .innerText = "".
• Versión 3: Conseguir un listado con todos los items de la lista (elementos <li>), y para cada uno de los elementos ejecutar el método .remove().

Borrar Elemento Individual

Para esta funcionalidad discutimos también varias posibilidades

• 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

Para este ejercicio pensamos que podíamos aplicar .sort() directamente sobre una lista de elementos del DOM, pero eso no fué posible. Necesitamos convertir el resultado que nos devuelve .querySelectorAll() a una lista/array de JavaScript.

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

Usamos como criterio de comparación el atributo .innerText de cada uno de los elementos de la lista de productos.

Editor de Texto

Presentamos el enunciado para el próximo trabajo práctico. Vamos a estar trabajando con el Editor de Texto.