Fundamentos de Programaci贸n

1

Bienvenida a Platzi: 驴qu茅 necesitas para tomar el curso?

2

驴C贸mo aprender programaci贸n?

3

Crea tu primer sitio web

4

Sitios web con HTML

5

Estructura de 谩rbol en HTML

6

Instalando tu primer editor de c贸digo

7

C贸mo declarar variables y usar prompt

8

Algoritmo de piedra, papel o tijera

9

Algoritmo avanzado de piedra, papel o tijera

10

Aleatoriedad

11

Refactor del c贸digo usando funciones

12

Ciclos

13

Gana 3 veces

14

Archivos de HTML y JavaScript

15

驴Qu茅 es el DOM?

Quiz: Fundamentos de Programaci贸n

Desarrollando un juego con HTML y JavaScript

16

Maquetaci贸n con HTML

17

Secci贸n de elegir mascota

18

驴D贸nde ubicar la etiqueta script? Conectando HTML con JavaScript

19

Escuchando eventos con JavaScript

20

addEventListener

21

Manipulaci贸n del DOM

22

Enemigos aleatorios

23

Ataques en JavaScript

24

Ataques aleatorios del enemigo

25

Imprimiendo ataques del enemigo

26

驴Ganaste, perdiste o empataste?

27

Tablas de verdad

28

Creando el contador de vidas

29

驴Qui茅n gan贸 el juego?

30

Reiniciando el juego

31

Ocultando elementos HTML con JS para mejorar la UX del juego

Quiz: Desarrollando un juego con HTML y JavaScript

Estilos con CSS

32

Anatom铆a de CSS

33

Tipos de display

34

Flexbox

35

Modelo de caja

36

Im谩genes para los Mokepones

37

Estilos del bot贸n

38

Adaptando HTML al dise帽o del juego

39

Layout: t铆tulo y ataques

40

Adaptando JavaScript al dise帽o del juego

41

CSS Grid

42

Responsive Design

43

Detalles finales

Quiz: Estilos con CSS

Optimizaci贸n de c贸digo

44

Revisi贸n de c贸digo

45

Don't repeat yourself (DRY)

46

Clases y objetos

47

Clases y objetos de Mokepon

48

Arrays o arreglos

49

Objetos vs. arreglos

50

Ciclos: manipulando el DOM con iteradores

51

Declaraci贸n lenta de variables

52

Una sola fuente de la verdad

53

Mascotas aleatorias con arreglos

54

Ataques din谩micos por cada mascota: extraer

55

Renderizado din谩mico en HTML

56

Eventos de click din谩micos

57

Secuencia de ataques del enemigo

58

Iniciando el combate

59

Resolviendo el reto de condicionales

60

Optimizando el frontend del juego

Quiz: Optimizaci贸n de c贸digo

Mapa con canvas

61

Introducci贸n a canvas: dibujando con JavaScript

62

Moviendo a Capipepo hacia la derecha

63

Movimiento hacia todas las direcciones

64

Movimientos con el teclado

65

Im谩genes y personajes de fondo

66

M茅todos en las clases

67

Obst谩culos y colisiones

68

Combate entre mokepones colisionados

69

Mapa responsive

70

Botones bonitos y viewport

Quiz: Mapa con canvas

Backend: videojuego multijugador

71

驴Qu茅 es backend?

72

Instalaci贸n de Node.js y NPM

73

Terminal de comandos y Node.js

74

Servidor web con Express.js

75

HTTP, localhost, servidores y puertos

76

Express.js y fetch: API REST con JavaScript

77

JSON y POST: mokepon online

78

Transmisi贸n de coordenadas

79

Mokepones din谩micos en el mapa

80

Optimizando el mapa del juego

81

Batalla entre jugadores

82

Consumiendo la API de ataques del enemigo

Quiz: Backend: videojuego multijugador

Pr贸ximos pasos

83

Probando el juego en varios dispositivos

84

驴Y ahora qu茅 curso tomar?

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

16D
2H
13M
11S

addEventListener

20/84
Recursos

Aportes 303

Preguntas 158

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

la actitud del profe Juan siempre es muy contagiosa 馃槃

Juan:
鈥淪elecciona una mascota鈥
.
Freddy:
SELECCIONASTE PERDER

Esta fue la forma en que lo hice ya que, else es como 鈥渟i no es ninguna de las anteriores鈥 y arrojo una alerta que diga que debe seleccionar una mascota.

Tambien puedes usar el signo de dolar para evitar todo eso del document.getElementById

La energ铆a del profesor es muy contagiosa! As铆 uno se entusiasma mucho m谩s a la hora de aprender. 馃榾馃捇

Conforme avanzo en el curso me voy percatando de la importancia de contar con un pensamiento estructurado y l贸gico antes de poder avanzar con todo el proceso de desarrollo y escritura de c贸digo. Es un campo totalmente nuevo para mi y me est谩 suponiendo un reto complejo, pero a la vez lo disfruto. Muchas gracias por las aportaciones querida comunidad.

