Transcripción

[00:00] Hola, mi nombre es Harland Lohora y les doy la bienvenida al curso de manipulación de
DOM con JavaScript, aquí en Alura. Durante este curso vamos a aprender qué es DOM, cómo crear
y eliminar elementos, cómo trabajar con formularios, cómo hacer módulos con JavaScript y
muchas otras cosas.

[00:15] Todo esto aplicado en este proyecto, en el cual nosotros vamos a poder hacer una lista de
las tareas que queremos realizar. Por ejemplo, voy a poner aquí Hacer curso de HTTP, le voy a dar
clic en agregar y se agrega en la parte inferior. Voy a agregar uno nuevo, en el cual va a ser Hacer
curso de JavaScript. Le voy a dar clic en agregar.

[00:38] También nosotros podemos decir cuáles son las tareas que ya hemos realizado, todo esto a
través de este icono, y también vamos a poder eliminar las tareas con el botoncito de la derecha. Le
voy a dar clic y listo, se elimina.

[00:53] Todo lo que vamos a ver en este curso te van a ayudar a mejorar tus habilidades como
desarrollador. Para finalizar, te comento que este es el inicio de un proyecto en el cual vamos a ir
desarrollando tanto en este curso como en un curso posterior llamado Almacenando datos en el
navegador, así que te veo en el curso.

Transcripción

[00:00] Muy bien, ahora que ya tenemos abierto nuestro proyecto en Visual Studio Code, lo
primero que vamos a hacer es venir a la sección de extensiones y vamos a buscar Live Server. Esta
será la extensión. En caso de que te aparezca install, es simplemente darle clic y en caso de que,
como a mí, me aparece uninstall, es porque ya lo tengo instalado.

[00:23] Esta extensión lo que nos va a ayudar es que cuando nosotros estemos desarrollando
nuestra página web, cada vez que nosotros realicemos un cambio, se va a reflejar automáticamente
en el navegador sin necesidad de que nosotros tengamos que estar refrescando. Esta extensión es
muy, muy útil para nosotros los desarrolladores web.

[00:41] Ahora la siguiente es, en la parte superior hay una sección donde dice terminal, voy a darle
clic en new terminal, esperamos a que abra y ahora lo que vamos a hacer es crear una rama.
Recuerda, en caso de que no sepas qué es una rama en lo que respecta a Git, hay un curso en Alura
donde vas a poder entender a fondo. Te lo dejo en la sección de Saber más.

[01:07] Muy bien, entonces lo que vamos a hacer es poner el siguiente comando: git checkout -b y
entre comillas vamos a poner "clase01". Muy bien. Entonces, lo que nosotros acabamos de hacer es
una nueva rama en la cual vamos a estar trabajando, y al final del curso lo que vamos a hacer es
unir las ramas para poder tener en una sola rama todo nuestro proyecto.

[01:42] Muy bien, esto lo podemos cerrar. Vamos entonces a ver cómo está constituido nuestra
página web, vamos a ir al archivo index.html y lo que nosotros nos vamos a encontrar es la
estructura básica de un archivo HTML 5 con su doctype, la etiqueta HTML, la etiqueta head en la
cual, pues bueno, estamos definiendo cuál va a ser el título de nuestra página.

[02:07] Estamos también incluyendo aquí una fuente, la cual se está utilizando en la en la página
web, y también estamos en esta parte agregando una librería de iconos. Y por último, lo que
estamos haciendo aquí es importar los estilos, que en este caso se encuentran aquí, en este archivo
styles.css.

[02:32] Ahora, si nosotros bajamos, vamos a encontrar igual aquí una etiqueta main, una etiqueta
div, con una clase mainCard, pero lo que nos importa aquí es que en esta parte nosotros tenemos el
formulario, es decir, el input en el cual nosotros vamos a escribir el nombre de nuestra tarea a
realizar, y el botón el cual nos va a ayudar a agregarla.

[02:53] Ahora, si seguimos bajando, vamos a encontrar una etiqueta ul y adentro una etiqueta li, la
cual pues bueno, es la estructura básica de cada una de nuestras tareas. Ahora, si ya me seguiste
hasta este punto, lo que vamos a hacer es, en el archivo index.html, darle clic derecho, abrir con
Live Server.

[03:18] Muy bien. Entonces, hasta ahorita ya tenemos levantado nuestro proyecto. Ahora lo que
vamos a hacer es tratar de agregar una nueva tarea, hacer curso de git. Muy bien, vamos entonces a
darle clic en agregar. Y si te diste cuenta, desapareció el texto, pero no agregó la tarea aquí en esta
lista.

[03:40] ¿Esto por qué? Porque ahorita nuestra plataforma está haciendo estática, nosotros
necesitamos trabajar con JavaScript para poder hacer de forma dinámica este elemento, el cual va a
contener la lista de nuestras tareas. Es decir, nosotros, si quisiéramos agregar una nueva tarea,
tendríamos que copiar esta estructura básica, pegar y bueno, hacer curso de git.

[04:06] Muy bien, voy a guardar, voy a regresar a mi navegador web y sin necesidad de hacer
reload o recargar la página, gracias a la extensión Live Server apareció aquí esta nueva tarea.
Entonces, a partir de este curso, entonces, a lo largo de este curso vamos a estar trabajando
justamente para que nosotros escribamos el nombre de la tarea y automáticamente se vaya
poniendo aquí en esta lista.

Transcripción

[00:00] Okay, entonces, ahora que ya sabemos que nuestro objetivo es realizar de manera dinámica
la lista de las tareas que se tienen que hacer, hay que entender que nuestro código HTML, el
navegador lo está interpretando a través de un objeto.

[00:15] Vamos a ver, vamos a darle clic derecho, inspeccionar, y en caso de que no te aparezcan
esta estas opciones, puedes venir aquí a los tres puntitos, en este caso en Chrome, y en la parte de
Más herramientas, herramientas de desarrollador. Se cerró, aquí. Más herramientas, herramientas
de desarrollador y deberíamos de tener el mismo resultado.
[00:42] Entonces estas diferentes pestañas nos van a ayudar a poder ver más a detalle todo nuestro
proyecto, es decir, si nosotros venimos a la sección de elementos, nosotros vamos a encontrar aquí
todo el código HTML que está en nuestro Visual Studio Code. Pero ya lo interpretó el navegador.

[01:01] Entonces, si nosotros empezamos aquí a acceder al árbol del DOM o a nuestra
representación, recuerda que es un objeto, nosotros vamos a poder ir viendo qué es lo que compone
a toda nuestra página. Entonces, aquí en este caso tenemos el formulario, aquí tenemos toda nuestra
lista de tareas.

[01:23] Muy bien, entonces lo que hizo el navegador es leer el código HTML y generó un objeto.
Este objeto se llama document. Si nosotros venimos a la sección de consola, escribimos document
y le damos enter, lo que vamos a tener es la representación de todo nuestro código HTML. Si te das
cuenta, todo esto de aquí genera nuestra página.

[01:48] Ahora, si nosotros empezamos a inspeccionar nuestro código, vamos a ver que tenemos
aquí la parte del cardsList, que es la lista de todas nuestras tareas. Ahora, si nosotros quisiéramos,
por ejemplo, cambiar el texto que viene aquí, de hacer curso de DOM, a aprender DOM, lo que
tendríamos que hacer es seleccionar este elemento. ¿Y cómo podemos hacer eso?

[02:12] Bueno, ya vimos que document es un objeto y por lo tanto tiene un método o tiene una
función que nosotros podemos utilizar para seleccionar cierta parte de ese objeto. Para poder
realizar eso, vamos a escribir document, voy a eliminar aquí la consola para que quede arriba,
punto, y aquí tenemos un autocompletado de diferentes funciones que tiene document.

[02:36] Pero el que nos interesa es querySelector. Muy bien. Abro y cierro paréntesis, y lo que
recibe puede ser la etiqueta HTML que nosotros quisiéramos buscar, puede ser la clase o puede ser
el id. Vamos a probar primero con la etiqueta.

[02:57] Voy a escribir entonces aquí "li", y si te diste cuenta, en cuanto yo completé "li", lo que
hizo fue sombrear del lado aquí en el navegador cuál es el elemento que nosotros estamos
alcanzando. Entonces le voy a dar enter y ahora nosotros tenemos justamente nuestro elemento
HTML que seleccionamos con querySelector.

[03:21] Muy bien, entonces estamos viendo que también, aparte de solo poder seleccionar con la
etiqueta de HTML, nosotros también podemos hacerlo con clase, es decir, aquí en este caso la clase
es card. Para eso vamos a hacer document.querySelector, y ahora, como es una clase vamos a
ponerle un punto, y la clase se llama Card.

[03:49] Y si te das cuenta, estamos llegando al mismo resultado. Ahora lo que vamos a hacer
entonces es cambiar el texto de hacer curso de DOM a aprender DOM. Muy bien, entonces para
poder llegar a ese resultado vamos a seguir inspeccionando y vamos a ver que el texto de hacer
curso de DOM se encuentra en un spam con la clase task.

[04:15] Ahora voy a eliminar de nuevo la consola y vamos a hacer document.querySelector. ¿Y

cuál era la etiqueta? ("span") Y ahí nosotros ya estamos viendo el elemento span. Aquí lo tenemos,
y ahora si nosotros queremos acceder al contenido tenemos otra propiedad que es
document.querySelector, vamos a pasar de nuevo la etiqueta ("span").textContent.

