Una sola fuente de la verdad

Este curso esta en otro nivel. Cada vez entiendo mas la progrmación y quiero dedicarle mas tiempo a estudiar.💚💚💚

Sinceramente Platzi, os habéis paseado con este curso 💃🏽🙏🏼❤️

En resumen:
Todas las funciones que tengan información “a mano” que nosotros ponemos, la vamos a retirar, para poner sólo la información que existe en los objetos, es decir Usar una sola fuente de verdad.

Información “a mano”:

spanMascotaJugador.innerHTML = 'Capipepo'

haciendo uso de una Fuente de verdad:

spanMascotaJugador.innerHTML = inputHipodoge.id

Te dejo un buen recurso donde puedes ahonda más en el tema de Una sola fuente de verdad

single source of truth Lo único malo que no hay una versión en español

Este curso es tan bueno (Y GRATIS) que no entiendo cómo mucha gente no aprende a programar🤯.

Por cierto, es posible evitarse la validación con if si se declara la mascota del jugador más o menos así:

let mJugador = eval(document.querySelector('input[name="mascota"]:checked').id)

Siempre que el input esté así:

<input type="radio" name="mascota" id="hipodoge">

Una fuente de verdad es que Platzi es la mejor inversión que harás.
Este valor se repetirá sin importar el día, mes o año en el que lo quieras ocupar

yo he creado una pequeña funcion la cual dependiendo el caso sustituye el span por la imagen correspondiente

Una sola fuente de verdad se refiere a:

• Tener en una sola variable la información que se usará repetidamente en el programa (en este caso el nombre del mokepón), y no agregar esa información directamente en el código (harcodear)

Uno va dejando un poco el miedo a un lado, cada vez el gusto por aprender programación es mayor. 😄

Me encanta!!!, Amo platzi, amo a los profes, amo a Cheems y te amo a ti.

en vez de colocar el nombre de la mascota, coloque la imagen de la mascota.

function seleccionarMascotaJugador(){

if(inputMascota1.checked){
    mascotaJugador = inputMascota1.id
    muestraMascotaJuagador()
} else if(inputMascota2.checked){
    mascotaJugador = inputMascota2.id
    muestraMascotaJuagador()
} else if(inputMascota3.checked){
    mascotaJugador = inputMascota3.id
    muestraMascotaJuagador()
} else {
    alert('Debe Seleccionar una Mascota')
}
sectionSeleccionarAtaque.style.display = ''
sectionSeleccionarMascota.style.display = 'none'

seleccionarMascotaEnemigo()

}

function muestraMascotaJuagador(){
mokemones.forEach((mokemon) => {
if(mascotaJugador == mokemon.nombre){
document.getElementById(“imagen-mostro-ataque-jugador”).innerHTML=<img class="imagen-mostro-ataque" src="${mokemon.imagen}" alt="${mokemon.nombre}" />;
}
})
}

function seleccionarMascotaEnemigo(){
mascotaEnemigo = aleatorio(1, 3)
mokemones.forEach((mokemon) => {
console.log(mascotaEnemigo + ’ ’ + mokemon.apodo)
if(mascotaEnemigo == mokemon.apodo){
console.log(‘paso’)
document.getElementById(“imagen-mostro-ataque-enemigo”).innerHTML=<img class="imagen-mostro-ataque" src="${mokemon.imagen}" alt="${mokemon.nombre}" />;
}
})

}

Pensé que lo haría con Hipodoge.nombre.

Siempre me han gustado estos temas de poder automatizar o parametrizar todo lo que uno crea. Esa fue una de las razones por las que me animé a estudiar programación.

Una sola fuente de la verdad es la información que tenemos ne nuestros objetos. Todas las function que tengan información a mano (Hardcoded) deberíamos retirarla.

• typeof() que tipo de elemento es lo que se le coloca
• Lo que veo es que al colocar la variable que recorre el array con forEach de la clase Mokepon, las variables pasan hacer objetos, y asi exraer información de ellos.
• entonces para llegar al método del objeto seria con el “.”

mokeponooooooo

Tu sabes cuantos años de flow tú tienes que acumular para llegar aquí,muchos 😜🤘🏻🦁😏

Es interesante la verdad la forma en que estos valores son usados. Su logica es algo parecido a lo que uso Flutter, jamas imagiene que algunas reglas de logica sean las mismas. Quede impresionado.

En mi caso los input me aparecen como “null”, ya he revisado el código un montón de veces y el del profesor pero no he logrado dar con el problema