Mi soluci贸n, intente hacerla un poco m谩s organizada:

Les comparto un algoritmo que hice para entender que esta sucediendo sin tanto c贸digo de por medio.

Este es mi c贸digo JS

Y por supuesto, Deber铆a explicar algunas cosas!!

Yo llamo a las mascotas mokepones de una vez.

Esto que ves es un ARRAY

let mokepones = ['hipodoge', 'capipepo', 'ratigueya', 'langostelvis', 'tucapalma'] 

Es un elemento que guarda un conjunto de elementos. Puedes guardar entre estos corchetes [ ] tantos elementos como quieras, separados por comas y darles un nombre de variable. Pueden ser n煤meros, strings, objetos, funciones u otras variables.
Esto se va a mencionar seguramente mientras avance el curso, as铆 que esto es un spoiler.

Anteriormente, ya vimos el ciclo while, y funciona as铆:
MIENTRAS(la condici贸n se verdad){
Realiza una y otra vez este c贸digo
}

Yo uso el ciclo for que funciona asi:

La variable i es un valor que debe iniciar en 0. el ciclo se repetir谩 hasta que i valga 10, y en cada repetici贸n a i se le sumara 1. Asi que lo que al inicio era 0 terminara siendo 10 en la d茅cima repetici贸n y terminara el ciclo.

Los array pueden usar muchos m茅todos para ser manipulados o le铆dos. El m茅todo length sirve para saber cuantos elementos tiene un array. Asi que al decir i = mokepones.lenth, como mokepones tiene 5 elementos, el _for _se repetir谩 5 veces.

Luego est谩 el operador ternario, una belleza de JavaScript. Funciona como el **if **, el if else y el else. Ser铆a algo as铆:

talcosa es verdad ? haz esto : o esto es verdad ? haz esto otro : sino haz esto

Los dos puntos funcionan como un if else o como un _else _si al final no hay m谩s condiciones.

charAt() devuelve el primer caracter de un string y toUpperCase() convierte todo un string en may煤sculas.

al usar slice(1) estamos haciendo que al string se le reste el primer caracter.

El profesor es muy talentoso. Comenz贸 muy joven. Es brillante. Pienso que tiene un gran futuro

Hola yo lo estoy creando de la misma manera pero con los personajes del dibujo animado 鈥淎vatar鈥

Lo siento, de ni帽o era muy fan de Pokem贸n 馃槀

鈥淐apipeo鈥 jajajaja q gran clase

Una forma de reducir el codigo funcional con metodos mas avanzados.

iniciarJuego = () => {
let buttonMascotas = document.getElementById('button-mascotas');
    buttonMascotas.addEventListener('click',seleccionMascotas)
}

seleccionMascotas = () => {
// querySelectorAll genera un arreglo con todos los elementos similares 
let inputMascotas = document.querySelectorAll('#seleccionar-mascotas input')

let nombresMascotas = ["Hipodoge","Capipepo","Ratigueya"]

//forEach es el metodo de recorrer un arreglo.
inputMascotas.forEach(function(valor, indice){
 if(valor.checked == true){
  alert(`Usted ha seleccionado ${nombresMascotas[indice]}`)
            }
        })
}

window.addEventListener('load', iniciarJuego)

El profe juan se llama como mi hijo , juan de 13 a帽os voy hacer que sea un gran progamador

馃殌 As铆 vamos:

La verdad ten铆a la idea de como realizarlo pero no me daba por peque帽os errores en mi c贸digo 馃. Justo ah铆 es que me acuerdo de Freddy cuando dijo:

Programar es aprender a manejar la FRUSTRACI脫N Y NO RENDIRTE.

Dejo por aqu铆 mi aporte, una forma de reducir m谩s el c贸digo.

**Excelente manera de explicar 馃槂 **
Gracias Profe Juan 馃槑鉂

Algunas cosas hice mal, lo que mejor pude hacer fue verificar el Github en aportes y comparar mi c贸digo con el de el profe Juan, lo realice como veces por que no me daban unas cosas, lo que mas me motivaba era que si lograba arreglar cosas peque帽as poco a poco. pero si fue fundamental soportarme del GitHub y de la clase.

aqu铆 mi c贸digo, pido disculpas si es exactamente como el del profe, prometo que cuando tenga mejor dominio volver茅 a publicar mi aporte desde mi experiencia.

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

        if (inputHipodoge.checked){
            alert("Seleccionaste a Hipodoge")
        } else if (inputCapipepo.checked) {
            alert("seleccionaste a Capipepo")
        } else if (inputRatigueya.checked) {
            alert("Seleccionaste a Ratigueya")
        } else {
            alert("Selecciona una mascota")
        }
    }  

OjO = El audio de la clase est谩 muy bajo. No tienen que ajustar sus bocinas/audifonos.

Mi c贸digo del ejercicio en JS