[04:48] ¿Y qué es lo que va a hacer este comando? Muy bien, nos va a regresar cuál es el contenido
de ese elemento, en este caso hacer curso de DOM. Ahora, si nosotros quisiéramos entonces
cambiar el código, perdón, cambiar el texto, vamos a dar flechita hacia arriba, que nosotros
podemos ir navegando en todos los comandos que hemos puesto en la consola, ya sea con flecha
hacia arriba o flecha hacia abajo.

[05:13] Y vamos a poner el símbolo de igual y entre comillas vamos a poner "Aprender más sobre
DOM" y le voy a dar enter. Si te diste cuenta, se actualizó inmediatamente el contenido de nuestra
primera tarea. Entonces, ahora que nosotros ya vimos que todo el código que nosotros estamos
realizando en nuestro editor se está convirtiendo en un objeto, vamos a ver más a detalle qué es el
DOM.

Transcripción
[00:00] Okay, entonces lo que tenemos aquí es la representación de nuestro objeto. Es decir,
nosotros tenemos HTML, que a su vez tiene la etiqueta head, y dentro de la etiqueta head tenemos
la etiqueta title. También tenemos que en la etiqueta HTML dentro vive la etiqueta body y que a su
vez contiene la etiqueta div y etiqueta ul.

[00:26] Nosotros ya vimos que esta estructura vive dentro del objeto document, pero que esta, a su
vez, va a vivir dentro del objeto window, es decir, todo lo que es nuestra pestaña en el navegador.
Entonces tenemos el objeto window, que a su vez tiene el objeto document y que éste a su vez va a
tener todo nuestro archivo, que nosotros hemos codificado.

[00:50] Va a tener la etiqueta HTML, la etiqueta head, que a su vez va a tener title, vamos a tener
también la etiqueta body y que a su vez, pues va a tener etiqueta div y va a tener etiqueta ul.
Entonces, si nosotros vemos o empezamos desde la etiqueta windows y vamos yendo más hacia
dentro, podemos ir dándonos cuenta que se va generando algo así como un árbol.

[01:13] Es por eso que se le conoce como árbol de DOM, en el cual nosotros vamos a poder
encontrar un elemento dentro de toda esta estructura. Otra cosa que tienes que tener en cuenta es
que existen elementos padre y elementos hijo, es decir, nosotros tenemos que body es hijo de la
etiqueta HTML, pero que a su vez es padre de las etiquetas div y las etiquetas ul, así como head es
hijo de HTML.

[01:44] Entonces, ahora que ya vimos la representación de lo que es el DOM, vamos a continuar
con la funcionalidad de nuestra aplicación.

07 Seleccionando elementos
PRÓXIMA ACTIVIDAD



