Fundamentos de Programación

1

Programación Básica: Fundamentos y Creación de Proyectos en Línea

2

Programación Básica en Google Chrome: Variables y Funciones

3

Creación de una Página Web Básica con HTML

4

Estructura Básica de un Documento HTML

5

Estructura y funcionamiento básico de HTML y JavaScript

6

Instalación y uso básico de Visual Studio Code para programar

7

Declaración y Uso Básico de Variables en JavaScript

8

Programación de Piedra, Papel o Tijera en JavaScript

9

Programación de Piedra, Papel o Tijera en JavaScript

10

Generación de Números Aleatorios con JavaScript

11

Creación y uso de funciones en programación

12

Ciclos y Condiciones en Programación: Piedra, Papel o Tijera

13

Programación de un Juego de Piedra, Papel o Tijera en JavaScript

14

Manejo de Rutas y Archivos en Sistemas Operativos y Desarrollo Web

15

Manipulación del DOM y Eventos en JavaScript para Juegos Web

Quiz: Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

16

Maquetación de Páginas Web para Videojuegos en HTML

17

Selección de Mascotas en HTML para Juegos Interactivos

18

Programar eventos de clic en botones HTML con JavaScript

19

Eventos de Carga en JavaScript: Iniciar Juego y Seleccionar Mascota

20

Selección de Mascota en JavaScript: Implementación y Validación

21

Manipulación del DOM con JavaScript para mostrar mascota seleccionada

22

Selección Aleatoria de Mascota Enemiga en JavaScript

23

Eventos de clic y lógica de ataque en JavaScript

24

Ataques Aleatorios para Mascotas Enemigas en JavaScript

25

Creación de Mensajes Dinámicos en Combate HTML y JavaScript

26

Lógica de Combate en JavaScript para Juego Mokepon

27

Operadores Lógicos en Programación: AND, OR y NOT

28

Actualización de Vidas en Juego de Combate con JavaScript

29

Validación de Vidas y Mensajes Finales en Juegos

30

Funcionalidad de Reinicio y Desactivación de Botones en Juego

31

Mostrar y ocultar secciones en HTML con JavaScript

Quiz: Desarrollando un juego con HTML y JavaScript

Estilos con CSS

32

Estilos CSS: Selectores, Propiedades y Valores

33

Tipos de Visualización en CSS: Display Block, Inline e Inline Block

34

Alineación de Elementos con Flexbox en CSS

35

Modelo de Caja en CSS: Espaciado y Bordes

36

Diseño y Estilo de Páginas Web con HTML y CSS

37

Estilos CSS para Botones en Juegos: Diseño de Pantallas Interactivas

38

Estilos CSS para Mejorar la Interfaz de un Juego

39

Estilizado de Pantallas de Juego con CSS y Flexbox

40

Separación de mensajes y estilos en JavaScript y HTML

41

CSS Grid: Organiza Elementos en Rejillas Bidimensionales

42

Diseño Responsivo con CSS: Media Queries y Flexbox

43

Pseudoclases en CSS: Mejora la Interacción del Usuario

Quiz: Estilos con CSS

Optimización de código

44

Optimización de Código JavaScript con Clases y Objetos

45

Optimización de Código JavaScript: Variables y Funciones

46

Clases y Objetos: Fundamentos para Optimizar Juegos

47

Construcción de Clases y Objetos en JavaScript

48

Uso de Arreglos para Almacenar Objetos en JavaScript

49

Agregar ataques a objetos en JavaScript

50

Renderizado Dinámico de Objetos en HTML con JavaScript

51

Solución de errores en variables y elementos HTML en JavaScript

52

Uso de Objetos para Centralizar Información en JavaScript

53

Selección de Mascota Aleatoria en JavaScript

54

Iteración de Arreglos y Manipulación DOM en JavaScript

55

Crear Función "mostrarAtaques" en JavaScript para Juegos

56