Excelente, me gusta que avanzamos paso a paso para no confundirnos, aqui mi avance:

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')

    if(seleccionAjolote.checked) {
        alert('Has seleccionado al ajolote')
    } else if(seleccionTopo.checked) {
        alert('Has seleccionado al topo')
    } else if(seleccionHormigaDeFuego.checked) {
        alert('Has seleccionado a la Hormiga de fuego')
    } else if(seleccionKomodo.checked) {
        alert('Has seleccionado al Drag贸n de Komodo')
    } else if(seleccionTortuga.checked) {
        alert('Has seleccionado a la tortuga')
    } else if(seleccionCaballoDeMar.checked) {
        alert('Has seleccionado al Caballo de mar')
    } else {
        alert('Por favor, elige un Mokepon')
    }
}

Esto es lo que llevo al momento, los personajes son expresidentes de mi pais JAJA

Por si solos son unos memes, as铆 que joya馃槀

Curiosamente en la parte de declaraci贸n de la variable Capipepo, al profe se le fue Capipeo鈥 y le funcion贸, por que en los lugares donde la us贸, lo hizo tambi茅n con el 鈥渆rror鈥.

Pero hay que estar muy pendientes, por que son typos (gazapos) dificiles de encontrar. (Dificultan el Debugging)

Me encanta la manera de hablar de Juan 馃槃

Activar el boton solo cuando se seleccione una mascota

function iniciarJuego() {
  let botonMascotaJugador = document.querySelector('#boton-mascota')
  seleccionarMascotaJugador(botonMascotaJugador)
}

function seleccionarMascotaJugador(boton) {
  boton.disabled = true

  function mascotaSeleccionada() {
    if (inputHipodoge.checked) {
      alert('Hipodoge')
    } else if (inputCapipepo.checked) {
      alert('Capipego')
    } else {
      alert('Ratigueya')
    }
  }

  function activarBotonSeleccionar() {
    boton.disabled = false
    boton.addEventListener('click', mascotaSeleccionada)
  }

  let inputHipodoge = document.querySelector('#hipodoge')
  let inputCapipepo = document.querySelector('#capipepo')
  let inputRatigueya = document.querySelector('#ratigueya')
  inputHipodoge.addEventListener('click', activarBotonSeleccionar)
  inputCapipepo.addEventListener('click', activarBotonSeleccionar)
  inputRatigueya.addEventListener('click', activarBotonSeleccionar)
}

window.addEventListener('load', iniciarJuego)

De esta forma lo hice yo.

window.addEventListener("load", () =>{
    const btnSeleccionar = document.getElementById("btn-mascota");
    btnSeleccionar.addEventListener("click", ()=>{
        const radioHipoDoge = document.getElementById("hipodoge");
        const radioCapipepo = document.getElementById("capipepo");
        const radioRatigueya = document.getElementById("ratigueya");

        if(radioHipoDoge.checked){
            alert("seleccionaste a Hipodoge");
        }else if(radioCapipepo.checked){
            alert("seleccionaste a Capipepo");
        }else if(radioRatigueya.checked){
            alert("seleccionaste a Ratigueya" );
        }else{
            alert("selecciona un MOKEPON!");
        };
    });
})

comparto otra forma de resolver el problema:

function iniciarJuego() {

    let botonMascota = document.getElementById('mascota')
    botonMascota.addEventListener('click', seleccionarMascotaJugador)

}


function seleccionarMascotaJugador() {

    let inputHipodogue = document.getElementById('Hipodoge');
    let inputCapipepo = document.getElementById('Capipepo');
    let inputRatigueya = document.getElementById('Ratigueya');
    let inputLangostelvis = document.getElementById('Langostelvis');
    let inputTucapalga = document.getElementById('Tucapalga');
    let inputPydos = document.getElementById('Pydos');

    switch (true) {

        case (inputHipodogue.checked): alert("Seleccionastes Hipodoge");
            break;
        case (inputCapipepo.checked): alert("Seleccionastes Capipepo");
            break;
        case (inputRatigueya.checked): alert("Seleccionastes Ratigueya");
            break;
        case (inputLangostelvis.checked): alert("Seleccionastes Langostelvis");
            break;
        case (inputTucapalga.checked): alert("Seleccionastes Tucapalga");
            break;
        case (inputPydos.checked): alert("Seleccionastes Pydos");
            break;
        default:alert("Selecciona Una Mascota");
        break;

    }

}


window.addEventListener('load', iniciarJuego)

Esta bueno porque si lo pensas de la siguiente forma, es sencillo:

let para setear variables al comienzo
if () para una condicion y lo que aparece despues entre {} para lo que queremos como resultado.
y todo eso que dije recien iria siempre dentro de una function (no se olviden la c, me paso!), para que pase algo, sino queda todo estatico.
Yo soy media dislexica asi que me sirve que aparezcan recomendaciones en Visual Studio jaja

A ver la clase unas cuantas veces m谩s. Cada vez m谩s se me complica m谩s. Pero ah铆 vamos poco a poco. Gracias por la clase.