const sectionSeleccionAtaque = document.getElementById("seleccionaAtaque") 
const spanMascotaJugador = document.getElementById("mascota-jugador")```


function seleccionarMascotaJugador() {
    
    sectionSeleccionarMascota.style.display = 'none'
    sectionSeleccionAtaque.style.display = 'flex'
    
    if (inputHipodoge.checked) {
        spanMascotaJugador.innerHTML = inputHipodoge.id
    } else if (inputCapipepo.checked) {
        spanMascotaJugador.innerHTML = inputCapipepo.id
    } else if (inputRatigueya.checked) {
        spanMascotaJugador.innerHTML = inputRatigueya.id
    } else {
        alert('Selecciona una mascota')
    }

    seleccionarMascotaEnemigo()
}

El método:

typeof (AquiElElementoQueSeQuiere
Consultar) nos sirve para saber que tipo de elemento es
ya sea: objet, class, array, etc.

A mi me quedo asi la funcion

function seleccionarMascotaJugador () {
    seccionMascota.style.display = 'none';
    seccionAtaques.style.display = 'flex';

    let selected = document.querySelector('input[name="mascota"]:checked');
    if (selected === null) {
        location.reload();
        alert('no seleccionaste nada');
    }
    mascotaJugador = selected.id;
    spanMascotaJugador.innerHTML = mascotaJugador;
    buttonMasconta.disabled = true;
    ramdonMascota();
    inputMascotaEnemigo.innerHTML = mascontaEnemiga;

    insertarImagenMokepon( mascotaJugador);
}

nesecito ayudaaaaaa

Siempre me quedo con las ganas de ponerle “Like” o “Me encanta” a cada clase

Este curso está excelente. se aprende bastante.

Si por alguna razón, hiciste todo bien pero las imágenes iniciales desaparecieron, revisa si dejaste alguna de las comillas cuando cambiaste el link del archivo de las fotos iniciales por ${mokepon.foto}. Me tomó varias horas ver que lo había dejado así <img src="${mokepon.foto}.

Averiguar que tipo de elemento una variable

Gracias por la clase. Corta pero eficaz.

En el anterior video comente que se me ocurrio una solución para el inputHipodoge = document.get…, con la funcion eval(), pero no tome en cuenta que al hacer los inputHipodoge.checked tambien podia resumir ese codigo, a un for anidado con if, no soy muhco de explicar, así que espero entiendan el codigo.

function seleccionarMascotaJugador() {
    for (let i = 0; i < mokepones.length; i++) {
        if (eval(`input${mokepones[i].nombre}.checked`)) {
            spanMascotaJugador.innerHTML = mokepones[i].nombre
            sectionSeleccionarAtaque.style.display = 'flex'
            sectionSeleccionarMascota.style.display = 'none'

            seleccionarMascotaEnemigo()
            break;
        } else if (i == (mokepones.length - 1)){
            alert('Selecciona una mascota')
        }
    }
}

Ya que creamos estos elementos desde JS y los rellenamos con informacion de nuestros objetos, aprovecharemos esto por que cada uno de nuestros elementos es un objeto, por lo tanto podemos acceder a las propiedades de esto a traves de la notacion de punto.

Platzi es morado XD

UNDEFINED
si tienes problemas con el nombre del personaje que deberia mostrarse al utilizar este nuevo sistema llamando al nombre usando el id del objeto, revisa el nombre del la variable en la seccion donde se trabaja eso. En mi caso la variable global ( de las que se colocan al principio de todo el codigo en JavaScript), que me servia para los nombre de los MOKEPONES, tenian el mismo nombre que las que estaban dentro de la funcion de elegir al personaje, por tanto se sobreescribia el contenido y daba el error UNDEFINED.
ej:
variable global ----> inputsubzero
variable de la funcion seleccionar personaje —> inputsubzero

Resultado: UNDEFINED

para corregirlo solo le agregue otra paralabra a la variable que uso en la seccion de elegir el personaje y se soluciono

si no lo entindes a la primera lectura, trata de ir comparando cada parte de lo que lees aqui con tu codigo, y te iras ilustrando. Pero tambien me puedes preguntar para mas detalles.

de aqui salgo atrabajr, el mejor curso junto a el otro de programcion

cada clase es algo nuevo, excelente

Harcode: codificación en la que los valores son escritos directamente en el código fuente del programa en lugar de
de ser definidos como variable o constante.

Mis apuntes de esta clase:

METODOS

typeof -> Que tipo de elemento es mi variable

FUENTE DE VERDAD
Utilizar la info de nuestros objetos: los input están ligados a la info de html que pusimos con javascript

Reemplazar la variable que se esta validando a mano y la reemplazamos con la id de ese elemento para que sea dinámico:

if (inputHipodoge.checked) {
	spanMascotaJugador.innerHTML = inputHipodoge.id
} else if (inputCapipepo.checked) {
	spanMascotaJugador.innerHTML = inputCapipepo.id
} else if (inputRatigueya.checked) {
	spanMascotaJugador.innerHTML = inputRatigueya.id
} else {
	alert('Selecciona una mascota')
}

Hola a todas, vego a decirles que investigué cómo poder reducir el código de seleccionarMascotaJugador

function selectPet() {
  var radios = document.getElementsByName("avatar");
  for (var radio of radios) {
    if (radio.checked) {
      spanPetPlayer.innerHTML = radio.id;
      puchamones.forEach((puchamon) => {
        if (puchamon.name == radio.id) {
          imgPet.src = puchamon.img;
        }
      });
      selectPetEnemy();
    }
  }
}

Guardo todos los inputs radio dentro de una variable llamada radios, buscandolos por el nombre
avatar: es el nombre que tienen los inputs radio
lo recorro todo con un forEach y busco el que esté seleccionado, cuando lo encuentro, mediante la propiedad del objeto que cree le asigno el id, que contiene el nombre de la mascota, lo mismo sucede con el resto del código, pero es para asignar la imagen correspondiente

Si esta no es de la mejores clases de todo el curso, no se que lo sea, que increible Diego como profesor

La info que va cambiando repentinamente o con el tiempo debe ser manejada a través de Javascript y estructurada con HTML (Con js puedes también manejar y manipular el DOM, por lo tanto sirve también). El beneficio es que el proyecto se vuelve escalable y eficaz en el largo plazo.

Sin embargo, habrá información que es mejor escribirla directamente

Con eso no habria que hacer muchos cambios al agregar un nuevo personaje. La verdad esta genial 😃

Cada vez entiendo el flujo de los datos con facilidad!

Una fuente de verdad es tener una sola variable que me va a dar información que se va a utilizar repetidamente en todo el programa, de tal manera que los cambios que se realicen se harán de forma dinámica y no manual.

aqui mi versión de colocar la imagen de la mascota del jugador

    let maxNumberArrayPets = mokepones.length;

    // loop al array

    if (maxNumberArrayPets > 0) {
        for (let inc = 0; inc < maxNumberArrayPets; inc++) {

            let pets_input = pets_array[inc];

            if (pets_array[inc].checked) {

                gvimagegamer.setAttribute("src", mokepones[inc].photo)

                gamerChoice = inc;
                petsInputTitle = pets_input.title;

                break;
            }
        }

    } 

📌 Lo de una sola fuente de verdad lo entiendo como ligar un valor hacia una única variable, parece ser que no es exactamente así, pero me ayuda a comprenderlo

es bastante difícil para una persona que empieza como yo realizar estos cambios, es prácticamente restructurar todo lo ya echo.

Dios mío… Programar siendo disléxico es terrible

Diego diciendo… Vamos al Navegador y ya todo funciona como esperamos…
Mi navegador

no mi ciela

-_-

Wuuooou cada vez me voy sintiendo con mas seguridad y potencial para que mis proyectos queden mejor

Este curso ofrece una perspectiva muy aplia de lo que es la programación y todo lo que puedes hacer con ella, es alucinante.

Aportar imagen al resultado:

else if (inputCapipepo.checked) {
        spanMascotaJugador.innerHTML = inputCapipepo.id
        imagenJugador.innerHTML = `<img src=${capipepo.foto} alt=${capipepo.nombre}>`
        inputCapipepo.checked = false

algunos datos se borran otros se agregan ahí cuando uno se pierde pero ay que prestar mucha atención

“Una sola fuente de la verdad” 👀

Es normal sonreír cada vez que entiendes algo nuevo o solo soy yo?
Que maravilla que es la programación y lo mucho que puede facilitar las cosas (para el cliente, a nosotros nos desarma el cerebro)

<code> 

Este curso es geniall, me encanta esto de las clases!!

Anteriormente llamaba la mascota del jugador y del enemigo en la segunda pantalla para escoger el ataque, como el código cambió por el tema de optimización, no sabia como llamarlo, así que decidí crear una funcion para obtener la imagen/foto del jugador y del enemigo.

Les muestro la implementación y el uso cuando la llamo para traer la información correspondiente:

El nombre de este concepto “Una sola fuente de la verdad” es muy épico. 💪🌿

la fuente de verdad es el ciclo for donde están todos los elementos iterados que necesitamos para hacer las comparaciones.

Tambie se pudo realizar el mismo bloque de codigo que se utilizo para generar las tarjetas en la parte de preguntar que label esta checke:
Solo se ingresaria los imputs creados por medio del .forEach en un nuevo array, y utilizar el mismo metodo, para que cada vez que se ingrese un nuevo Mokepon, se genere un if(mokepon.checked) por cada mokepon dado de alta, me doy a entender? yo me entiendo jajaja 😂