Sara Arévalo 1ºbach 1

Vídeo 1

Primero se crea una hoja nueva de vscodium y se añade el código principal del tipo HTML

El autor simplifica el código y lo abre en la web para abrir la consola de html, en la que se puede añadir más código y modificarlo

Variable

Podemos crear una variable del tipo: var heading = h1 para el título de la página y añadirlo al body, para que al buscarlo salga en la consola:

Elementos dentro de otros

Para esto crea un elemento div donde meter la variable h1 y un paragraph incluido y le añade una clase de "texto al azar"

Después, lo ve desde la consola y lo mete al código para que el elemento aparezca dentro del otro.
Utiliza comandos como mainDiv.appendChild para incluir el elemento "hijo".

El inpector sirve para comprobar códigos de html y que todo esté en orden, se puede mirar el de cualquier página:

Todo coincide así que pasa al siguiente apartado.

Input box

Como en el HTML parte 3, recuerda que podemos usar cajas input (también desde la consola) para agregar texto o datos a la página. Este sería para crear una caja de input que te pida introducir tu fecha:

Vídeo 2

HTML y Javascript

Dentro de un div añade una etiqueta de template

Dentro de esa etiqueta template podemos añadir código de cualquier nivel de dificultad.

Este código no será visible porque es un tag, pero al abrir la consola podemos ver todo el código completo, así que ahí se puede añadir todo el código de HTML, consiguiendo así pasarlo a javascript

Aquí, una vez ha metido código al template de la consola, es posible ver los cambios en el documento original

Buscar elementos

Para buscar un elemento en el template, en este caso para buscar h1 llamado MyTitle , el autor pone en la consola el siguiente código:

Aparte de los títulos, obviamente se puede buscar cualquier elemento que se haya incluido también. En el video tambien enseña a buscar fechas o descripciones solo cambiando las palabras de los paréntesis y las comillas, es decir, cambiando estas palabras:

En las de amarillo se pondría .desc o .date y en las rojas aparecería el varor de esa fecha o el texto de la descripción.

Vídeo 3

Eventos

Por ejemplo un evento que menciona en el video es añadir un botón que se pueda pulsar: se llamará "click here"

Script

El autor crea un script, donde todo lo que esté contenido dentro será de código javascript
Por eso al poner el botón también el template se duplica sin querer

Añadir guests

Crea un function, pero el código de dentro de function debe ser ejecutado en la consola, cuando la ejecuta vemos que se que se añaden los guests.

Sin embargo queremos que al pulsar el botón se añadan más guests, así que añade un evento:

En el documento ya funciona la funcion del botón y al pulsarlo se añaden guests

Para borrar los guests que no queremos usamos

Vídeo 4

Eliminar con botones

Crea un botón cuya función va a ser como su nombre indica eliminar cosas. Para que funciona le asigna un evento al botón tal que así:

Esto va a permitir que en la consola salga ya el botón y la funcion que lleva asignada y también va a hacer que en el documento se haya cambiado y ahora sí salgan los botones visibles:

Para eliminar el elemeto de al lado en lugar del propio boton añade lo siguiente:

e.target.parentElement.remove();

Así le estamos pidiendo que elimine el elemento principal que incluye toda la sección de ese guest.