Yo lo hice de esta manera directa sin crear variables y funciona igual, el == true no es necesario pero lo deje por redundancia

function seleccionarMascotaJugador() {
    if(hipodoge.checked == true) {
        alert("Seleccionaste a hipo!")
    } else if (capipepo.checked == true) {
        alert("Seleccionaste a capipepo!")
    } else if (ratigueya.checked == true) {
        alert("Seleccionaste a ratigueya!")
    } else {
        alert("Necesitas seleccionar un Mokepon!")
    }
}

revisen bien la sintasix pase medio dia sin resolver por mayusculas y minusculas que cosas

Asi lo resolv铆 :c

function seleccionarMascotaJugador(){
    let hipodoge = document.getElementById('hipodoge').checked
    let capipepo = document.getElementById('capipepo').checked
    let ratigueya = document.getElementById('ratigueya').checked
    let langostelvis = document.getElementById('langostelvis').checked
    let tucapalma = document.getElementById('tucapalma').checked
    let pydos = document.getElementById('pydos').checked

    if(hipodoge){
        alert('Seleccionaste el Hypodoge')
    }else if(capipepo){
        alert('Seleccionaste el Capipepo')
    }else if(ratigueya){
        alert('Seleccionaste Ratigueya')
    }else if(langostelvis){
        alert('Seleccionaste Langostelvis')
    }else if(tucapalma){
        alert('Seleccionaste Tucapalma')
    }else if(pydos){
        alert('Seleccionaste Pydos')
    }else{
        alert('Selecciona una opci贸n valida')
    }
}

JuanDC he notado con Freddy, y ahora contigo, que no utilizan ni se menciono el uso del punto y coma en JS.
Han llegado a algun tipo de estandarizaci贸n/acuerdo?

Hola! En varios lenguajes el (== ) sirve para igualar dos valores o variables. Y el (=) para asignarle un valor.
Puedes utilizar la igualaci贸n (==) para observar si el valor es verdadero o falso. Por lo tanto si el valor es igual a True (==True), la funci贸n se cumplir谩. Esta fue la manera en la que lo realic茅.

