Implementa una lista interactiva a través de flechas que permita mover los elementos hacia arriba y hacia abajo.
https://ibb.co/10dDKqS
Descarga los ficheros proporcionados en esta carpeta compartida de Google Drive e implementa las funciones descritas en el fichero JS.
Consideraciones:
Los ficheros HTML y CSS no deben modificarse.
Antes de empezar a escribir código javascript, analiza la estructura del documento HTML, cómo están formados los elementos de la lista y las clases que utilizan.
-----------------------------------------
Basicamente son 5 elementos li que hay que mover arriba y abajo con la particularidad de que el primer y ultimo elemento tienen los botones de arriba o abajo deshabilitados, y esa ultima parte es la que no consigo.
Yo tengo lo siguiente:
Código
window.onload = function() { /** * 1. Obtén todos los elementos li como una HTMLCollection dinámica en la * constante "oElementosLi". [0,5 puntos] */ const oElementosLi = document.getElementsByTagName("li"); /** * 2. Obtén una NodeList estática con todas las flechas (elementos span que * contienen la clase "flechaArriba" y "flechaAbajo") en la constante * "oFlechas". [0,75 puntos] */ const oFlechas = document.querySelectorAll('span.flechaArriba, span.flechaAbajo'); /** * 3. Añade un manejador del evento click a cada flecha usando la NodeList * "oFlechas", un bucle "forEach" y la notación flecha. Al hacer click en * una flecha se debe llamar a la función "actualizarLista". [1,75 puntos] */ oFlechas.forEach(oFlecha => { oFlecha.addEventListener("click", actualizarLista); }); /** * 4. Implementa la función "actualizarLista" para que: * * -Intercambie el elemento li sobre el que se ha hecho click con su hermano * anterior o posterior dependiendo si se ha pulsado la flecha arriba o * abajo. Pulsar la flecha arriba en el primer elemento o la flecha abajo en * el último no realizará ninguna operación. Utiliza la función * "insertAdjacentElement" y las referencias "parentNode", previousElementSibling" * y "nextElementSibling". [4 puntos] * * -Elimine la clase "flechaDeshabilitada" de los elementos que la contengan * y la añada a la flecha arriba del primer elemento y a la flecha abajo del * último elemento. [3 puntos] */ function actualizarLista(event) { const oFlecha = event.target; const oFlechaActual = oFlecha.parentNode; const oFlechaAnterior = oFlechaActual.previousElementSibling; const oFlechaSiguiente = oFlechaActual.nextElementSibling; oFlechas.forEach((oFlecha) => { if (oFlecha.classList.contains("flechaDeshabilitada")) { oFlecha.classList.remove("flechaDeshabilitada"); } }); if(oFlecha.className == "flechaArriba"){ oFlechaAnterior.insertAdjacentElement("beforebegin", oFlechaActual); }else if(oFlecha.className == "flechaAbajo"){ oFlechaSiguiente.insertAdjacentElement("afterend", oFlechaActual); } } }
Esta es la estructura HTML:
Código
¿Alguien sabría explicarme como poner la clase deshabilitada en el primer y ultimo elemento?
Muchísimas gracias de antemano!