El DOM (Documento Objeto Modelo, en inglés Document Object Model) es la forma en que la computadora entiende y organiza todo lo que se ve e interactúa en una página web.
Cada elemento en la página web, como títulos, imágenes, botones y párrafos, se convierte en una parte del DOM. Esto permite a los programas y scripts interactuar con la página web, cambiar cosas en ella o responder a las acciones de los usuarios, como hacer clic en un botón.
Devuelve el primer elemento del documento (utilizando un recorrido primero en profundidad preordenado de los nodos del documento) que coincida con el grupo especificado de selectores.
element = document.querySelector(selectores);
Donde:
º element es un objeto de tipo element.
º selectores es una cadena de caracteres que contiene uno o más selectores CSS (en-US) separados por coma.
El método querySelectorAll() de un Element devuelve una NodeList estática (no viva) que representa una lista de elementos del documento que coinciden con el grupo de selectores indicados.
elementList = parentNode.querySelectorAll(selectors);
Donde:
º Selectors: Es un string que contiene 1 o más selectores para buscar coincidencias en el DOM.
- para modificar el tag HTML que será dónde crearas las tareas al presionar enter usa:
1.1 document.querySelector('.new-todo')
- para modificar el tag HTML
- que será donde visualizaras todas las tareas
usa:
2.1 document.querySelector('.todo-list')
- para modificar el tag HTML
que será donde visualizaras las categorías (Pendiente, completado o todas) usa:
3.1 document.querySelector('.footer')
- para modificar el tag HTML que será para marcar y desmarcar las tareas completadas usa:
4.1 document.querySelectorAll('.toggle')
- para modificar el tag HTML que será donde al dar clic podrás eliminar una tarea usa:
5.1 document.querySelectorAll('.deleteBtn')
- para modificar el tag HTML que será donde al dar clic podrás acceder a modificar una tarea usa:
6.1 document.querySelectorAll('.editBtn')
- para modificar el tag HTML que será donde visualizaras las opciones de guardar y cancelar cambios en una tarea
7.1 document.querySelectorAll('.update-controller')
- para modificar el tag HTML que será el recuadro donde modificaras el nombre de la tarea usa:
8.1 document.querySelectorAll('.input-controller textarea')
- para modificar el tag HTML que será donde almacenarás la prioridad de la tarea usa:
9.1 document.querySelectorAll( '.edit-controller select' )[0]
9.2 document.querySelectorAll('#priority')
- para modificar el tag HTML que será donde almacenarás la categoría de la tarea usa:
10.1 document.querySelectorAll( '.edit-controller select' )[1]
10.2 document.querySelectorAll('#category')
- para modificar el tag HTML que será donde se guardará y actualizará el cambio de nombre de alguna tarea para ello usa:
11.1 document.querySelectorAll('.saveBtn')
- para modificar el tag HTML que será un botón que al darle clic cancela un cambio de nombre de alguna tarea, para ello usa:
12.1 document.querySelectorAll('.cancelBtn')
A continuación, podrás encontrar el código del DOM que sugerimos incluyas/uses en el archivo script.js (./script/script.js)
Código DOM #1
document.querySelector('.new-todo').addEventListener('keyup', (event) => {
if (
event.keyCode === 13 &&
document.querySelector('.new-todo').value.length > 0
) {
const item = document.querySelector('.new-todo')
//Llamar la función que crea la tarea.**
}
})
LISTENERS: Se encargan de hacer que los botones respondan a los clics y realizar las acciones correspondientes (eliminar, editar, guardar, cancelar, dar prioridad y categoría) además de guardar la información de la página que cuando se recargue no se reinicien las tareas.
Código DOM #2:
// este fragmento permite conservar el estado del checkbox (true o false) en el localStorage
function activateCheckboxListeners() {
const checkboxes = document.querySelectorAll('.toggle')
checkboxes.forEach((ch, i) => {
ch.addEventListener('click', () => {
itemsArray[i].checked = ch.checked
localStorage.setItem('items', JSON.stringify(itemsArray))
})
})
}
Código DOM #3:
// Permite que la acción eliminar impacte el DOM del HTML, acá debes agegar algoritmo de eliminar tarea
function activateDeleteListeners() {
let deleteBtn = document.querySelectorAll('.deleteBtn')
deleteBtn.forEach((db, i) => {
db.addEventListener('click', () => {
//Llamar la función que elimina la tarea
})
})
}
Código DOM #4:
// Permite que la acción editar de las 2 listas desplegables "prioridad" y "categoría" impacte el DOM del HTML cuando cambies de opción, inserta este código tal cual, el reto está en saber en qué parte de tu código debes usarlo.
function activateEditListeners() {
const editBtn = document.querySelectorAll('.editBtn')
const updateController = document.querySelectorAll('.update-controller')
const inputs = document.querySelectorAll('.input-controller textarea')
const prioritySelects = document.querySelectorAll(
'.edit-controller select'
)[0]
const categorySelects = document.querySelectorAll(
'.edit-controller select'
)[1]
editBtn.forEach((eb, i) => {
eb.addEventListener('click', () => {
updateController[i].style.display = 'block'
inputs[i].disabled = false
prioritySelects.value = itemsArray[i].priority
categorySelects.value = itemsArray[i].category
})
})
prioritySelects.addEventListener('change', (event) => {
const selectedIndex = event.target.selectedIndex
itemsArray[i].priority = event.target.options[selectedIndex].text
localStorage.setItem('items', JSON.stringify(itemsArray))
})
categorySelects.addEventListener('change', (event) => {
const selectedIndex = event.target.selectedIndex
itemsArray[i].category = event.target.options[selectedIndex].text
localStorage.setItem('items', JSON.stringify(itemsArray))
})
}
Código DOM #5:
// Permite que la acción guardar el nuevo nombre de la tarea cuando decides editar y que impacte el DOM del HTML, acá debes agegar algoritmo de actualizar tarea
function activateSaveListeners() {
const saveBtn = document.querySelectorAll('.saveBtn')
const inputs = document.querySelectorAll('.input-controller textarea')
saveBtn.forEach((sB, i) => {
sB.addEventListener('click', () => {
// Llamar la función que guarda la actualización la tarea
})
})
}
Código DOM #6:
// Esta es la lógica para el botón "cancelar" cuando presionas editar una tarea, inserta este código tal cual, el reto está en saber en qué parte de tu código debes usarlo.
function activateCancelListeners() {
const cancelBtn = document.querySelectorAll('.cancelBtn')
const updateController = document.querySelectorAll('.update-controller')
const inputs = document.querySelectorAll('.input-controller textarea')
cancelBtn.forEach((cB, i) => {
cB.addEventListener('click', () => {
updateController[i].style.display = 'none'
inputs[i].disabled = true
inputs[i].style.border = 'none'
})
})
}
A continuación, les compartimos la explicación de la función display items que será de gran ayuda para que puedas mostrar en pantalla las tareas creadas.
displayItems(): La función llamada displayItems que genera y muestra elementos en una lista en el DOM. Aquí tienes una explicación breve de lo que hace el código:
La función displayItems comienza definiendo una variable llamada items como una cadena vacía. Esta variable se utilizará para acumular el HTML de los elementos que se generarán.
Luego, entra en un bucle for que recorre cada elemento en la matriz itemsArray.
Dentro del bucle, se agrega una cadena de plantilla literal que contiene el HTML para representar un elemento en la lista de tareas. El HTML incluye una casilla de verificación, un cuadro de texto, selectores de prioridad y categoría, íconos de edición y eliminación, y botones de guardar y cancelar.
Se utilizan expresiones condicionales dentro de las plantillas literales para determinar si ciertos atributos deben estar presentes o no. Por ejemplo, se utiliza ${itemsArray[i].checked ? 'checked' : ''} para determinar si la casilla de verificación debe estar marcada o no.
Una vez que se ha generado el HTML para todos los elementos en itemsArray, se asigna la cadena items al contenido HTML del elemento con la clase .todo-list. Esto actualiza la lista de tareas en el DOM con los nuevos elementos generados.
Después de actualizar el DOM, se llama a varias funciones (activateCheckboxListeners, activateDeleteListeners, activateEditListeners, activateSaveListeners y activateCancelListeners) que probablemente están diseñadas para asignar oyentes de eventos a los elementos recién generados para manejar las interacciones del usuario, como marcar tareas como completadas, editar tareas, eliminar tareas, etc.
En resumen, la función displayItems toma la información en itemsArray, genera el HTML necesario para mostrar cada elemento en la lista de tareas y actualiza el DOM con estos elementos. También activa oyentes de eventos para manejar las interacciones del usuario con los elementos generados.
displayFooter(): La función displayFooter
genera y muestra el HTML
correspondiente al pie de página (footer) de la aplicación de lista de tareas.
Aquí está una explicación breve de lo que hace esta porción de código:
-
La función
displayFooter
define una variable llamadapage
que contiene una cadena de plantilla literal. Esta cadena de plantilla contiene el HTML para el pie de página de la aplicación. -
Dentro del HTML del pie de página, hay varios elementos que se explican a continuación:
-
Se define un elemento
<footer>
con la clase.footer
para representar el área del pie de página. -
Se agrega un elemento
<span>
con la clase.todo-count
que muestra la cantidad de tareas pendientes. El valor es obtenido llamando a la funcióncountPend()
, que probablemente devuelve el número de tareas pendientes. -
Se crea una lista desordenada
<ul>
con la clase.filters
que contiene tres elementos de lista<li>
. Cada<li>
contiene un enlace<a>
que representa un filtro para mostrar tareas. Los filtros disponibles son "Todos", "Pendientes" y "Completados". Estos enlaces pueden tener atributosonclick
que llaman a funciones comoshowAll()
,showPend()
yshowComp()
, que probablemente cambian la visualización de las tareas según el filtro seleccionado. -
Se incluye un botón
<button>
con la clase.clear-completed
que tiene un atributoonclick
que llama a la funciónborrarCompletados()
. Este botón se usa para borrar las tareas completadas.
-
-
Después de construir el HTML para el pie de página, la función establece el contenido HTML del elemento con la clase
.footer
(probablemente algún contenedor en tu aplicación) utilizando la cadenapage
.
En resumen, la función displayFooter
genera y muestra en el DOM el pie de
página de una aplicación de lista de tareas. El pie de página incluye
información sobre el recuento de tareas pendientes, opciones de filtro para
mostrar diferentes tipos de tareas y un botón para borrar tareas completadas.