//Franco Paiz
function seleccionarMascotaJugador() {
    let hipodoge = document.getElementById('hipodoge')
    let capipepo = document.getElementById('capipepo')
    let ratigueya = document.getElementById('ratigueya')
    if (hipodoge.checked == true) {
        alert('Has seleccionado a Hipodoge!')
    } else if (capipepo.checked == true) {
        alert('Has seleccionado a Capipepo!')
    } else if (ratigueya.checked == true) {
        alert('Has seleccionado a Ratigueya!')
    } else {
        alert('ESCOGE UN POKEMON!')
    }
}```

He intentado reducir el n煤mero de palabras repetidas en los strings

Para ello he usado algunas variables que no estaban previstas en la clase. Mi idea era que sea m谩s f谩cil actualizar o modificar los strings (quiz谩 en una traducci贸n). 驴Qu茅 ser铆a preferible esto o ahorrar recursos usando menos variables?

function seleccionarMascotaJugador(){
    
    let imputSeleccionado = ''
    let imputHipodoge = document.getElementById('hipodoge')
    let imputCapipepo = document.getElementById('capipepo')
    let imputRatigueya = document.getElementById('ratigueya')
    let imputLangostelvis = document.getElementById('langostelvis')
    let imputTucapalma = document.getElementById('tucapalma')
    let imputPydos = document.getElementById('pydos')
    
    if (imputHipodoge.checked){
        imputSeleccionado = 'Hipodoge'
    }else if (imputCapipepo.checked){
        imputSeleccionado = 'Capipepo'
    }else if (imputRatigueya.checked){
        imputSeleccionado = 'Ratigueya'
    }else if (imputLangostelvis.checked){
        imputSeleccionado = 'Langostelvis'
    }else if (imputTucapalma.checked){
        imputSeleccionado = 'Tucapalma'
    }else if (imputPydos.checked){
        imputSeleccionado = 'Pydos'
    }

    if (imputSeleccionado != ''){
        alert('Has seleccionado a ' + imputSeleccionado)
    }else
        alert('No has seleccionado ninguna mascota')
}

excelente. Me encata como va explicando Juan, me animo mucho m谩s para seguir aprendiendo

a mi me funciono asi pero creo que el profe los guardo en variables para utilizarlos en otra funcion y no tener que hacer todo de nuevo.
function seleccionaMascotaJugador() {
if(hipodoge.checked){
alert(鈥楨legiste a Hipodoge鈥)
}
if(capipepo.checked){
alert(鈥楨legiste a Capipepo鈥)
}
if(ratigueya.checked){
alert(鈥楨legiste a Ratigueya鈥)
}
}

para este ejersicio yo use el while en vez de muchos if que practicamente se repetian ps todos usaban la misma logica y por eso meparecio mejor idea usar un while y para facilar el trabajo, a帽adi un array:

let pets = [鈥減et1鈥, 鈥減et2鈥,鈥減et3鈥,鈥減et4鈥,鈥減et5鈥,鈥減et6鈥,]
let x = 1
let stop = "no"
while (x <= 6 && stop == 鈥渘o鈥){
if((document.getElementById((鈥減鈥+x)).checked)==true){
petUser = x
stop = 鈥渟i鈥
}
x = x + 1
}
petUser = pets[(petUser - 1)]
alert("escogiste a " + petUser)

Al intentar hacer solo el ejercicio cree otra variable, con el id de button, y lo raro fue que funciono jaja

Decirle al jugador que seleccione una mascota en caso de qu茅 le diera al boton seleccionar sin haber seleccionado nada

Codificando el algoritmo que vimos en la clase pasada para averiguar que mascota ha sido seleccionada por el jugador

Me salio asi馃槉

yo como en piedra papel o tijera

Habla muy rapido, me gusta mucho el carisma que tiene y el sentido de cari帽o que tiene al dar la clase, por mi parte estoy tratando de retener todo. Mil gracias.

![](https://static.platzi.com/media/user_upload/image-a194f9a7-16e0-4a05-9635-fcc4ac9d6afa.jpg)

No lo voy a negar, me sent铆a raro cuando nos quitaron al profe Freddy, pero me encanta como explica el profe Juan David: Te detiene a pensar y que tu cerebro se mantenga activo y no solo est茅s prestando atenci贸n a lo zombie, adem谩s, cuando mi respuesta es similar a la que se esperaba me hace darme cuenta que SI estoy aprendiendo a pesar de lo que uno cree.

Para cuando no se haya seleccionado niguna mascota, a帽ad铆 el 鈥榚lse鈥, asi cuando no se seleccione ninguna mascota y se presione el bot贸n de seleccionar, me salga una alerta de que no seleccione nada. (Min 10:29)

La verdad no me gusta el m茅todo de ense帽anza de este profesor, porque cuando coloca alguna linea de c贸digo siempre a lo ultimo termina o corrigi茅ndola o a帽adiendo algo que iba antes, y eso lo 煤nico que hace es confundir.

Casi lloro de emoci贸n porque s铆 puedo!!! programar es posible! y soy muy feliz
BTW deber铆an poner a este profe en muchos cursos

Dentro de mi c贸digo en la funci贸n de seleccionar mascota dentro del IF no utilice ning煤n llamado a alguna variable , simplemente utilice el ID del input, ya que en la funci贸n iniciar juego ya existe un evento cuando se le da click al bot贸n de seleccionar, creo que ahorra l铆neas de c贸digo y es igual de funcional

if (miura.checked) {
alert(鈥楽ELECCIONASTE A MIURA鈥)
} else if (fosten.checked) {
alert(鈥楽ELECCIONASTE A FOSTEN鈥)
} else if (spined.checked) {
alert(鈥楽ELECCIONASTE A SPINED鈥)
}
else {
alert(鈥淒EBES SELECCIONAR TU MASCOTA鈥)
}

Mi soluci贸n a esto, la cual la hice en la clase pasada fue colocar el siguiente c贸digo:

 if(input1.checked) {
        alert("Seleccionaste a Input 1")
    } else if (input2.checked) {
        alert("Seleccionaste a Input 2")
    }
	

Y as铆 para las dem谩s opciones, porque tengo m谩s de tres, y el c贸digo final se ver铆a algo as铆, solo con dos inputs para que no sea tan largo:

 if(input1.checked) {
        alert("Seleccionaste a Input 1")
    } else if (input2.checked) {
        alert("Seleccionaste a Input 2")
     }	else {
        alert("No has seleccionado nada")
    }

Y a menos de que vayamos a usar esas variables m谩s adelante, siento que simplifica un poco el c贸digo hacerlo de esa forma 馃槂

Y definitivamente la ayuda que brinda Visual Studio Code鈥 estamos un paso mas all谩 de cometer ese tipo de errores.

Algo que hice desde hace varias versiones, fue el mover el Radio Button al inicio del nombre de la mascota鈥 pues visualmente creo que ayuda #UI #UX

Me siento identificada con la actitud del Profe cada vez que todo sale bien 馃榿

Estoy feliz de tomar clases con Castro

Dejo mi solucion.

Yo hice las condis de esta manera

let Personaje_seleccionado
    if(document.getElementById("Lu Chang").checked){
        Personaje_seleccionado="Lu Chang"
    }
    else if(document.getElementById("Ardrid").checked){
        Personaje_seleccionado="Ardrid"
    }
    else if(document.getElementById("Fogos").checked){
        Personaje_seleccionado="Fogos"
    }
    else if(document.getElementById("Shock").checked){
        Personaje_seleccionado="Shock"
    }
    else if(document.getElementById("Godman").checked){
        Personaje_seleccionado="Godman"
    }
    else if(document.getElementById("Oldswan").checked){
        Personaje_seleccionado="Oldswan"
    
    }
    else{
        Personaje_seleccionado='Ningun personaje' 
    }
    alert('SELECCIONASTE A '+ Personaje_seleccionado)

Me tom茅 la libertad de hacerlo de esta manera y corre muy bien.

<code> 
function seleccionarMascotaJugador(){
    let inputHipodoge = document.getElementById('Hipodoge')
    let inputCapipepo = document.getElementById('Capipepo')
    let inputRatigeya = document.getElementById('Ratig眉eya')

    if (inputHipodoge.checked)
        alert("Seleccionaste a Hipodoge")
    else if (inputCapipepo.checked)
        alert("Seleccionaste a Capipepo")
    else if (inputRatigeya.checked)
        alert("Seleccionaste a Ratig眉eya")
    else {
        alert("Por favor, elige alguno de los personajes para comenzar el juego")
    }

}

![](

As铆 es como voy hasta ahora. Me siento demasiado orgullosa de esto, hasta cre茅 personajes con MidJourney para colocarlos como los contrincantes. 鉂わ笍 Los feedback son muy bienvenidos.

para los que no usaron la etiqueta input sino select no se le agrega .checked sino .selected

function seleccionarMascota(){
  let option1 = document.getElementById('m1')
  let option2 = document.getElementById('m2')

  if (option1.selected){
    alert("hipoge")
  }else if (option2.selected) {
    alert("bless")
  }
}

bueno aqui aprendiendo pasito a pasito

Profe Juan, ud es ch茅vere. Emite una gran energ铆a que 谩nima a cualquiera a aprender y aprender sin dejar de parar. Un saludo desde Per煤.

Mi soluci贸n:

function petSearcher() {

    let petArray = ["hipodoge", "capipepo", "ratigueya", "langostelvis", "pydos"];

    for (let i = 0; i < petArray.length; i++) {

        if (document.getElementById(petArray[i]).checked) {

            alert("You have successfully selected " + petArray[i] + " as your warrior pet");
            break;

        } else {
            alert("You haven't chosen a mokepon yet!");
            break;
        }
    }
}


function charger() {
    let petConfirmButton = document.getElementById("confirm-button");
    petConfirmButton.addEventListener('click', petSearcher);
}


window.addEventListener('load', charger());```