Eventos de Clic en Botones con JavaScript

57

Secuencia de Ataques y Validación de Resultados en JavaScript

58

Implementación de lógica de combate en juegos JavaScript

59

Programación de Juegos: Lógica de Ataques y Victorias

60

Optimización y Corrección de Errores en Juegos Web con JavaScript

Quiz: Optimización de código

Mapa con canvas

61

Dibujo y manejo de gráficos en Canvas con JavaScript

62

Movimiento de Capipepo en Canvas con HTML y JavaScript

63

Movimiento Continuo de Personajes en Canvas con JavaScript

64

Eventos de Teclado para Controlar Personajes en Juegos

65

Pintar Fondos y Personajes en Canvas HTML

66

Métodos de Clases en JavaScript para Juegos Interactivos

67

Detección de Colisiones en Videojuegos con JavaScript

68

Programación de eventos y colisiones en un juego interactivo

69

Ajuste Responsivo de Mapas en Pantallas con JavaScript

70

Estilos Responsivos en HTML y CSS para Mapas Interactivos

Quiz: Mapa con canvas

Backend: videojuego multijugador

71

Desarrollo de Juegos Multijugador con Cliente-Servidor y API

72

Instalación de Node.js en Windows para desarrollo backend

73

Uso básico de la terminal de comandos y Node.js

74

Creación de un Servidor Básico con Express.js en Node.js

75

Conceptos Clave de URIs y Verbos HTTP en Node.js

76

Desarrollo de API con Node.js y Comunicación Frontend-Backend

77

Selección de Mokepon y Comunicación JSON en Express.js

78

Implementación de un Endpoint para Coordenadas de Jugadores en Node.js

79

Integración de Coordenadas de Jugadores en Mokepon Multijugador

80

Optimización de Coordenadas en Videojuegos con JavaScript

81

Batalla Final en Mokepon: Implementación de Colisiones y Back-End

82

Implementación de Ataques en Tiempo Real para Videojuego Mokepon

Quiz: Backend: videojuego multijugador

Próximos pasos

83

Corrección de errores en juego multijugador con Node.js

84

Desarrollo Colaborativo con Git y GitHub para Programadores

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso Gratis de Programación Básica

Curso Gratis de Programación Básica

Juan David Castro Gallego

Juan David Castro Gallego

Manipulación del DOM con JavaScript para mostrar mascota seleccionada

21/84
Recursos

Aportes 276

Preguntas 86

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Excelente la actitud del profe, explica muy bien, me gustan las onomatopeyas XD

Es impresionante el proyecto que se creará en el curso y totalmente gratis, muy orgulloso de Platzi

RESUMEN

Para alterar el texto que tenemos en nuestro HTML (o manipular el DOM como se dice técnicamente), se puede usar innerHTML.

Con la etiqueta <span id=""> en el html, indicamos que este texto va a ser manipulado dinámicamente, asi que obtenemos su id como hemos hecho en clases anteriores y guardamos el elemento en una variable, asi esta variable la podemos editar y reemplazar por el texto que queramos.

El profe Mike Wheeler es muy entretenido, muchas gracias Platzi!

Juan hace amar JavaScript, ese amor por enseñar se necesita en todos lados, así habría excelentes profesionales en todas las áreas.

Volviendo a Platzi después de mucho tiempo 💪🏼

Adoro estas clases online donde puedo repetir toda la clase y el profesor no se cansa xd

Asi como pueden usar .innerHTML tambien pueden usar .textContent e .innerText

