Buenas tengo el siguiente ejercicio:
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:
Esta es la estructura HTML:
¿Alguien sabría explicarme como poner la clase deshabilitada en el primer y ultimo elemento?
Muchísimas gracias de antemano!
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 (javascript) [Seleccionar]
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 (html4strict) [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Lista interactiva</title>
</head>
<body>
<h1>Lista interactiva</h1>
<ul>
<li>
<span class="flechaArriba flechaDeshabilitada"></span>
<span class="flechaAbajo"></span>
<span class="texto">Texto colocado inicialmente en la posición 1.</span>
</li>
<li>
<span class="flechaArriba"></span>
<span class="flechaAbajo"></span>
<span class="texto">Texto colocado inicialmente en la posición 2.</span>
</li>
<li>
<span class="flechaArriba"></span>
<span class="flechaAbajo"></span>
<span class="texto">Texto colocado inicialmente en la posición 3.</span>
</li>
<li>
<span class="flechaArriba"></span>
<span class="flechaAbajo"></span>
<span class="texto">Texto colocado inicialmente en la posición 4.</span>
</li>
<li>
<span class="flechaArriba"></span>
<span class="flechaAbajo flechaDeshabilitada"></span>
<span class="texto">Texto colocado inicialmente en la posición 5.</span>
</li>
</ul>
<script type="text/javascript" src="index.js"></script>
</body>
</html>¿Alguien sabría explicarme como poner la clase deshabilitada en el primer y ultimo elemento?
Muchísimas gracias de antemano!