As铆 resolv铆 el ejercicio 馃槂

if (inputHipodoge.checked) {
        alert("Seleccionaste a Hipodoge")
    } else if (inputCapipepo.checked) {
        alert("Seleccionaste a Capipepo")
    } else if (inputRatigueya.checked) {
        alert("Seleccionaste a Ratigueya")
    } else {
        alert("no has seleccionado nada, rey")
} 

隆Qu茅 buen curso! 馃槂

Muy buena clase

Asi me va quedando

Gracias profe Juan David Castro, muy buena explicacion

Puse los elementos dentro de una lista y los busque con find, para evitar tantos if.

function seleccionarMascotaJugador()
{
	let inputMascotas=[document.getElementById("Hipo"),document.getElementById("Capi"),document.getElementById("Rati"),document.getElementById("Lango"),document.getElementById("Tuca"),document.getElementById("Py")];
	let mascotaSeleccion=inputMascotas.find(elemento=>elemento.checked);
	if (mascotaSeleccion===undefined) 
		alert("Ten茅s que seleccionar una mascota");
	else
		alert("seleccionaste a "+mascotaSeleccion.id);
}

CAPIPEO.!!
min 4.28.
a mi tambi茅n me pas贸

<if (inputHipodoge.checked) {
        alert("Seleccionaste a Hipodoge!!!")
    } else if (inputCapipepo.checked) {
        alert("Seleccionaste a Capipepo!!!")
    } else if (inputRatigueya.checked) {
        alert("Seleccionaste a Ratigueya!!!")
    } else 
        alert ("No has seleccionado aun =(")> 

Adjunto mi aporte
Es un poco diferente ya que estoy haciendo una variante con autos

function iniciarPrograma()
{
    
    let botonSeleccionarAuto = document.getElementById("botonSeleccionarAuto") //se crea una variable del boton, y se le asigna el id del html
    botonSeleccionarAuto.addEventListener("click", seleccionarAuto) //se agrega un eventLister al boton que cuando se le de click ejecute una function
}

function seleccionarAuto() //function para seleccionar auto
{

    let autoOpcion1 = document.getElementById("autoOpcion1") //se asignan variables a los id del html
    let autoOpcion2 = document.getElementById("autoOpcion2")
    let autoOpcion3 = document.getElementById("autoOpcion3")
    let autoSeleccionado = "" //variable del auto seleccionado segun el checked

    if(autoOpcion1.checked)
    {
        autoSeleccionado = "Toyota"
    }
    else if(autoOpcion2.checked)
    {
        autoSeleccionado = "Audi"
    }
    else if(autoOpcion3.checked)
    {
        autoSeleccionado = "BYD"
    }
    else if(autoOpcion4.checked)
    {
        autoSeleccionado = "BMW"
    }
    else if(autoOpcion5.checked)
    {
        autoSeleccionado = "Nissan"
    }
    else if(autoOpcion6.checked)
    {
        autoSeleccionado = "Volskwagen"
    }

    if(autoSeleccionado != "")
    {
        alert
        (
            "El auto seleccionado es: " + autoSeleccionado + "\n"
        )
    }
    
    else
    {
        alert("Por favor selecciona un auto")
    }

}