Utilizamos el método querySelector para recorrer el árbol del DOM y encontrar el elemento que
queremos utilizando JavaScript. Pero, existen otro métodos que pueden ser utilizados con la misma
finalidad.
 document.getElementById(‘id’) selecciona el elemento por el id
  `document.getElementsByClassName(‘clase’) retorna un arreglo de los elementos por
el nombre de la clase
 document.getElementsByTagName(‘tag’) retorna un arreglo de los elementos por

el nombre del tag

 document.querySelectorAll(“selector”) regresa todos los elementos con el

mismo nombre
08Haga lo que hicimos en aula
PRÓXIMA ACTIVIDAD



La práctica ayuda mucho en el aprendizaje. Es muy importante que implementes lo que fue
presentado en clase.
Opinión del instructor



Continúe con sus estudios, y si tiene alguna pregunta, ¡no dude en usar nuestro foro!
09Lo que aprendimos
PRÓXIMA ACTIVIDAD



Lo que aprendimos en esta aula:

 Recorrer el árbol del DOM
 Utilizar querySelector para seleccionar los elementos dentro del árbol de DOM

 Funcionamiento de la estructura del DOM

 Transcripción

 [00:00] Muy bien, entonces nosotros ya vimos más teorías sobre qué es el DOM. Ya vimos
que es un objeto, es la representación de nuestro código y que tiene una forma de un árbol,
por eso se le conoce árbol de DOM. Ahora, vamos a continuar con la funcionalidad, pero
antes vamos a ir a nuestro Visual Studio Code.
 [00:17] Vamos a venir aquí a la parte de terminal, nueva terminal, y vamos a guardar los
cambios que hemos generado hasta ahorita. Lo que voy a hacer es muy sencillo y
 simplemente git add -A. Recuerda: esto no es necesario, es simplemente un plus en este
curso, entonces vamos a hacer git add -A para que guarde los cambios que tenemos ahorita.
 [00:45] Lo que vamos a hacer ahora es git commit -m para ponerle un texto que haga
referencia a nuestros cambios que hemos realizado hasta ahorita. Vamos a poner "clase 01
completada". Muy bien. Ahora entonces vamos a hacer un git checkout -b y vamos a darle el
nombre de "clase02". Muy bien. Entonces ya estamos listos para seguir.
 [01:13] Voy a cerrar la terminal. ¿Y ahora cuál es el siguiente paso? Muy bien. Vamos
entonces a regresar aquí a nuestro navegador y voy a escribir que quiero hacer el curso de
responsive. Muy bien, le voy a dar clic aquí en agregar. Y seguimos teniendo el mismo
comportamiento, no está agregando la tarea que nosotros estamos poniendo aquí. Voy
entonces aquí a darle clic derecho.
 [01:45] Vamos a ir a inspeccionar. Muy bien. Vamos a ir aquí a la parte de consola. Ahora,
vamos a regresar de nuevo a nuestro código y lo primero que vamos a hacer es ponerlo o
importarlo dentro de nuestro archivo HTML. Para eso voy a escribir la etiqueta script y
dentro de la primera parte voy a escribir src y entre comillas el nombre del archivo que es
"script.js". Muy bien, vamos entonces a guardar.
 [02:16] Vamos a ir ahora a nuestro archivo script.js, y nosotros ya sabemos que con
document.querySelector nosotros vamos a poder seleccionar un elemento de dentro de
nuestro árbol de DOM. Entonces, ¿cuál va a ser el elemento que nosotros vamos a querer
seleccionar? Muy bien, lo primero va a ser seleccionar el botón de agregar.
 [02:41] Es decir, queremos saber cuándo es que el usuario está haciendo clic justamente en
este elemento. ¿Cómo es que vamos a llegar a este elemento? Vamos a ver el código HTML.
Y si nosotros lo buscamos, tenemos aquí en la línea 33 que tenemos la etiqueta button, pero
nosotros pudiéramos seleccionarlo ya sea por clase o por la etiqueta HTML, pero existe algo
que se llaman los data atributes.
 [03:08] Esto lo que va a hacer es que nos va a ayudar a que, por ejemplo, si nosotros ahorita
que estamos empezando el proyecto le ponemos la clase btnCreate, pero en un futuro alguien
llega y le cambia la clase a buttonCreate, ya no va a funcionar porque nosotros estamos
perdiendo la referencia dentro de nuestro documento.
 [03:30] Entonces, que es que es justamente para lo que nos va a ayudar los data atributes.
Vamos a escribir data, todos los data atributes van a empezar con data, guión formación,
guión, btn. Lo que tú le pongas después de este data, realmente queda a tu discreción. En
este caso le vamos a poner form-btn. Muy bien, vamos a guardar entonces.
 [03:56] Voy a copiar data-form-btn, vamos a ir de nuevo a script.js, ahora entre comillas y
entre corchetes, lo que vamos a hacer es pegar el nombre de nuestro dataType. Muy bien.
Ahora vamos entonces a guardar a nuestro elemento en una constante, esto porque es algo
que no va a cambiar, entonces vamos a poner que esta constante se va a llamar btn.
 [04:27] Y vamos a decir que va a ser igual a document.querySelector y que va a seleccionar
el data atribute data-guión-form-btn. Muy bien, ahora voy a hacer un console.log de btn. Voy
a guardar este archivo. Vamos a regresar ahora a nuestro navegador, de nuevo inspeccionar y
vamos a la sección de la consola.
 [04:50] Como puedes darte cuenta, este console.log nos está indicando el elemento que
nosotros estamos seleccionando. Ahora, nosotros ya tenemos el elemento, es decir, tenemos
el btn. ¿Qué queremos? Queremos que cuando el usuario le dé clic nosotros sepamos que el
usuario está realizando esa acción.
 [05:12] Es decir, necesitamos que alguien escuche o, como se le conoce en inglés,
necesitamos un listener. Este listener, pues bueno, va a ser de tipo click. Tenemos algunos
otros listeners, como puede ser cuando nosotros arrastramos un elemento dentro de nuestra
página o cuando el usuario le da clic a alguna tecla, nosotros podemos escuchar ese evento,
que es el listener.
 [05:36] Y después vamos a tener la acción que se va a ejecutar cuando nosotros o cuando el
usuario genere este evento, es decir ahorita lo que quiero es que haga un console.log que
diga "crear tarea". Muy bien, entonces vamos por partes. Lo primero que nosotros ya
sabemos es que queremos que el elemento btn ejecute algo cuando el usuario le da clic.
 [06:04] Nosotros vimos que todos los elementos son objetos, por lo tanto tienen métodos y el
método que nos va a ayudar a generar un listener es AaddEventListener, el cual es una
función y va a recibir dos parámetros. El primero es cuál es el evento que quieres escuchar.
Pues bueno, va a ser el evento click.
 [06:30] Y después, ¿qué es lo que queremos que pase una vez que el usuario genera esta
acción? Entonces vamos a generar aquí una function. Muy bien, vamos entonces a cortar y
pegar el console.log y voy a quitar ese comentario de listener.
 [06:56] Muy bien, entonces vamos a guardar. Muy bien al parecer, no ha cambiado nada,
pero ahora si nosotros le damos clic, de hecho si alcanzas a ver, dice: "crear tarea" y se, se
refresca. De hecho, tú puedes ver aquí que si le doy clic en agregar, vuelve a recargar la
página.
 [07:15] Voy a poner aquí en la consola, hay un engrane, le doy clic y ahora vamos a poner
en Preserve log. Esto lo que nos va a ayudar es que cada vez que se recargue la página, va a
seguir persistiendo todos los console.logs que se hayan generado, es decir, voy a agregar,
agregar, y si te das cuenta, no se está eliminando nada de la consola.
 [07:37] Este comportamiento que se está generando es justamente por cómo funcionan los
formularios de HTML. En el siguiente video vamos a ver cómo tratar a este evento y poder
capturar lo que el usuario está escribiendo aquí, en nuestro input. Entonces nos vemos en la
siguiente clase.

 Transcripción

 [00:00] Muy bien, entonces nosotros ya logramos que cada vez que el usuario le da clic a
nuestro botón, nos aparezca un console.log con el texto crear tarea, pero no es lo que
queremos. Lo que queremos es que lo que escriba el usuario, nosotros podamos tenerlo
ahorita por lo menos dentro de este lado, dentro de nuestra consola.
 [00:22] Muy bien, entonces vamos a regresar al código. Y así como nosotros seleccionamos
nuestro botón. Vamos a seleccionar nuestro input y para eso vamos a agregar otro data. Va a
ser data-form-input. Muy bien. Vamos a guardar entonces el archivo index.html, vamos a
venir aquí y vamos a poner input. Vamos a decir que igual va a ser un
document.querySelector. ¿De qué? De nuestro data-form-input.
 [00:22] Muy bien. Entonces, ¿ahora, qué pasa si nosotros, por ejemplo, ponemos console.log
de input? Vamos a regresar a nuestra página web. Voy a limpiar la consola, voy a recargar
para que veamos aquí. Muy bien. Aquí nosotros tenemos entonces nuestro elemento input.
 [01:26] Pero no es lo que nosotros estamos buscando, estamos buscando el contenido. Este
contenido vamos a poder acceder a través de una propiedad llamada .value. Es decir, si yo
pongo (input.value), voy a guardar, voy a regresar aquí y si te das cuenta, aquí está
pareciendo que se ejecutó algo, pero no hay nada.
 [01:47] Esto porque todavía nuestro input no tiene ningún valor. Es decir, si yo escribo aquí,
por ejemplo hacer curso, ahorita todavía no va a funcionar. Porque lo que está haciendo es,
una vez que cargue el archivo, va a buscar este elemento, pero como la primera vez que
carga no tienen ningún contenido, nuestro input.value está vacío.
 [02:12] Para eso entonces lo que vamos a hacer es, muy bien, vamos a seleccionar nuestro
const input y dónde es que queremos que se ejecute. Bueno, aquí adentro. Una vez que el
botón haya sido cliqueado, entonces voy a darle clic aquí, vamos a copiar también se
console.log de input.value, vamos a guardar, vamos a regresar de nuevo a nuestra página,
voy a eliminar la consola y voy a escribir: Hacer curso de responsive.
 [02:43] Muy bien, le voy a dar clic en agregar. Muy bien. Como te pudiste dar cuenta, ya nos
está pareciendo el texto que nosotros estamos escribiendo en nuestro input. En el siguiente
curso, ahora sí, vamos a ver cómo trabajar con los formularios para evitar que se esté
recargando cada vez que escribimos algo dentro del input y le damos clic a agregar.

 Transcripción

 [00:00] Muy bien, pues gracias por acompañarme en este curso. Vamos a hacer un pequeño
resumen de qué fue lo que vimos. Recuerda que nosotros ya podemos poner aquí nuestro
nuestra tarea que queremos. Tenemos ya la capacidad de decir cuál tarea realizamos,
también podemos eliminarla. Vamos a ver, entonces rápido el código.
 [00:20] Lo que aprendimos prácticamente fue a manipular el DOM, cómo es que nosotros
estamos manipulando el DOM, bueno, utilizando document.querySelector,
document.createElement. También, nosotros ya pudimos agregar funciones o acciones que
se van a ejecutar una vez que el usuario interactúe con nuestra página web, que es gracias a
través de los ever listeners.
  [00:47] También entonces, podemos crear dinámicamente elementos HTML, agregarles
clases, eliminarlos, agregarles el contenido, irlos anidando para poder tener ese árbol de
DOM, que es entre padres, hijos, hermanos. Y pues, bueno, prácticamente eso.
 [01:03] También supimos cómo poder prevenir el comportamiento por defecto que tiene un
formulario, que es muy importante. Entonces, lo que nosotros acabamos de ver es la base de
muchos frameworks que tú puedes encontrar en el mercado, como react, angular, view, entre
otros. Y pues bueno, espero que te haya gustado, nos vemos en el siguiente curso.

06Haga lo que hicimos en aula

PRÓXIMA ACTIVIDAD



La práctica ayuda mucho en el aprendizaje. Es muy importante que implementes lo que fue
presentado en clase.
VER OPINIÓN DEL INSTRUCTOR

Opinión del instructor




Continúe con sus estudios, y si tiene alguna pregunta, ¡no dude en usar nuestro foro
07Lo que aprendimos
PRÓXIMA ACTIVIDAD



Lo que aprendimos en esta aula:

 Utilizar data-attributes
 Utilizar el método addEventListener para escuchar eventos de un elemento

 Prevenir el comportamiento patrón del formulario

 Transcripción

 [00:00] Muy bien entonces, para continuar con nuestro proyecto, lo primero que vamos a
hacer es crear una nueva rama en la cual vamos a ir trabajando todos los cambios de esta
clase 3. Voy a venir entonces a Visual Studio Code, voy a venir a la sección de terminal,
 nueva terminal, y voy a escribir git checkout -b y entre comillas el nombre de mi clase o el
nombre de mi rama, que en este caso sería "clase03".
 [00:24] Muy bien. Podemos cerrar entonces aquí nuestra terminal. Ahora, si recordamos
cómo es que llevamos hasta ahorita nuestro proyecto, nosotros ya podemos darle clic al
botón de agregar y vamos a poder ver cuál es el contenido del input.
 [00:39] Pero el comportamiento normal que suelen tener los inputs o los formularios es que
cuando tú le das clic a agregar o a enviar, se va a limpiar el contenido del input. Entonces
vamos a hacer eso. Vamos a venir entonces aquí a nuestro archivo script.js, voy a guardar
este input.value en una nueva constante, la cual vamos a llamar value.
 [01:05] Y este value va a ser igual entonces a input.value. Si quisiéramos vamos a poner aquí
el console.log de value, para verificar que todo siga funcionando igual. Voy a poner
entonces: Hacer curso de Python. Muy bien, entonces ya seguimos teniendo el mismo
resultado. Lo que nos hace falta es limpiar el input.
 [01:27] Lo que vamos a hacer es decir: input.value va a ser igual ahora a un string vacío.
Voy a guardar y vamos a regresar a nuestro proyecto. Muy bien, voy a limpiar aquí la
consola y voy a poner: Hacer curso de Python. Voy a darle clic en agregar y si te diste
cuenta, ya logramos que se limpiara nuestro input.
 [01:54] Podemos nosotros volver a escribir aquí algo como por ejemplo: Hacer curso de UI.
Muy bien. Entonces ya tenemos el comportamiento esperado. Ahora lo que queremos es que
lo que introduzca el usuario ahorita por lo menos se actualice en esta primera carta.
 [02:11] ¿Cómo vamos a lograr eso? Muy bien, vamos a regresar entonces, aquí a nuestro
index.html, y vamos a necesitar agregar un nuevo data atribute, entonces le voy a poner de
data-task, muy bien. Entonces, nosotros ya sabemos que vamos a poder seleccionar este
elemento. Voy a guardar.
 [02:31] Vamos a regresar entonces aquí y vamos a crear una nueva constante. Esta constante
se va a llamar task, que va a ser igual a document.querySelector. ¿Y cuál es ahora el selector
que queremos? Pues bueno, va a ser un data-task. Muy bien. Ahora lo que voy a poner aquí
en este console.log que tenemos es que me imprima task.
 [02:56] Voy a guardar. Muy bien. Voy a poner entonces aquí: Hacer curso de UX. Le voy a
dar clic en agregar y nosotros ya tenemos aquí en esta parte seleccionado el elemento que
queremos cambiar, o al cual le queremos poner el texto que pone el usuario. Muy bien.
 [03:15] Entonces lo que vamos a hacer es regresar a nuestro código index.html, vamos a
seleccionar todo el contenido de este data-task y vamos a cortarlo. Muy bien, le voy a dar
entonces aquí "Ctrl + X", voy a guardar, vamos a regresar y si te das cuenta está el card, pero
ya no tiene ningún texto.
 [03:37] Ahorita lo que vamos a hacer entonces es tener el texto o lo que lo que va poniendo
el usuario en el input y lo vamos a poner aquí. Muy bien, entonces vamos a regresar a
nuestro archivo script.js y vamos a crear una nueva constante. Esta constante se va a llamar
content, y va a ser igual a una propiedad que tiene JavaScript que se llama template strings.
 [04:00] Que se caracteriza porque utiliza estos caracteres que son como comillas, pero
invertidas. Te voy a poner aquí, se llaman backticks. Puedes buscarlo para ver cómo puedes
tú obtener este caracter en tu teclado. Pero bueno, una vez que ya lo obtienes. Lo que vamos
a hacer es pegar el contenido de nuestro HTML que teníamos ya definido. Muy bien.
 [04:26] Ahora, una de las ventajas que tiene estos templates strings es que nosotros podemos
combinar etiquetas HTML con propiedades o con variables de JavaScript. Entonces lo que
necesitamos es este value ponerlo aquí, en esta sección en donde es Hacer curso. Muy bien,
entonces el value que nosotros tenemos vamos a quererlo poner aquí.
 [04:51] Entonces necesitamos decirle a los templates strings que value es una variable de
JavaScript. ¿Y cómo logramos eso? Bueno, lo que vamos a hacer es poner símbolo de peso,
abrimos una llave y cerramos llave. Entonces, de esta manera, nosotros ya conseguimos
poner el valor del value en nuestro código HTML.
 [05:19] Muy bien. Entonces, ahora lo que vamos a hacer es poner un console.log pero ahora
de content. Vamos a guardar, vamos a regresar aquí a nuestro navegador y voy a poner que
ahora quiero hacer curso de Python. Muy bien. Voy a darle clic entonces en agregar.
 [05:40] Y si nosotros vemos el console.log nos está regresando la estructura HTML, pero ya
con el texto que escribió el usuario. Ahora lo único que nos hace falta es agregarlo a este
elemento LI. ¿Cómo vamos a hacer eso? Vamos a venir aquí y entonces, ¿a qué elemento se
 lo queremos agregar? Si recuerdas, se lo queremos agregar a task, porque task es el LI ese de
aquí.
 [06:10] Entonces vamos a poner aquí task, punto, y una propiedad que se llama innerHTML
con la cual le vamos a poder asignar código HTML, entonces lo único que necesitaríamos
sería escribir aquí que queremos que sea igual a content. Muy bien, entonces vamos a
guardar.
 [06:32] Vamos a regresar a nuestro navegador y vamos a poner entonces que queremos hacer
curso de SCRUM. Vamos a agregar y listo. Si te diste cuenta, ya estamos nosotros teniendo
la capacidad de poder poner la información que pone el usuario en el input en nuestra card.
 [06:56] Pero no es el funcionamiento que nosotros queremos. De hecho, si nosotros ponemos
aquí, por ejemplo: Hacer curso de React Native, lo único que está pasando es que está
cambiando el contenido de esta primera card, pero no es el funcionamiento que queremos.
 [07:13] Queremos que cada vez que escriba aquí una tarea, se vaya agregando a toda nuestra
lista, entonces eso es lo que vamos a estar haciendo en el siguiente video.

 Transcripción

 [00:00] Muy bien entonces, para continuar con nuestro proyecto y que podamos obtener lo
que escribe el usuario y crear una nueva carta por cada elemento que está poniendo este
usuario, vamos a necesitar entonces hacer unos pequeños cambios.
 [00:13] El primero, voy a limpiar el contenido de mi etiqueta UL. ¿Esto por qué? Porque
ahorita todo esto está siendo estático, lo cual no queremos. Por lo cual voy a entonces a
eliminar esto de aquí, recuerda que el LI tiene la clase cardiólogo, y lo que voy a hacer
entonces es borrarlo. Muy bien.
 [00:38] Ahora, vamos entonces a ponerle un data atribute al elemento que nosotros vamos a
querer seleccionar, que va a ser data-list. Muy bien. Voy a entonces a mi archivo script.js y
ahora, en lugar de simplemente hacer un querySelector, esto ya no va a funcionar porque ya
no existe el data-task. Lo que vamos a hacer entonces es crear un elemento de tipo LI.
 [01:07] ¿Y cómo logramos eso? Bueno, con document.createElement y que recibe como
parámetro el elemento que queremos crear, en este caso, va a ser un elemento 'li'. Vamos a
 guardar. Muy bien. Ahora, si nosotros venimos a nuestro proyecto, voy a poner aquí: Hacer
curso de DOM.
 [01:35] Seguimos teniendo el console.log con todo nuestro contenido, o con todo nuestro
template que ya teníamos en HTML, pero no se está visualizando aquí. ¿Esto por qué?
Porque aún no lo estamos agregando al elemento que lo va a contener, que también se le
conoce como elemento padre. ¿Entonces, cómo va a ser?
 [01:54] Pues bueno, nosotros ya tenemos, entonces si recuerdasm, tenemos el data-list,
entonces, ahora lo que vamos a hacer es crear un const list que va a ser igual a
dcument.querySelector. ¿Y qué le vamos a poner aquí? Data-list. Muy bien.
 [02:24] Ahora entonces, vamos a necesitar agregar esta tarea, toda esta tarea a nuestro
elemento lista. ¿Cómo hacemos eso? Bueno. Con una propiedad que se llama appendChild.
Entonces estamos diciéndole aquí: al elemento lista quiero agregarle un hijo. Si recuerdas el
objeto de nuestro código HTML se basa entre quiénes son padres y quiénes son hijos.
 [02:53] Entonces el padre va a ser la lista y el hijo va a ser la tarea. Entonces le voy a pasar
aquí que quiero que agregue la tarea. Vamos a guardar, vamos a venir aquí a nuestro
proyecto de nuevo, Hacer curso de react. Muy bien, entonces nosotros ya estamos logrando
poner nuestro contenido dinámicamente pero si te das cuenta, se ve feo. No es como lo
teníamos anteriormente.
 [03:22] Y si recuerdas, te había comentado que nuestro elemento LI tenía una clase. Esta
clase era card. Entonces lo que vamos a hacer, además de solamente crear el elemento,
vamos a agregarle esta clase. ¿Cómo lo hacemos? Con task.classList.add(), entonces con
esto, nosotros logramos agregar una nueva clase a este elemento, que en este caso va a ser
'card'.
 [03:53] Vamos a guardar y vamos entonces aquí a nuestro navegador a hacer curso de DOM.
Agregar y listo. Nosotros ya estamos entonces inyectando dinámicamente cada una de
nuestras tareas. Vamos ahora a Hacer curso de JavaScript. Muy bien, entonces nosotros ya
estamos logrando crear nuevas tareas con cada vez que el usuario escriba algo aquí.
 [04:19] Por ejemplo, hacer curso de Angular. Muy bien. Entonces vamos a dejar hasta aquí
esta clase y te veo en la clase cuatro. Pero antes de que se me olvide, vamos a hacer de nuevo
 aquí, venir a la terminal y vamos a hacer git add -A, git commit -m "clase03 completa". Y
listo. Te veo en la siguiente clase.

05Nodos de DOM
PRÓXIMA ACTIVIDAD



Todos los elementos en nuestro árbol de DOM son nodos y todos los nodos pueden ser accedidos
vía JavaScript. Los nodos pueden ser eliminados, creados o modificados. Durante el curso
utilizamos el método appendChild que siempre es implementado al final del nodo, para colocar un
nodo hijo dentro del nodo padre.

Existen otros métodos que podemos utilizar para manipular nodos:

 insertBefore(padre, hijo): Coloca un nodo antes del otro

 replaceChild(elemento1, elemento2): Sustituye el nodo del elemento 1 por el nodo del
elemento 2
 removeChild(elemento): Remueve un nodo del árbol
06Haga lo que hicimos en aula
PRÓXIMA ACTIVIDAD



La práctica ayuda mucho en el aprendizaje. Es muy importante que implementes lo que fue
presentado en clase.
VER OPINIÓN DEL INSTRUCTOR

Opinión del instructor




Continúe con sus estudios, y si tiene alguna pregunta, ¡no dude en usar nuestro foro!

Transcripción

[00:00] Muy bien, entonces vamos a continuar con nuestro proyecto. Si recuerdas lo que vimos en
la última clase, lo que aquí ya fuimos capaces de hacer es agregar un texto, darle clic en agregar y
que se agregue ya dinámicamente a nuestra lista. Lo que vamos a trabajar ahora es cuando le demos
clic a este elemento, que cambie el estilo CCS para que nos muestre que esta tarea ya la realizamos.

[00:26] Vamos a empezar entonces. Vamos a regresar a nuestro código. Muy bien. ¿Qué es lo que
vamos a hacer? Bueno, lo primero que vamos a hacer es este elemento que nosotros tenemos aquí
en nuestra línea 13, lo vamos a convertir en un elemento que va a vivir dentro de una función, para
que nosotros mandemos a llamar esa función y nos regrese directamente este elemento.

[00:52] Vamos a la práctica para que veas a lo que me refiero. Justo debajo de la línea 27, en este
caso, donde tengo el addEventListener del botón, lo que voy a hacer es crear una nueva función. Le
voy a llamar checkComplete. Muy bien. Esta constante va a ser igual a un arrow function.
Recuerda, abre y cierra llaves y listo. Entonces, vamos a ver cuál es la estructura.

[01:18] Este elemento se compone de una etiqueta i y tiene tres clases: far, fa-check-square y la
clase icon. Muy bien, entonces vamos a empezar primero con crear este elemento. Lo que voy a
hacer es const i, que es el nombre del elemento, va a ser igual a document.createElement() y le voy
a pasar entre comillas el tipo de elemento que va a ser un "i". Muy bien.

[01:48] Después lo que voy a hacer es agregarle estas clases. Vamos entonces a poner:
i.classList.add() y ahorita lo que vamos a hacer entonces es copiar todo este string de las clases y lo
vamos a pegar. Muy bien. Ahora lo que vamos a hacer es regresar nuestro elemento i. Muy bien.
Entonces, ¿cuál sería la manera en la que pensaríamos que pudiera funcionar?

[02:25] Pues bueno. Si te das cuenta, esto de aquí se genera con esto de aquí. Lo que voy a hacer es
eliminar este elemento y mandar a llamar aquí nuestra función checkComplete. Muy bien. Voy a
guardar, vamos a regresar a nuestra página. Muy bien. Si te das cuenta, nos está apareciendo un
error. ¿Cuál es este?

[03:00] Lo que nos está diciendo primeramente es que estamos mandando muchos caracteres,
cuando realmente solo debería de ser una sola línea de caracteres, sin separación por strings, ¿cómo
solucionamos esto? Lo primero que vamos a hacer es, bueno, lo podemos hacer de dos maneras
diferentes.

[03:20] Una es copiar toda esta línea y pegarla acá, y por cada una de las clases que queremos
mandamos a llamar a esta función de add. Entonces voy a hacer eso rápido. Muy bien. Vamos a
poner primero far, después far-square y por último icon. Muy bien. Vamos a guardar entonces,
vamos a volver a probar.

[03:52] Muy bien, ya no nos mandó ningún error, pero está pasando algo curioso, si te das cuenta,
sigue funcionando aquí, nos sigue agregando el texto de hacer curso, el iconito, pero ya no nos está
regresando esto, más bien lo que está poniendo es un object HTML Element. ¿Entonces, qué es lo
que está pasando?

[04:09] Voy a poner aquí, antes este de mandar a llamar el content, voy a hacer un
console.log(checkComplete()) para ver qué es lo que nos está regresando esta función. Voy a
guardar, voy a regresar. Vamos a quitar este Preserve log y voy a volver a poner aquí Hacer curso
de react. Muy bien. O sea, si te das cuenta sí es un elemento HTML lo que nos está regresando.

[04:39] Pero nosotros no podemos estar combinando strings, que esto es un string con un elemento
que es de tipo HTML. Entonces, ¿qué es lo que vamos a hacer? Vamos entonces a generar toda esa
estructura a través de código o dinámicamente con JavaScript, justo como lo hemos estado
haciendo hasta ahorita, con la función createElement.

[05:02] Entonces, ¿qué es lo primero que vamos a tener que hacer? Vamos, de lo primero que sería
el div. Vamos entonces aquí a hacer una constante que se va a llamar taskContent. Muy bien.
Vamos a mandar a llamar document.createElement. ¿Y qué tipo va a ser? Pues bueno, va a ser de
tipo div, que es este de aquí.

[05:30] Para irnos haciendo referencia a lo que voy a hacer es eliminar esto de aquí para saber que
esto ya lo tenemos hecho. Muy bien, entonces ya tenemos el div. Ahora, ¿qué es lo que
necesitaríamos? Bueno, nosotros podemos agregar justo como lo habíamos hecho aquí abajo
appendChild, podemos agregarle el hijo ya directamente.

[05:48] Vamos entonces a poner taskContent.appendChild(). ¿Y qué hijo va a ser? Pues bueno, va a
ser lo que nos regresa checkComplete. Entonces lo que vamos a hacer aquí, podemos hacer esto. Al
final de cuentas lo que se está generando es un elemento ahí. Muy bien, vamos a guardar.

[06:10] De hecho, si nosotros regresamos hacia nuestra página web, sigue sin funcionar. ¿Esto por
qué? Porque taskContent no lo hemos sustituido con este task.inner. Entonces lo que voy a hacer
ahorita es en lugar de poner innerHTML, lo que voy a hacer es comentarlo, y lo que voy a hacer es
task.appendChild. ¿Cuál es el hijo que queremos ponerle? Pues el taskContent.

[06:44] Muy bien, vamos a guardar. Vamos a Hacer curso de react. Muy bien. Ahora entonces ya
logramos posicionar nuestro icono, pero ya se fue el texto y el iconito para eliminarlo. Entonces
vamos a hacer eso, voy a eliminar esto de aquí, ¿y qué es lo que nos hace falta traducir por así
decirlo? Este span.

[07:13] Vamos a crear entonces un const que se va a llamar titleTask y va a ser igual a
document.createElement y el tipo de este elemento va a ser span. Después vamos a ponerle a este
titleTask la clase. ¿Qué clase es? La clase task, muy bien. Entonces vamos a ponerle aquí que es la
clase task.

[07:42] Y por último, si lo recuerdas, nosotros ya lo hicimos anteriormente, vamos a agregarle el

innerText, que va a ser igual a este value. Y listo. Podemos entonces nosotros eliminar esto de aquí.
Vamos entonces a regresar. Vamos a volver a hacer la prueba y sigue habiendo un error. ¿Eso por
qué? Porque a pesar de que nosotros estamos generando toda la estructura, aún no se la hemos
agregado al elemento padre.

[08:18]¿Y cuál es ese elemento padre taskContent. Entonces por último, lo que vamos a hacer es
taskContent, punto, de nuevo, appendChild, ¿y cuál es el hijo que le vamos a agregar? titleTask.
Vamos a guardar entonces aquí, vamos a hacer aquí Hacer curso de react. Muy bien.
[08:40] Entonces hasta ahorita ya tenemos dos de tres elementos que teníamos anteriormente, que
es el iconito de check, el texto y, bueno, nos hace falta el botoncito para eliminar. Pero algo que
tienes que tener en cuenta es que tienen un orden los appendChilds, es decir, lo que estamos
haciendo nosotros primero es agregar el botón de checkComplete y después estamos agregando el
titleTask.

[09:17] Cosa muy diferente pasaría si, por ejemplo, corto este elemento de aquí, el appendChild, y
lo pongo justo después de cuando agregamos el título de la tarea. Voy a guardar, vamos a regresar y
vamos a volver a hacer la prueba. Hacer curso de react. Okay, entonces, si te diste cuenta, lo
invirtió, esto como te comentaba lee de arriba hacia abajo el código, y lo primero que encuentra es
lo primero que hace.

[09:36] Entonces, para que nosotros podamos seguir teniendo la estructura que queríamos hacer, lo
primero que vamos a hacer es mandar a llamar el appendChild para que agregue el icono primero y
después el título de la tarea. Muy bien. Por ahora, vamos a dejar de lado este content, lo vamos a
ver en la siguiente clase, pero bueno, ya vamos avanzando.

[10:02] De hecho voy a guardar y otra vez, para volver a probar lo que llevamos, hacer curso de
react. Okay, nosotros ya logramos que se posicione aquí nuestro elemento, pero si le damos clic,
realmente no está haciendo nada. Entonces vamos a trabajar en eso en el siguiente video.

Transcripción

[00:00] Vamos a continuar entonces con la funcionalidad de nuestra plataforma. Vamos a volver a
ver qué es lo que teníamos. Teníamos ya nuestro iconito que si le damos clic, bueno, no estaba
haciendo nada. Ahora, vamos a modificar aquí algo super rápido.

[00:14] Lo que nosotros estamos haciendo aquí es agregar las tres clases que se necesitan, pero si te
das cuenta, esta parte es muy repetitiva, entonces una manera que puede ser mejor para que esté
más limpio tu código es pasarle con comillas todas las clases que tú necesites.
[00:37] En este caso, pues bueno, van a ser estas tres, voy a eliminar entonces los otros
classList.add que teníamos anteriormente. Vamos a regresar, Hacer curso de react, y listo, sigue
funcionando exactamente igual, esto fue nada más para que para que supieras que existe esta otra
manera en la cual podemos agregar las clases.

[01:00] Ahora vamos, entonces a agregar nuestro addEventListener a nuestro elemento. Voy a crear
entonces aquí abajo una constante que se va a llamar completeTask, que va a ser igual a un arrow
function. Muy bien, entonces ahorita lo único que me interesa es que haga un console.log de
completeTask. Muy bien, entonces, vamos a agregárselo a nuestro elemento i, que es el que nos
interesa agregar del addEventListener.

[01:33] Entonces vamos a darle i.addEventListener, y recuerda como primer parámetro lleva el tipo
del elemento que es "click", y el segundo, la función que se va a ejecutar cuando el usuario le dé
clic. Entonces vamos a darle completeTask, vamos a guardar, vamos a regresar aquí en nuestro
proyecto Hacer curso de react.

[01:56] Muy bien. Ahí ya lo estamos agregando, y ahora vamos a darle clic, y entonces estamos
escuchando el evento de click. ¿Ahora qué es lo que necesitamos? Necesitamos cambiar la clase de
este elemento. ¿Y por qué me refiero a esta clase?

[02:12] Bueno, esto que tú ves aquí, el elemento i, si te das cuenta tiene estas dos clases que es ar,
fa-check-square, que estos vienen de una librería que se llama Font Awesome. De hecho, vamos a
verla. Vamos a buscar Font Awesome. Muy bien. Esta librería la estamos importando aquí, en
nuestro archivo index.html, aquí en esta parte, entonces para que tengas aquí la referencia.

[02:37] Vamos a regresar entonces aquí en nuestra página, vamos a darle aquí donde dice iconos, y
bueno, ¿cuál es el icono? Yo sé que es un icono de tipo check. Entonces lo que vamos a querer es
cambiarlo por este otro icono. Vamos a ver entonces. Aquí dice que para agregarlo, hay que poner
la etiqueta i y estas dos clases: fas y fa-check-square.
[03:00] Entonces, si nosotros regresamos, nosotros estamos viendo que ya tenemos aquí esta
etiqueta, perdón, esta clase fa-check. Ahora, ¿cómo nosotros vamos a poder agregarle o saber cuál
es el elemento que está tocando el usuario? Porque de hecho si nosotros estamos aquí, Hacer curso
de JavaScript, voy acá, ambos me están regresando lo mismo.

[03:30] No tenemos una referencia a cuál elemento es el que tenemos que hacer este cambio de la
clase. ¿Cómo vamos a solucionar esto? Bueno, si recuerdas, nosotros recibimos nuestro evento. En
este caso le voy a poner event. Lo que voy a hacer es sustituir este completeTask por event, voy a
guardarlo, vamos a regresar de nuevo.

[03:50] Y voy a hacer aquí entonces: Hacer curso de react. Muy bien. Voy a eliminar entonces esto
de aquí voy a darle clic, y si te das cuenta, me está apareciendo todo un objeto y este objeto hace
referencia al elemento dentro del DOM donde estamos nosotros realizando la acción. De hecho,
tenemos aquí algo que se llama el path, el cual nos muestra el árbol o cuál es la estructura del
elemento el cual estamos tocando.

[04:21] Como puedes darte cuenta, el elemento último es el window, recuerda, el elemento más
grandes window, dentro de window vive document, HTML, body y así sucesivamente hasta poder
llegar a este elemento. Entonces, para nosotros, poder seleccionar o saber cuál es el elemento que
está tocando el usuario, hay que acceder a esta propiedad target.

[04:42] Que si te das cuenta, si me posiciono aquí arriba, se ilumina del lado izquierdo. Ahí me
quito, ahí me pongo y se ilumina. Entonces, de esta manera es como vamos a saber cuál es el
elemento. Vamos entonces a hacer event.target para poder acceder a ese objeto. Vamos a poner
hacer curso de react. Muy bien. Entonces le voy a dar clic aquí y listo, ya estamos accediendo a este
elemento.

[05:10] ¿Ahora qué es lo que hay que hacer? Hay que eliminar esta clase, agregar la clase fas. ¿Y
qué más? Agregar también la clase que le va a dar el color azul a nuestro icono. Entonces vamos a
empezar primero con este far. Muy bien. ¿Cuál sería entonces una solución que pudiéramos
obtener? Tal vez lo primero hay que agregar este event.target a una nueva constante, que se va a
llamar element.

[05:44] Voy a eliminar entonces esto de aquí. Entonces estamos asignando esta constante element a
event.target. Ahora lo que vamos a hacer es a element, punto, si recuerdas, tenemos classList y
tenemos el método add en el cual vamos a agregar. Vamos, entonces, a agregar. ¿Recuerdas cuál
era la clase? Aquí viene, fas. Entonces, vamos a agregar la clase fas.

[06:10] Y así como somos capaces de agregar nuevas clases, también somos capaces de quitar o de
eliminar clases que existen en el elemento. Vamos entonces a poner element.classList.remove. Y de
la misma manera, va a recibir como parámetro el nombre de la clase, que en este caso va a ser far.
Muy bien. Además, también vamos a agregar la clase que va a ponerle el color azul, el que va a
marcar que ya está completada esa tarea.

[06:42] ¿Cuál es el nombre de esa clase? CompleteIcon. Entonces vamos a venir de nuevo acá:
element.classList, punto, la vamos a agregar, y de nuevo el completeIcon. Muy bien. Vamos a
guardar. Entonces vamos a guardar entonces y vamos a volver a probar. Voy a poner entonces:
Hacer curso de react. Agregar. Muy bien.

[07:05] Le voy a dar clic entonces, y si te diste cuenta ya hizo el cambio directamente. Vamos a
inspeccionar nuestro elemento aquí. Este es el elemento, vamos a ver qué es lo que tiene. Se ve un
poco más pequeño esto de aquí. Tenemos entonces la clase fa-check-square, la clase hay icon y la
que nos interesaba, fas, y también completeIcon.

[07:30] Ahora, ¿qué es lo que pasa si yo vengo y le vuelvo a dar clic? De hecho, tendríamos que
poder seleccionar y deseleccionar si hicimos o no una tarea. Entonces, realmente para poder llegar
a este punto es algo muy sencillo. Así como nosotros tenemos los métodos add y remove, también
tenemos una función, por así decirlo, comodín que se llama toggle, que lo que hace es verifica si
existe o no la clase.
[08:03] Si existe, la quito; y si no existe, la pongo. Entonces vamos a hacer este toggle con estas
tres clases. Vamos entonces de nuevo, voy a hacer esto un poquito más grande, muy bien. Voy a
entonces poner: Hacer curso de react. Vamos a agregar. Le doy ahí de que ya se completó la tarea,
le vuelvo a dar y se está cambiando.

[08:27] Entonces dinámicamente ya estamos haciendo que agregamos la tarea con el texto o el
nombre de la tarea, y también ya estamos logrando saber cuando el usuario le está dando clic,
cambiar las clases o cambiar el estado de este elemento y listo, ya está agarrando mas forma
nuestro proyecto. Te veo en el siguiente video.

Transcripción

[00:00] Vamos a continuar entonces con nuestro proyecto. Si recuerdas, pues bueno, ya logramos
hacer que si ponemos el nombre de la tarea, la podemos agregar, le podemos ya dar clic a nuestro
elemento y hace el cambio de las clases para poder ver si está o no realizada esta tarea.

[00:18] Si recuerdas, nosotros acabamos de agregar esta tarea, perdón, esta función: completeTask.
Entonces, nosotros a como está ahorita somos capaces de venir aquí, y de hecho, si te diste cuenta,
me está autocompletando el nombre de la función completeTask. Entonces, el usuario tiene acceso
a esta lógica de negocio.

[00:42] Tenemos acceso a completeTask, también tenemos acceso, por ejemplo a checkComplete,
y entonces lo que nosotros queremos es que esta estas funciones no estén al alcance del usuario.
¿Esto por qué? Porque nosotros cuando estamos definiendo estas funciones, lo que está haciendo es
agregarse al scope global.

[01:03] Es decir, si recuerdas, cuando nosotros creamos una variable dentro de una función, esta
variable o constante va a existir solamente dentro de esa función. Por ejemplo, si yo aquí voy y
pongo un console.log de, por ejemplo input, que vive dentro de createTask, vamos a ver qué es lo
que pasa.
[01:23] Voy a escribir aquí input, vamos a guardar, regresamos al proyecto y ya nos está
apareciendo un error en el cual nos está comentando que input no está definido, esto porque queda
fuera del alcance o del scope.

[01:37] Entonces, para poder solucionar esto y que quede un poco más seguro nuestro código,
vamos a utilizar algo que se llama immediately invoked function expression o bien por sus siglas:
IIFE, que es tal cual, son funciones que en cuanto se declaran, se ejecutan.

[01:55] Entonces para poder ver cómo es que funciona lo que vamos a hacer es vamos a abrir un
paréntesis, vamos a crear un arrow function, voy a abrir aquí la llave, voy a dar un enter y voy a
venir hasta aquí abajo. ¿Qué es lo que vamos a hacer? Pues bueno, vamos a cerrar nuestro
paréntesis, que este paréntesis es de este, perdón, llaves.

[02:21] Y por último, lo que vamos a hacer es cerrarlo. Entonces, aquí estamos definiendo la
función, pero para que funcione, lo que vamos a tener que hacer es mandarla a llamar
inmediatamente, entonces vamos a guardar, vamos a regresar aquí a nuestro código y si recuerdas,
pues bueno, ¿cuál era el nombre? CheckComplete es el nombre de la función.

[02:46] Y ahora, si lo tratamos de invocar, ¿qué es lo que nos está diciendo? Que chequeComplete
no está definido. Pero eso no significa que nuestra aplicación deje de funcionar. Vamos a ver
entonces y listo, si seguimos viendo, pues bueno, está funcionando como lo hacía anteriormente.

[03:07] Por último, lo que vamos a hacer entonces es limpiar un poco el código, estos console.logs
ya no los vamos a utilizar, entonces bueno, vamos a eliminarlos. Vamos a venir también aquí a esta
línea 13, y bueno, entonces vamos a guardar y debería de funcionar exactamente igual.

[03:36] Muy bien. Hasta aquí vamos a dejar esta clase, y ya en la siguiente clase vamos a terminar
todo este curso, pero también vamos a agregar lo último que nos hace falta, agregar el botoncito
para que cuando le demos clic, se elimine la tarea. Entonces te veo en la siguiente clase.

06Haga lo que hicimos en aula

PRÓXIMA ACTIVIDAD

 

La práctica ayuda mucho en el aprendizaje. Es muy importante que implementes lo que fue
presentado en clase.
VER OPINIÓN DEL INSTRUCTOR

Opinión del instructor




Continúe con sus estudios, y si tiene alguna pregunta, ¡no dude en usar nuestro foro!
07Lo que aprendimos
PRÓXIMA ACTIVIDAD



Lo que aprendimos en esta aula:

 Agregar la clase CSS utilizando el método toggle
 Utilizar el atributo parentElement para subir un elemento en el árbol del DOM
 Encontrar el objetivo del evento utilizando la propiedad target

 Utilizar IIFE

 Transcripción

 [00:00] Hola, bienvenido a la última clase de este curso de manipulación de DOM con
JavaScript. Y pues bueno, vamos a seguir entonces ya para poder terminar nuestro proyecto.
Si recuerdas, nosotros ya somos capaces de ingresar aquí algo que tenemos que hacer, por
ejemplo: Hacer curso de angular. Lo podemos agregar.
 [00:21] Podemos decir qué tarea ya hemos realizado, igual podemos deseleccionarla en caso
de que así lo necesitemos. Pero ahora lo que nos hace falta es poder eliminar nuestras tareas
que hemos ingresado a través del input. Entonces vamos a hacer eso, vamos a regresar a
nuestro Visual Studio Code, pero antes, lo que voy a hacer, de nuevo para no perder la
costumbre, es hacer un commit.
 [00:46] Recuerda que esto no necesitas hacerlo, es solamente para poder llevar aquí el
control. Pero bueno, lo único que voy a hacer es git add -A, git commit -m "clase04
completada". Muy bien, entonces para continuar, si recuerdas, nosotros creamos aquí con
esta constante nuestro elemento botón, creamos también aquí nuestro elemento o más bien la
 función que se va a ejecutar una vez que el usuario le dé clic a nuestro elemento
checkComplete.
 [01:23] Entonces necesitamos utilizar la misma lógica para el botón de eliminar. Si
recuerdas, nosotros aquí tenemos justamente la estructura HTML junto con sus clases para
poder llegar a la vista que nosotros teníamos anteriormente. Entonces es lo que vamos a
hacer. Muy bien. Lo que voy a hacer entonces aquí es crear una constante que se llame
delete.
 [01:52] No se puede llamar delete porque esta es una palabra reservada tal cual de
JavaScript. Entonces vamos a ponerle deleteBtn, de button. Vamos a crear entonces de
nuevo una función arrow function o función anónima. Bueno, si nosotros nos basamos en
esta estructura que hay aquí, de hecho la voy a cortar, voy a quitar aquí esto y voy a venir
aquí abajo para solamente tener la referencia, pues bueno.
 [02:26] ¿Qué es lo que tenemos? Tenemos entonces una constante que igual nosotros le
podemos poner realmente como nosotros queramos. En este caso, pues bueno, le voy a poner
i. Es más, incluso hasta este deleteBtn pudiéramos cambiar porque realmente no es un botón,
sino es un icono. Pues vamos a ponerle entonces deleteIcon.
 [02:45] Entonces lo que voy a hacer aquí es tener nuestra constante y que de nuevo va a ser
un document.createElement. ¿De qué tipo? De nuevo, pues bueno, va a ser de tipo "i".
¿Ahora qué es lo que vamos a hacer? Pues bueno, hay que agregarle estas cuatro clases.
Entonces muy bien, lo único que tenemos que hacer entonces es i.classList.add().
 [03:10] Y si recuerdas como nosotros le habíamos puesto aquí arriba, podemos ya sea
escribir cuatro veces para cada una de las clases que queremos agregar, o bien lo podemos
poner en una misma función add pero separados por comas, que es lo que vamos a hacer.
 [03:30] Entonces voy a poner como primero fas, después voy a poner esta otra de aquí. Muy
bien. Después voy a poner, entonces trachIcon y por último, la clase icon. Muy bien.
Entonces, aquí nosotros ya estamos generando el elemento. Ya puedo, entonces, eliminar
esta constante de content. Muy bien. ¿Ahora qué es lo que necesitamos hacer?
 [03:58] Bueno, necesitamos dos cosas. Retornar nuestro elemento i justamente para que
nosotros podamos mandar a llamar a esta función, pero también necesitamos crear el
addEventListener. Entonces lo que voy a hacer aquí antes de eso, o es más aquí lo que voy a
 hacer es i.addEventListener, si recuerdas, y recibe dos parámetros. El primero es el tipo, que
en este caso va a ser click, y el segundo, la función.
 [04:30] Entonces aquí lo que nosotros podemos hacer es crear una constante, que se llame
deleteTask, tal cual. Y ahorita lo único que me interesa es que de nuevo, solamente imprima
un console.log de "Eliminar tarea". Muy bien, entonces aquí si recuerdas el segundo
parámetro pues es justamente una función.
 [04:56] Entonces voy a copiar el nombre de deleteTask, voy a pegarlo, voy a guardar. ¿Y
cuál es el tema o cuál es la situación que tenemos ahorita? No lo estamos ejecutando.
Entonces, así como nosotros aquí en esta parte mandamos a llamar
taskContent.appendChild(checkComplete()); es lo mismo que nosotros vamos a necesitar
con esta función.
 [05:20] Entonces muy bien, lo que voy a hacer es deleteIcon, copiar el nombre de la función,
y aquí lo que voy a hacer entonces es decir taskContent.appendChild, el nombre de la
función, que es deleteIcon, voy a guardar y vamos a regresar entonces a nuestro proyecto.
Aquí vamos a ver, voy a poner: Hacer curso de react.
 [05:51] Voy a agregar. Okay, necesitamos ver porque aquí hay un error en la parte de la
clase, pero bueno, al menos lo que nosotros tenemos ahorita ya es que si le podemos dar clic,
nos aparece eliminar tareas. Ahora lo que voy a hacer es arreglar justamente cuál debería de
ser el contenido que tiene que tener nuestro div.
 [06:19] Entonces vamos a inspeccionar. Muy bien, entonces regresando a nuestro código, lo
primero que tenemos que ver es que aquí hubo un typo, es decir, yo en lugar de escribir
trashIcon, pues bueno, decía track al parecer. Entonces, voy a guardar, de nuevo voy a
regresar aquí a mi plataforma hacer curso de react.
 [06:44] Bueno, aquí por lo menos ya tenemos entonces nuestro botoncito que viene con el
color rojo. Y de nuevo, si nosotros ponemos aquí el botón y le damos clic, pues bueno, ya
me aparece eliminar tarea. Ahora lo que necesitamos es agregar la clase para que vuelva a
tener la misma estructura que tenía al inicio. Que queremos que el botón quede de este lado.
 [07:05] Entonces, para eso, bueno, también nosotros aquí ya tenemos la función que va a
crear nuestro elemento. Ahora entonces lo que tenemos que hacer es agregárselo al elemento
padre. ¿Y cuál es ese elemento padre que nosotros queremos? Pues bueno, va a ser
 task.appendChild, y vamos a mandar a llamar entonces aquí nuestra función, que se llama
deleteIcon. Vamos a guardar.
 [07:40] Regresamos. Vamos a hacer curso de node, vamos a agregar y listo. Si te das cuenta,
nosotros ya tenemos nuestro icono. Le podemos dar clic, aquí ya tenemos eliminar tarea y
sigue funcionando de la misma manera. Entonces, ahora lo que necesitamos es eliminar todo
este elemento, sea todo este card.
 [08:04] Si recuerdas, nosotros podemos aceptar o recibir parámetros. Entonces, voy a poner
aquí, le voy a llamar evento. Vamos a ver entonces qué es lo que pasa cuando le hago
console.log(evento). Es más, para seguir teniendo la misma coherencia, lo que voy a hacer
aquí es poner event. Vamos a guardar. Vamos a hacer curso de vuelta, agregar, le voy a dar
clic.
 [08:37] Okay, ¿qué es lo que tenemos? Si recuerdas, tenemos justamente el evento, nosotros
queremos entrar al punto target, aquí ya tenemos nuestro elemento. Igual solamente para
recordar hacer curso de view.
 [08:54] Entonces, si nosotros venimos aquí, ya tenemos acceso a este elemento, pero no es el
elemento que nosotros queremos eliminar, sino lo que queremos eliminar, si nos ponemos
aquí a inspeccionar, ¿es qué? No al hermano tampoco, porque si eliminamos al hermano,
pues solamente quitaríamos esto de aquí. Lo que queremos es poder eliminar la card
completa. Es decir, aquí el padre.
 [09:19] Entonces, ¿cómo es que podemos hacer eso? Bueno, si nosotros nos ponemos aquí a
inspeccionar, voy a hacer de nuevo, igual solo es para que puedas tener un poquito más de
contexto, vamos a seguir viendo aquí todo esto. Vamos a ver. Si recuerdas, teníamos la parte
del path, teníamos pues diferentes propiedades.
 [09:50] Pero aquí al parecer no tenemos una manera de saber cuál es nuestro padre, por así
decirlo, o más bien, ¿cuál sería el padre? Sería este elemento de aquí. Mira, aquí tenemos el
elemento tal cual, que nosotros tenemos que es el icono, y aquí tenemos el elemento padre,
entonces necesitamos acceder a este de aquí. Muy bien, vamos a ver entonces cómo es que
podemos hacerlo.
 [10:18] Vamos a ver qué pasa si le pongo okay. Entonces lo que vamos a hacer es agregar.
Muy bien, entonces, ahora lo que vamos a ver es event.parentElement. Vamos a ver qué es lo
 que nos trae. Hacer curso de react, agregar. Me aparece undefined. ¿Por qué? Porque lo que
necesitamos también es el event.target.parentElement. Vamos a ver, entonces.
 [10:58] Muy bien. Entonces, ¿qué es lo que tenemos? Nosotros podemos acceder a nuestro
evento, dentro del evento vamos a acceder a target, y dentro de target vamos a acceder a
nuestro elemento padre, que es el parentElement. De hecho, aquí lo tenemos, ahora voy a
agregar otra tarea, por ejemplo, hacer curso de CCS. Vamos a agregarlo. Muy bien,
entonces, ahora lo que voy a hacer es darle clic.
 [11:25] Y si te das cuenta, a pesar de que tengo dos tareas, solamente se va a iluminar, por
así decirlo, o seleccionar la tarea padre o el card padre. Entonces listo, prácticamente ya
tenemos nuestra plataforma hecha, que es lo único que nos hace falta. Pues bueno, lo que
voy a hacer aquí es una constante que se va a llamar a parent, tal cual. Muy bien. Ahora
igual.
 [11:56] Voy a eliminar este console.log, voy a hacer un console.log, igual esto nada más
para corroborar que sigamos teniendo el mismo resultado igual. Hacer curso de react. Le voy
a dar clic y listo. Tenemos el elemento. Ahora entonces por último, lo que nos hace falta es
hacer un parent, punto, y tenemos un método que se llama remove.
 [12:21] Lo vamos a mandar a llamar, voy a guardar y vamos a ver qué es lo que sucede.
Hacer curso de react, vamos a agregar. Podemos aquí seleccionarlo y listo, también podemos
eliminarlo. Entonces de hecho, si nosotros nos ponemos aquí a ver todos los elementos, voy
a poner aquí hacer curso de react, vamos a agregarlo, vamos a venir a buscarlo aquí. Aquí es
donde tenemos justamente nuestro li.
 [12:50] ¿Y ahora qué es lo que vamos a hacer? Vamos a darle clic. Y si te diste cuenta,
desapareció o lo eliminamos. Y de hecho si nosotros igual aquí hacer curso de react, no
vamos a poner a hacer curso de react, Hacer curso de la de node, hacer curso de angular.
Muy bien, entonces ya lo tenemos aquí.
 [13:15] Nosotros podemos decir, bueno, ya tenemos estas tareas hechas, solamente estas dos.
Podemos empezar las eliminar por separado y ya funcionan como elementos que no están
relacionados. Entonces hasta aquí nosotros ya terminamos la función de nuestra página web,
pero todavía no terminamos el curso.
 [13:36] En el siguiente video lo que vamos a hacer es mejorar un poco nuestro código, pero
bueno, ya está funcionando. Ya podemos entonces crear una tarea, podemos seleccionar y
decir que ya la hicimos, o que ya la completamos, también podemos deseleccionar y también
podemos ya entonces eliminarla. Pero bueno, entonces ya para terminar, nos vemos en el
siguiente video, ya para pulir algunos detalles solamente.

 Transcripción

 [00:00] Muy bien, entonces en para continuar con nuestro proyecto o ya nada más para darle
los últimos detalles, lo que vamos a hacer es implementar algo que se llaman módulos.
Entonces, ¿qué es lo que necesitamos? Pues bueno, lo que nosotros podemos ver aquí es que
tenemos 55 líneas.
 [00:22] Y lo que nosotros entonces podemos hacer es crear justamente módulos, los cuales
se van a encargar solamente de contener cierta parte de código, entonces para poder hacer
eso, lo que voy a hacer aquí es crear una carpeta que se va a llamar components. Muy bien,
ahora entonces voy a crear un archivo que se va a llamar checkComplete.
 [00:51] Y también voy a crear otro archivo que se va a llamar deleteIcon. ¿Esto por qué?
Porque son elementos diferentes. Tenemos este de acá, que es para crear el icono de
checkComplete y la función que se va a mandar a llamar cuando le dan clic y lo mismo con
el deleteIcon y la función deleteTask. Entonces bueno, voy a crear el otro archivo que se va a
llamar deleteIcon.js. Muy bien.
 [01:23] Ahora entonces lo que voy a hacer es venir, voy a cortar todo este código. ¿Cuál es?
Es el checkComplete que es este de aquí. Voy a guardar, voy a venir aquí y voy a cortar
también de nuevo esto de acá, que es el deleteIcon. Ahora nosotros ya tenemos nuestro
código separado, por así decirlo, pero lo que necesitamos es de alguna manera importarlo
aquí.
 [02:02] De hecho, si nosotros, por ejemplo venimos aquí, voy a quitar el IFEE, voy a
guardar, voy a regresar de nuevo aquí a mi a mi código. Vamos a ver qué pasa, voy a
recargar. Hacer curso de react. Me aparece un error, me dice que createTask no está
definido. Bueno, checkComplete no está definido.
 [02:29] Entonces lo que necesitamos es, así como nosotros lo estamos creando aquí,
necesitamos exportarlo. ¿Cómo hacemos eso? Con un export default. ¿Y cuál es lo que
queremos exportar? deleteIcon. Voy a guardar y lo mismo voy a hacer con el
checkComplete: export default checkComplete.
 [02:55] Ahora entonces, así como nosotros tenemos un export, también tenemos un import y
los imports, bueno, vamos a ponerlos hasta aquí arriba. Lo que voy a hacer entonces es
import checkComplete. ¿De dónde? Pues bueno, le tenemos que dar la ruta. Entonces esta
ruta puede ser con punto, slash, y aquí ya me hace el autocompletado.
 [03:18] Vive dentro de la carpeta components y el archivo se llama checkComplete. Y
después voy a hacer lo mismo con el import deleteIcon. ¿De dónde? Pues bueno, va a ser
igual, de la misma ruta, components, pero ahora vamos a apuntar a nuestro archivo
deleteIcon. Voy a guardar. Voy a regresar aquí. Vamos a recargar.
 [03:43] ¿Qué es lo que me dice? Que nosotros no podemos importar fuera de un módulo.
¿Esto por qué? Porque simplemente aquí lo que estamos haciendo es decirle que importe un
archivo script, pero necesitamos definir que es de tipo módulo, entonces vamos a ponerle
que es type. ¿Y cuál es el type? Va a ser de type="module".
 [04:02] Voy a guardar. Entonces bueno, aquí me está apareciendo un error, vamos a ver por
qué es ese error. Vamos a ver aquí. En la consola deleteIcon, vamos a ver, al parecer hubo
aquí un tema, vamos a ver aquí import. Sigue habiendo aquí algún tema. Vamos a ver qué es
lo que tiene /components/checkComplete. Vamos a ver, vamos a ponerle la extensión .js.
Vamos a guardar, vamos a regresar aquí y listo.
 [04:37] ¿Cuál era el tema? El tema es que el autocompletado simplemente me puso a
checkeComplete pero no puso la extensión, entonces por eso no podía acceder. Vamos a ver
entonces aquí: Hacer curso de react, vamos a agregarlo, vamos a ver, vamos a darle entonces
aquí para decirle que ya hice esta tarea, hacer curso de node. Vamos a agregar.
 [05:02] Muy bien. Podemos eliminar y listo, sigue funcionando. Muy bien. Entonces,
nosotros ya pudimos separar nuestro código, ponerlo en diferentes archivos y mandar a
llamar ese código conforme lo necesitemos. Muy bien. Hasta aquí ya terminamos nuestro
proyecto, ya somos capaces de crear diferentes tareas.
  [05:23] Pero hay un tema. ¿Qué pasa por ejemplo si yo recargo? Se elimina la tarea. Hacer
curso de node. Por más que yo venga y le esté dando aquí reload, lo que va a pasar es que se
va a eliminar. Esto porque no estamos almacenando la información. Muy bien.
 [05:44] Entonces ahora lo que vamos a tener es un curso, que va a ser la continuación de este
proyecto, en el cual vamos a poder almacenar esta información en el navegador, y sin
importar que nosotros recarguemos, vamos a ser capaces de tener persistencia de los datos.
Entonces te veo en el siguiente curso.

05Haga lo que hicimos en aula

PRÓXIMA ACTIVIDAD



Llegó la hora de seguir todos los pasos realizados por mi durante esta aula. Caso ya haya
conseguido, excelente!
Opinión del instructor



Continúe con sus estudios, y si tiene alguna pregunta, ¡no dude en usar nuestro foro!
07Lo que aprendimos
PRÓXIMA ACTIVIDAD



Lo que aprendimos en esta aula:

 Utilizar import/export
 Remover elementos del DOM con el método remove

 Transcripción

 [00:00] Muy bien, pues gracias por acompañarme en este curso. Vamos a hacer un pequeño
resumen de qué fue lo que vimos. Recuerden que nosotros ya podemos poner aquí nuestra
tarea que queremos. Tenemos la capacidad de decir cuál tarea ya realizamos y también
podemos eliminarla.
 [00:18] Vamos a ver entonces rápido el código. Lo que aprendimos prácticamente fue a
manipular el DOM. ¿Cómo es que nosotros estamos manipulando el DOM? Bueno,
 utilizando document.querySelector, document.createElement. También nosotros ya pudimos
agregar funciones o acciones que se van a ejecutar una vez que el usuario interactúe con
nuestra página web, que es gracias a través de los addEventListeners.
 [00:46] También entonces podemos crear dinámicamente elementos HTML, agregarles
clases, eliminarlos, agregarles el contenido, irlos anidando para poder tener ese árbol de
DOM, que es entre padres, hijos, hermanos. Y pues, bueno, prácticamente eso.
 [01:03] También supimos cómo poder prevenir el comportamiento por defecto que tiene un
formulario, que es muy importante, entonces lo que nosotros acabamos de ver es la base de
muchos frameworks que tú puedes encontrar en el mercado, como react, angular, view, entre
otros. Y bueno, espero que te haya gustado, nos vemos en el siguiente curso.