📌Metodo para manipulación de DOM (JS)
.
Podemos cambiar el contenido html con javascript, hay varios metodos pero vamos a ver el Element.innerHTML
Primero, meter el contenido html dentro de la etiqueta span: <span> </span>
.
Definición: (span - abarcar) Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea.
Sus etiquetas son: <span> y </span> (ambas obligatorias).
Está definido como: Elemento especial, y por lo tanto en línea.
Crea una caja: En línea.
Puede contener: Texto, y/o Elementos en línea.
📍 Para saber sus atributos, leer esta fuente: https://developer.mozilla.org/es/docs/Web/HTML/Element/span
.
Una vez todo el contenido html (palabra o frase) que queremos dinámicamente cambiar con javascript está dentro de la etiqueta span y tiene su atributo ID, vamos al código de javascript:
Llamamos ese ID con un document.getElementById(" “) y lo ponemos dentro de una variable.
Y podemos modificar su contenido así:
.
let variableX = document.getElementById(” ")
variableX.innerHTML = " "
.
Espero y les sirva de algo 💚

Muy buena clase, la verdad estoy aprendiendo mucho y el animo del profe es una genialidad. Transmite esas ganas de aprender

Apenas estoy iniciando el mundo de la programación y me hace feliz encontrar este tipo de profesores, me hacen sentir que lo estoy logrando y puedo llegar mucho más allá, me contagia su emoción 😁

Así quedo, reutilice las variables que teniamos declaradas y con el metodo id se obtiene el nombre de cada mascota.

Hello Students, Hi Juanchooo Tomé la decisión de dejar las alertas y adicionar el <span> también dentro de mí " _if _ ".

La programación se debe hacer con humor y paciencia, considero que las alertas dan esa milla extra y hace más happy el juego de Mokepon. Espero os guste 😃

¡Que nivel de profesor! Motivado directo a la siguiente clase.

sinceramente es lo mas duro a lo que me he enfrentado en mi vida pero que buen profe gracias de a poquito ahi vamos con fe

Esta fue la manera en que lo hice.

function seleccionarMascotaJugador() {
    let spanMascotaJugador = document.getElementById("mascota-jugador")


     if(document.getElementById("hipodoge").checked){
         alert("seleccionaste a Hipodoge")
         spanMascotaJugador.innerHTML = "Hipodoge"
     }else if (document.getElementById("capipego").checked){
         alert("seleccionaste a capipego")
         spanMascotaJugador.innerHTML = "capipego"
     }else if (document.getElementById("ratigueya").checked){
         alert("seleccionaste a ratigueya")
         spanMascotaJugador.innerHTML = "ratigueya"
     }else{
         alert("SELECCIONA UNA MASCOTA")
     }

El audio sigue bajo, no es problema de tus bocinas/audifonos

Hasta ahorita se me ocurrio ir subiendo todo mi proyecto a un repositorio de Github.

y POOOM me quedó claro! 🔥

A veces tardo hasta 4 horas en empezar a ver los videos de algo que en efecto es simple y bien explicado porqué cuando estaba en la universidad cursando Ciencias de la Computación, estos temas se consideraban triviales cuando no lo son, por lo que mi percepción se volvió en mi contra, haciendomé sentir un impostor cuando no sabía algo que nunca me enseñaron

DIFERENCIA DE INNERHTML E INNERTEXT

-Con innerHTML se puede agregar etiquetas dentro de la etiqueta seleccionada, incluso si no están específicamente escritas en el código HTML.

-Con innerText solo se puede agregar una cadena de texto, incluso si agregas etiquetas, se mostraran como texto en el navegador.

Excelente profesor, realmente una gran dinámica 👏👏👏

Esta clase vale ORO!

¡Excelente profesor!

Excelente, seguimos avanzando

function confirmarSeleccionJugador1() {
    let seleccionAjolote = document.getElementById('ajolote')
    let seleccionTopo = document.getElementById('topo')
    let seleccionHormigaDeFuego = document.getElementById('hormigadefuego')
    let seleccionKomodo = document.getElementById('komodo')
    let seleccionTortuga = document.getElementById('tortuga')
    let seleccionCaballoDeMar = document.getElementById('caballodemar')
    let spanMokeponJugador1 = document.getElementById('mokepon-jugador1')


    if(seleccionAjolote.checked) {
        alert('Has seleccionado al ajolote')
        spanMokeponJugador1.innerHTML = 'AJOLOTE'
    } else if(seleccionTopo.checked) {
        alert('Has seleccionado al topo')
        spanMokeponJugador1.innerHTML = 'TOPO'
    } else if(seleccionHormigaDeFuego.checked) {
        alert('Has seleccionado a la Hormiga de fuego')
        spanMokeponJugador1.innerHTML = 'HORMIGA DE FUEGO'
    } else if(seleccionKomodo.checked) {
        alert('Has seleccionado al Dragón de Komodo')
        spanMokeponJugador1.innerHTML = 'DRAGON DE KOMODO'
    } else if(seleccionTortuga.checked) {
        alert('Has seleccionado a la tortuga')
        spanMokeponJugador1.innerHTML = 'TORTUGA'
    } else if(seleccionCaballoDeMar.checked) {
        alert('Has seleccionado al Caballo de mar')
        spanMokeponJugador1.innerHTML = 'CABALLO DE MAR'
    } else {
        alert('Por favor, elige un Mokepon')
    }

BOOOOMM!! que emocionan jajajaja, Juan es muy divertido.

A mi me gusta nombrar a las variables de forma grupal para mantener un orden, en lugar de una por una y me queda así:

Me agrada este profesor explica las cosas con el alma y eso me inspira a llegar mas allá en la programación 😄

Alguien aprendiendo en 2023?

Lo más lindo que encuentro en este poco recorrido de la programación es la infinidad de formas para llegar a un mismo resultado, eso nos lleva a pensar y tratar de solucionar problemas cotidianos con lo que aprendemos. Excelente la actitud del profe.

Ésta clase costó, pero se siente genial ver que de a poco va progresando!

Excelente la forma en que el profe Juan da las clases, que bien Platzi. Tienen buen equipo

@Juan David Castro Gallego que gran profesor eres. Muchas gracias por tu motivación. Ha sido excelente este curso!

Profe tienes un gran talento para enseñar 👌

hola Juan me gusta tu stylo, Soy muy novato pero voy exageradamente motivado.😎

y pooom !!! jajajaa

Increible,me identifique totalmente con Juan en este clase. Nunca perdiendo la emocion hasta el ultimo momento😂

Juan es un excelente profesor, me hizo volver a amar el mundo de la programación ❤

😂Es impresionante el proyecto que se creará en el curso y totalmente gratis😂

A alguien más le sucede que piensa tener mal el código pero realmente está bien con la diferencia que se distrajeron y esperaban un resultado diferente?

innerText: muestra el texto literalmente como está en el código.

innerHTML: aplica lo desarrollado a los elementos

Mi codigo

<code> 
iniciarJuego = () => 
{
   let buttonMascotas = document.getElementById("seleccionarMascota");
   buttonMascotas.addEventListener("click",seleccionMascotas); 
}

seleccionMascotas = () => 
{
   // querySelectorAll genera un nodelist con todos los elementos similares 
   let nodelist = document.querySelectorAll("#seleccionar-mascota input");
   let inputMascotas = [].slice.call(nodelist);
   let nombresMascotas = ["Hipodoge","Capipepo","Ratigueya"];
   let spanMascotaJugador = document.getElementById("mascota-jugador");

   //forEach es el metodo de recorrer un arreglo.
   inputMascotas.forEach((valor, indice) => 
   {
      console.log(valor);
      console.log(indice);
      if(valor.checked)
      {  
         spanMascotaJugador.innerHTML= ` ${nombresMascotas[indice]}`;
      }
   })
}
window.addEventListener("load", iniciarJuego)


Asi me quedo hasta el momento:

<code> 
function iniciarJuego(){
    let botonMascotaJugador = document.getElementById("boton-mascota");
    botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador);
}

function seleccionarMascotaJugador(){
    let inputHipodoge = document.getElementById("hipodoge")
    let inputCapipepo = document.getElementById("capipepo")
    let inputRatigueya = document.getElementById("ratigueya")
    let mascotaAliada = ""

    if(inputHipodoge.checked){
       mascotaAliada = "Hipodogue"
    } else if(inputCapipepo.checked){
       mascotaAliada = "Capipepo"
    } else if(inputRatigueya.checked){
       mascotaAliada = "Ratigueya"
    } else {
        mascotaAliada = "nadie"
    }

    document.getElementById("nombreJugador").innerHTML= mascotaAliada
    alert("Seleccionaste a " + mascotaAliada)
}


window.addEventListener("load", iniciarJuego)

Excelente clase muy divertida😄

Este curso es genial! Nunca habia informado sobre este campo, es nuevo para mi, por momentos me trabo porque no entiendo algo, o porque algo no me sale y no logro ver el error, pero es gratificante cuando logras solucionarlo por tu propia cuenta poco a poco. Los profes son geniales y hacen que quiera seguir viendo las clases ¡Gracias por crear este curso!

un aporte, cuando se use input radio es mejor utilizarlo de la manera que se ha visto siempre , como aparece en este cuadro con el punto para seleccionar antes de la opcion. es menos enredado

cool

Explica tan bien que todos los conceptos que ha aplicado los he ido aplicando a la página de ingreso de mi idea de negocio jaja

Muy bueno la clase 💪🏼

¡¡La personalidad y enseñanzas del profe Juan es simplemente increíble!! ❤

¡¡MUy buena explicación!! A seguir prácticando.

que bueno que ya estemos incorporando nuevas tecnicas con JS😁

Me encantan las clases de profe Juan David, estoy aprendiendo a Tope!

Debo admitir que esta lección ha sido algo difícil para mí, la función innerHTML se me hizo muy abstracta y he regresado mil veces al video, a los apuntes y a la documentación. Creo que ya más o menos )😦

Extraño a Freddy pero el nuevo profe es un capo! Todavia no terminan las clases con el y ya lo extraño ajjajaj😢

que buen proyecto, siento que estoy aprendiendo en modo flash ❤️

definitivamente la manera de explicar del profe es sensacional, paciente, explicativo…que se yo, me gusta que se le entiende muy bien!

magnifica manera de enganche para un curso

Es necesario revisar varios aspectos si no te funcionó el código. Aquí hay algunas áreas clave a considerar: 1. **Errores en la consola**: Verifica si hay errores en la consola del navegador que puedan indicar qué salió mal. 2. **IDs correctos**: Asegúrate de que los IDs en tu HTML coincidan con los que estás usando en JavaScript para manipular el DOM. 3. **Eventos**: Confirma que los eventos estén correctamente configurados y que el código se ejecute al seleccionar la mascota. 4. **innerHTML**: Asegúrate de que estás utilizando `innerHTML` de manera correcta para cambiar el contenido. Si sigues estos pasos y revisas tu código, deberías poder identificar el problema.
Este es mi código por el momento, solución alternativa y corrección de mi código de la anterior clase:![](file:///C:/Users/verap/Downloads/platzi-js-20-02.png)```js const selectPlayerPet = () => { // Selecciona todos los elementos con la clase "pets" (radio buttons) const pets = document.querySelectorAll('.pets'); const spanMascotaJugador = document.getElementById('pet-player'); const selected = [...pets].find(element => { if (element.checked) { // Verifica si el elemento está seleccionado const charToUpperCase = element.value.charAt(0).toUpperCase(); // Convierte la primera letra en mayúscula const formattedText = charToUpperCase + element.value.slice(1); spanMascotaJugador.innerHTML = formattedText; return element; // Retorna `true` para detener la iteración } return false; // Continúa iterando si el elemento no está seleccionado }); console.log({selected}); // Si ninguna mascota fue seleccionada, muestra una alerta al usuario if (!selected) { alert('No seleccionaste ninguna mascota!'); } }; ```
Los `alerts` son una forma de notificar al usuario sobre eventos importantes, pero en el contexto de manipulación del DOM, se utilizan menos. En la lección, se cambió el uso de `alerts` por la manipulación de HTML para mostrar directamente el nombre de la mascota seleccionada en el documento. Esto mejora la experiencia del usuario al proporcionar una retroalimentación visual en lugar de depender de ventanas emergentes. La manipulación del DOM permite interactividad más fluida y atractiva en tu juego.
![]()![]()![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202025-01-29%20180630-9ddfac44-0d98-4790-a329-c3cb551618b4.jpg) asi quedo el mio... no esta tan bueno pero pues asi va jsjsjs

Estuve una hora preguntándome por qué no funcionaba y escribí

'mascota-jugadpr'

en vez de

'mascota-jugador'
XD nadie comento en 2 años y yo soy el unico del 2024 pero que bien eplica el profe

saben por que me aparece esto?

no pudodo hacer que salga el nombre con los vidas
😦

A MESSIRVE

El profe, me motiva a seguir estudiando programación, con su actitud tan positiva. 💚

Super el profe Juan David, se te comprende muy bien! Gracias

Qué honda banda soy nuevo aquí lo que entendí te lo resumo y será mi aporte
te explicaré como manipular él dom
antes de todo tienes que saber que todo lo que está aquí adentro del HTML <span></span> puede cambiar.

Entonces piensa si lo que está ahí dentro puede cambiar, nosotros podemos manipular eso en JavaScript.
¿Pero cómo?
primero sí tenemos varios <span></span> en el HTML tenemos que darle un, id a cada uno para saber a cuál de todos llamar en JavaScript
ejemplo:

<span id=“mascota-jugador”></span>

esto dentro de un párrafo

<p>Tu mascota <span id=“mascota-jugador”></span> tiene <span>3</span> vidas</p>

ahora que le pusimos un, id dentro de <span></span>
sabremos como llamarlo desde JavaScript,
Así que creamos una function en JavaScript en la cual llamaremos al con el
<span id=“mascota-jugador”></span>
con

document.getElementById(“mascota-jugador”)

pero todo esto tiene que ir dentro de una function
ejemplo:

function seleccionarMascotaJugador() {

let spanMascotaJugador = document.getElementById(“mascota-jugador”)

listo ya casi terminamos, solo nos falta una cosa para que todo funcione, hacer que el nombre cambie, según a la mascota que elija el jugador
sabemos que este codigo

if(inputAguita.checked){
alert(“tu mascota sera aguita 💧”)
nos manda una alerta según la mascota elegida pero no cambia el dom
Así que podemos cambiar ese

alert(“tu mascota sera aguita 💧”)

con un innerHTML esta es una función que sirve para cambiar el texto por cualquier otro que tú quieras pero dedemos elegir a que <span></span> le cambiara el texto por eso es muy importante ponerle un, id
como nosotros ya hicimos todo el proceso para llamar al span,

let spanMascotaJugador = document.getElementById(“mascota-jugador”)
ahora solo tenemos que cambiar el texto que lleva dentro con un innerHTML

ejemplo:

spanMascotaJugador.innerHTML = “aguita 💧”

Y listo aprendiste una de las formas de manipular el dom .
Dime si te sirvió… jajaj la verdad es que soy nuevo programando

Usé la función que retorna un entero aleatorio para asignar la mascota enemiga de forma aleatoria usando un número entre 0 y la longitud de ‘arreglo’ de nodos. Solo se asigna si la mascota está chequeado.

Es increible la forma en que se esta usando la manipulacion del DOM usando el codigo de “span” declarado en el html. Espero con ansias la siguiente clase. Estoy listo para seguir recordando y aprendiendo.

De momento así va mi código pero en inglés (así practico ambas).

function startGame(){
    let selectPet = document.getElementById("select_pet")
    selectPet.addEventListener("click", selectPetPlayer)
}


function selectPetPlayer() {
    let inputHipodoge = document.getElementById("hipodoge")
    let inputCapipepo = document.getElementById("capipepo")
    let inputRatigueya = document.getElementById("ratigueya")
    let inputLangostelvis = document.getElementById("langostelvis")
    let inputLucapalma = document.getElementById("lucapalma")
    let inputPydos = document.getElementById("pydos")

    let spanPlayerPet = document.getElementById("name_player_pet")

    if (inputHipodoge.checked) {
        spanPlayerPet.innerHTML = "Hipodoge"
    } else if (inputCapipepo.checked) {
        spanPlayerPet.innerHTML = "Capipepo"
    } else if (inputRatigueya.checked) {
        spanPlayerPet.innerHTML = "Ratigueya"
    } else if (inputLangostelvis.checked) {
        spanPlayerPet.innerHTML = "Langostelvis"
    } else if (inputLucapalma.checked) {
        spanPlayerPet.innerHTML = "Lucaplma"
    } else if (inputPydos.checked) {
        spanPlayerPet.innerHTML = "Pydos"
    } else{
        alert("Choose your pet")
    }
}

window.addEventListener("load", startGame)

Exelente la explicacion profe, felicidades a platzi…

Gracias profe Juan David Castro, muy buena explicacion

innerHTML !
Info aquí!

Documentación explicación

Hace mucho había hecho un curso de html y javascript y estoy haciendo este para refrescar conocimientos y es excelente la forma de los profes de enseñar y transmitir los conocimientos!, me encantó

muy buena la clase !!! mas mas mas

me encanta esto hahahahahaha ojala aprenda rápido

Super didáctico, excelente actitud y muy claro ; se aprende mucho

📌 Con JS se puede manipular el contenido del HTML generando aún más interactividad

Eres increíble, me gusta mucho cómo enseñas…

Te felicito Juan, tus clases son muy estimulantes, tus explicaciones clarisimas, saludos desde Argentina

me gusta el dinamismo del profe esta uno muy atento a la clase 😉

El profe Juan si esta en su salsa, se siente como transmite alegria al enseñar estos temas, lo felicito y es facil entender con esa actidud, gracias.

Grande profe!!

Con <span></span> podemos poner el nombre que queramos dentro de un parrafao. Pero debe tener un <span id="mascota-jugador"></span>

Para hacerlo primero tenemos que asignar el Id de nuestro span a una variable:

let spanMascotaJugador = document.getElementById('mascota-jugador')

Ahora tenemos que asignale un valor nuevo y que este se escriba en el HTML

spanMascotaJugador.innerHTML = 'Hipodoge'

Jajaja ¡¡Poooom!!

Me gusto mucho la participación del profe en Dune. :3

Todo es cuestion de practicar y praticar para que se te quede grabada la infomacion. Tambien ayuda bastante colocando notas para saber porque hiciste tal cosa.

En VSCode para agilizar la escritura cuando vas a asignar un “id” dentro de por ejemplo el “span” lo podes automatizar escribiendo # entre medio, por ejemplo:
span#mascota-jugador te queda <span id=“mascota-jugador”></span>

Excelente clase y forma de explicar!

Con Bootstrap se me olvidaron muchos fundamentos y el por que me gusta maquetar ahora con este curso lo recordé ! aparte bootsrap no he tenido experiencias 100% efectivas para el maquetado.

innerHTML una propiedad para manipular el DOM

Buenos días desde España, me encanta las clases del profesor Juan David son muy amenas y agradables me motiva a no parar de aprender.

Excelente Profe

Excelente la manera en la que enseñas, en dos dias he aprendido mas de javascript aca que de lo que he estado aprendiendo en dos meses… Gracias