window.addEventListener("load", iniciarPrograma) //load html before JS

Yo lo hice de esta manera que me parece m谩s sencilla y se ve bien. 驴Qu茅 opinan?

function seleccionarBestia(){
    if(document.getElementById("guara").checked){
        alert("Has seleccionado al Guara")
    }
    else if(document.getElementById("armadillo").checked){
        alert("Has seleccionado al Armadillo")
    }
    else if(document.getElementById("guasarapo").checked){
        alert("Has seleccionado al Guasarapo")
    }
}

let botonSeleccionarBestia = document.getElementById("seleccionar-besita")
botonSeleccionarBestia.addEventListener("click", seleccionarBestia)


Gracias.

El curso esta muy did谩ctico a darle con todo y terminar el curso que as铆 uno aprende divirti茅ndose, comparto mi avance

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

    if (inputHipodoge.checked){
        alert("Seleccionaste a Hipodoge 馃馃挧")
    } else if(inputCapipepo.checked){
        alert("Seleccionaste a Capipepo 馃Λ馃尡")
    } else if(inputRatigueya.checked){
        alert("Seleccionaste a Ratigueya 馃悁馃敟")
    } else {
        alert("Seleccionaste Perder 鈽狅笍")
    }
}

En este punto del curso empec茅 a sentirme algo confundido o perdido, sin embargo la din谩mica y actitud del profe Juan David hace que sea menos frustrante y un poco m谩s sencillo continuar aprendiendo鈥 隆Felicitaciones profe!

function playerPet(){
let inputhipo = document.getElementById(鈥榟ipodoge鈥)
let inputcapi = document.getElementById(鈥榗apipepo鈥)
let inpurati = document.getElementById(鈥榬atigueya鈥)

if (inputhipo.checked){
    alert('You selected Hipodge')
} else if (inputcapi.checked){
    alert('You selected Capipepo')
} else if (inpurati.checked){
    alert('You selected Ratigueya')
} else {
    alert('Select your pet')
}

}

declaramos las variables: let inputHipodoge = document.getELementById(鈥渉ipodoge鈥)

para directamante llamar a la variable y poner solo en if (inputHipodoge.checked) {
alert(鈥淪eleccionaste a hipodoge鈥)
}

el .checked se usa para chequear si es true o false (verdadero o falso)

Perfecto! , aprecio la energ铆a con la que imparte las clases logra animar mucho.

El mio quedo asi, no se si me podrian sugerirme alguna otra idea para validar cuando no escoge a ningunos

function iniciarJuego() {
    let botonMascotaJugador = document.getElementById('boton-mascotas')
    botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
}

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

    if (inputHipodoge.checked) {
        alert('Seleccionaste Hipodoge')
    } else if (inputCapipepo.checked) {
        alert('Seleccioneste a Capipepo')
    } else if (inputRatigueya.checked) {
        alert('Seleccioneste a Ratigueya')
    } else {
        alert('Selecciona una mascota 馃樅')
    }
}


window.addEventListener('load', iniciarJuego)

A m铆 me gusta que cuando los if, else if y else tienen una instrucci贸n simple, colocarla de forma directa como mi ejemplo de abajo, siento que queda m谩s limpio y ordenado.

if(hipodoge.checked) alert("Seleccionaste a Hipodoge");
else if(capipepo.checked) alert("Seleccionaste a Capipepo");
else if(ratigueya.checked) alert("Seleccionaste a Ratigueya");
else alert("Selecciona una mascota");

Al ver la clase anterior fui modificando el c贸digo mientras entend铆a los conceptos que nos pasaba el profe en la clase pasada, el c贸digo me quedo un tanto diferente al del profe en esta clase, ya que no tengo las variables input que se crearon esta clase, aun asi el mokepon me funciona perfectamente.

No se si esto sera una mala practica o es una forma diferente de hacerlo, pero les comparto mi codigo para que lo vean 馃槃

function iniciarJuego(){
    let botonMascotaJugador = document.getElementById("boton-mascota")
    botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador)

}

function seleccionarMascotaJugador(){
    if (hipodoge.checked){
        alert("隆Haz seleccionado a Hipodoge!")
    } else if (capipepo.checked){
        alert("隆Haz seleccionado a Capipepo!")
    } else if (ratigueya.checked){
        alert("隆Haz seleccionado a Ratigueya!")
    } else{
        alert("No has seleccionado ninguna mascota, para continuar seleciona alguna")
    }
}

window.addEventListener("load", iniciarJuego)

馃搶 el addEventListener nos ayuda a detectar acciones que ocurren en nuestro HTML

Esta fue mi soluci贸n, como los inputs en el c贸digo HTML del curso ya tienen un atributo id, con ese mismo identificador realice el llamado por JS mediante la condicional (garados.checked)
bueno en tu caso debe ser un nombre diferente
// function SeleccionarMascotaJugador(){
// if (garados.checked){

// alert(鈥渟eleccionaste garados鈥)
// }
// else if (bulbasor.checked){

// alert(鈥渟eleccionaste bulbasor鈥)
// }
// else if(charmander.checked){

// alert(鈥渟eleccionaste charmander鈥)
// }

// }

lo hice as铆

// aqui se dispara la funcion cuando le picamod al boton "seleccionar"
function seleccionarMascotaJugador() {
  if (document.getElementById("hipodoge").checked) {
    alert("SELECCIONASTE A HIPODOGE");
  }else if (document.getElementById("capipepo").checked) {
    alert("SELECCIONASTE A capipepo").checked;
  } else if (document.getElementById("ratigueya").checked) {
    alert("SELECCIONASTE A Ratigueya");
  } else {
    alert("Elige una mascota")
  }
}
let botonMascotaJugador = document.getElementById("btn-mascota");
botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador);

Ac谩 una versi贸n en ingles sin utilizar bucles, requiere algunos conceptos intermedios de JS pero quise darle un toque personal.

function selectPlayerPet() {
    // get all the pets
    const pets = document.getElementsByName('pet');
    //turn pets into an array
    const petlist = Array.prototype.slice.call(pets);
    //find selected pet
    const pet = petlist.find((element) => element.checked == true)?.id;
    const petShout = typeof pet !== 'undefined' ? pet.toUpperCase() : '';
    const message =
        petShout == ''
            ? 'Please select a pet'
            : 'YOU HAVE PICKED YOUR PET, ' + petShout + '!!!';
    alert(message);
}

Sin duda esta clase de programacion basica puede motivar a muchos 馃槂

pausando la clase, realic茅 la siguiente formula que aprend铆 con Freddy.

luego de los if鈥檚 sobre cada input . debajo puse la siguiente formula.
else {
alert(鈥楴o elegiste nadda鈥)
}

PD: estos profesores ense帽an muy claramente, vamos a por m谩s.

Yo lo hice as铆! 馃槃

<function seleccionarMascotaJugador(){ 
    let inputHipodoge = document.getElementById("Hipodoge");
    let inputCapipepo = document.getElementById("Capipepo");
    let inputRatigueya = document.getElementById("Ratigueya");

    if (inputHipodoge.checked){
        alert("Seleccionaste a Hipodoge ")
    } else if (inputCapipepo.checked){
        alert("Seleccionaste a Capipepo ")
    } 
    // En este ultimo else lo == a true porque el evento .checked
    // lo que hace es que si el evento click se dispara me dice true
    // de lo contrario sigue en false (boleanos) pero, si se dispara 
    // el evento en teoria es true por eso no es necesario ponerlo.
    else if (inputRatigueya.checked == true){
        alert("Seleccionaste a Ratigueya ")
    } else (document.getElementById.checked == false);{
        alert("隆Ops! Olvidaste seleccionar alguna de las mascotas. 馃槄");
    }
}> 

function selecionarMascotaJugador () {
let btn_select = document.getElementsByName(鈥榤ascota鈥)
let cnt = 0

btn_select.forEach(_btn_select => {
if (_btn_select.checked) {
alert('selecionaste a 鈥 + _btn_select.id)
cnt = cnt + 1
}
}

)
if (cnt == 0) {
alert('ERROR No seleccionaeste Mascota ')
}
}

Yo lo hice de esta manera cuando pidieron hacer pausa al video. llam茅 directamente a los inputs e hice la validaci贸n dentro de la condicional. De esta manera consegu铆 hacer menos l铆neas de c贸digo. Espero ayude este aporte 馃槂

鈥 puuum! f铆jate lo que nos dice馃ぃ馃ぃ

sin duda, cuando el c贸digo funciona es: " a este momento de mi vida le llamo felicidad"

Ay me sali贸 algo!
Que felicidad. Quizas es peque帽o pero para mi mucho.
En el final de la clase pude hacer sola el alerta para que Seleccione una mascota 馃槂

Que alegr铆a, pude escribir la l铆nea de c贸digo que faltaba para que me lanzara un mensaje cuando se nos olvide seleccionar una mascota. Algunos les parecer谩 algo muy b谩sico, pero yo lo celebro y agradezco por este reto cumplido. Gracias Juan

Para que tengan todo el c贸digo en pantalla sin necesidad de usar el scroll lateral es VSCODE, puedes hacer esto:

Vete a view y ve abajo, selecciona word wrap o puedes usar el comando alt + z