Fundamentos de Programación

1

Bienvenida a Platzi: ¿qué necesitas para tomar el curso?

2

Programación en Navegadores: Primeros Pasos

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

No se trata de lo que quieres comprar, sino de quién quieres ser. Invierte en tu educación con el precio especial

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

12 Días
1 Hrs
45 Min
27 Seg
Curso Gratis de Programación Básica

Curso Gratis de Programación Básica

Juan David Castro Gallego

Juan David Castro Gallego

Sección de elegir mascota

17/84
Recursos

Aportes 275

Preguntas 51

Ordenar por:

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

Para saltar un párrafo se puede utilizar <br> en donde quieras que sea el salto de linea.

También lo que yo hice fue colocar el input type radio arriba para que apareciera en el lado izquierdo del texto, siento que es mas ordenado.

2022 = Mokepon 💚
2016 = Pakiman 💚💚💚

Significado de “e”:
El formato Científico muestra un número en notación exponencial, reemplazando parte del número por E+n,en el que E (exponente) multiplica el número anterior por 10 a la potencia n. Por ejemplo, un formato científico de 2 decimales muestra 12345678901 como 1,23E+10, que es 1,23 veces 10 a la décima potencia.

Buscando en tutoriales, encontré como insertar imagenes para que se vea mejor (dejo el codigo base debajo):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MOKEPON</title>
</head>
<body>

    <script>

        var img = document.createElement("img");
        img.src
    
        var div = document.getElementById("x");
        div.appendChild(img);
        //block.setAttribute("style", "text-align:center");
    
        </script>

    <h1> Mokepon! 🌱🔥💧 </h1>
    
    <section id="seleccionar-mokepon"></section>
        <h2>Elige a tu Mokemon:</h2>

        <p>
            <label for="ajolote">
                <input type="radio" name="mokepon" id="ajolote"/>
                <img src="img/ajolote_600x372.jpg" alt="HTML5 Logo" title="agua_mokepon01" width="124" height="100" id="ajolote"/>
            Ajolote
            </label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        

            <label for="topo">
                <input type="radio" name="mokepon" id="topo"/>
                <img src="img/topo_600x449.jpg" alt="HTML5 Logo" title="tierra_mokepon01" width="124" height="100" id="topo"/>
                Topo
            </label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            
            <label for="hormigadefuego">
                <input type="radio" name="mokepon" id="hormigadefuego"/>
                <img src="img/hormigafuego_600x336.jpg" alt="HTML5 Logo" title="fuego_mokepon01" width="124" height="100" id="hormigadefuego"/>
                Hormiga de fuego
            </label>

        <p>
            <label for="komodo">
                <input type="radio" name="mokepon" id="komodo"/>
                <img src="img/komodo_1238x878.jpg" alt="HTML5 Logo" title="agua_mokepon01" width="124" height="100" id="komodo"/>
                Dragon de Komodo
            </label>
            &nbsp;
            
            <label for="tortuga">
                <input type="radio" name="mokepon" id="tortuga"/>
                <img src="img/tortuga_1239x697.jpg" alt="HTML5 Logo" title="tierra_mokepon01" width="124" height="100" id="tortuga"/>
                Tortuga
            </label>
            &nbsp;&nbsp;

            <label for="caballodemar">
                <input type="radio" name="mokepon" id="caballodemar"/>
                <img src="img/Caballitodemar_1557x888.jpg" alt="HTML5 Logo" title="tierra_mokepon01" width="124" height="100" id="caballodemar"/>
            Caballo de mar
            </label>
            &nbsp;
        </p> 


        <p>
            <button>Confirmar</button>
        </p>
    
    <section id="seleccionar-ataque">   
        <h2>Elige tu ataque:</h2>

        <p>Tienes <span>3</span> vidas</p>
        <p>El contrincante tiene <span>3</span> vidas</p>

        <p>
            <button>Tierra 🌱</button>
            <button>Fuego 🔥</button>
            <button>Agua 💧</button>
        </p>

    </section>

    <section id="mensajes"></section>
        <p>MENSAJE ATAQUE</p>

    <section id="reiniciar-terminar"></section>
        <button>Volver a jugar</button>
        <button>Terminar</button>
    
</body>
</html>

Aprendamos algo nuevo

Gracias a la etiqueta optgroup, podemos crear listas desplegables divididas por secciones. Es probable que si vienes desde 0, te cueste un poco porque involucra a varias etiquetas más, pero cuando vayas practicando y avanzando la entenderás mucho mejor.

Resultado

Código

Hipoge -> Agua
Capipepo -> Tierra
Ratigueya -> Fuego
Langostelvis -> Agua y Fuego
Tucapalma -> Agua y Tierra
Pydos -> Tierra y Fuego

👏 ❤️

📌Mis apuntes de la clase (Por si a alguien le sirve):
.
💥SINTAXIS:
<input type="" name="" id="" />
<label> for="
" </label>
.
💥INPUT:
Se usa para crear controles interactivos para formularios basados en la web con el fin de recibir datos del usuario.
.
💥TYPE:
El tipo de control a mostrar. Su valor predeterminado es text, si no se especifica este atributo.
.
💥RADIO (& NAME):
Botón radio. Se debe utilizar el atributo value para definir el valor que se enviará por este elemento. Se utiliza el atributo checked para indicar si el elemento está seleccionado de forma predeterminada. Los botones radio que tengan el mismo valor para su atributo name están dentro del mismo “grupo de botones radio”. Solo un botón radio dentro de un grupo puede ser seleccionado a la vez.
.
💥ID:
El atributo ID especifica un único ID para el elemento HTML (el valor debe ser único, o sea, no repetirse dentro del documento HTML).
.
💥LABEL:
El elemento HTML <label> representa una etiqueta para un elemento en una interfaz de usuario.
Este puede estar asociado con un control ya sea mediante la utilizacion del atributo for, o ubicando el control dentro del elemento label.
Tal control es llamado “el control etiquetado” del elemento label.

Me imaginé esta manera de seleccionar tu mascota y se me hizo mejor así que me puse a investigar como se hacía, y así es como quedó.

 <section id="seleccionar-mascota">
            <h2>Elige tu mascota</h2>
    
            <select name="mascota">    
                <option id="hipodoge">Hipodoge</option>
                <option id="capipepo">Capipepo</option>
                <option id="ratigueya">Ratigueya</option>
            </select>    

            <button>Seleccionar</button>

        </section>

OTRA FORMA DE USAR LABEL

<label>Mascota
      <input type="radio" name="mascota">
</label>

Puedes ver que como input se encuentra dentro de label no es necesario usar for

Este profesor está re loco jajajaja.
Excelente servicio: ⭐⭐⭐⭐⭐⭐⭐⭐⭐

Me imagino como habrá sido la reunión donde tenian que elegir los nombres JAJAJAJAJA

Viendo como va este proyecto estaría genial utilizar una API de pokemones, y poder filtrar y seleccionar el pokemon que queramos (No sé mucho de pokemones, pero estaría muy interesante)

Faltó el legendario PIKACHO, sólo los verdaderos Platzinautas recordarán.


Dejaré algunos aportes que con la practica harán que puedan hacer todas esas líneas en menos de 20 segundos:

1.pueden usar el multicursor para editar en varias lineas de forma simultanea con Alt + Ctrl y las flechas

2. con Ctrl + Shift y -> seleccionan todos los nombres para tenerlos en el portapapeles

3. con Shift + Alt pueden duplicar lineas de código

4. vuelven a utilizar el multicursor

5. simplemente le dan Ctrl + V y ya tienen todos las mascotas.

6. lo demas es solo seguir escribiendo

Estuve probando e investigando la manera de agregarle mas detalles, encontré como agregarle imágenes.
Resultado de como va quedando.

les dejo el código mas abajo, si alguien le sirve.

<code> 
```<!DOCTYPE html>
<html>
    <head>
        <meta charset="uft-8"/>
        <title>MOKEPON!</title>
    </head>
    <body>
        
        <h1>MOKEPON!🔥💧🌱</h1>

        <section id="Seleccionar-Mascota">
            <h2>Elige tu Mokemon
            <img src="img/Pokeponla.jpg"  width="40" height="25"></h2> 
          
            <input type="radio" name="mascota" id="Hipodoge"/>
            <label for="Hipodoge">Hipodoge</label> <br>
            <img src="img/Hipodoge.jpg" width="130" height="100"> <br>

            <input type="radio" name="mascota" id="Capipepo"/>
            <label for="Capipepo">Capipepo</label> <br>
            <img src="img/Capipeo.jpg" width="130" height="100"> <br>

            <input type="radio" name="mascota" id="Ratigueya"/>
            <label for="Ratigueya">Ratigueya</label> <br>
            <img src="img/Ratigueya.jpg" width="130" height="100"> <br>
            
            <button>Seleccionar</button>
        </section>

        <section id="Seleccionar-Ataque">
            <h2>Elige tu Ataque:</h2>

            <p>Tu Mascota tiene <span>3</span> vidas</p>
            <p>Las mascotas del enemigo tiene <span>3</span> vidas</p>
            
            <p>
                <button>Fuego 🔥</button>
                <button>Agua 💧</button>
                <button>Tierra 🌱</button>
            </p>
    </section>

    <section id="Mensajes">
        <p>Tu Mascota ataco con FUEGO🔥, La mascota del enemigo ataco con TIERRA🌱 - GANASTE🎉</p>
    </section>  

    <section id="Reiniciar">
        <button> Reiniciar</button>
    </section>

    </body>
</html>

yo le cambie el nombre de las mascotas

Quiero confesar que cuando se fue Freddy me entristeci bastante por que lo amo a Freddy, pero las clases de Juan realmente no solo me dejan satisfecho sino que me di cuenta que me gusta mas que Freddy (espero que no lo lea jaja). Gracias juan, el Paul Atreides latino te queremos! ❤

Amo que Timothée me explique todo detallado y siendo amigable, eso me da más motivación para seguir este curso.

La mayoría de las pantallas de las calculadoras pueden mostrar hasta 10 dígitos. Por lo tanto, para números mayores a 1,000,000,000, las calculadoras incorporan el símbolo E, el cual proviene de notaciones científicas. Esto le permite a las calculadoras indicar valores muy largos.

E representa 10 a un cierto exponente. Por ejemplo, 5.23 E significa 5.23 x 10^4. Esto es un resumen para escribir 52,300.
Al usar E, la calculadora puede mostrar tanto números muy largos o muy pequeños. Por ejemplo, 5.1 E -4 significa 5.1 x 10^ -4, lo cual equivale a 0.00051. Cuando hay muchos ceros, como para 0.0000000000000000001, lo cual la calculadora no puede mostrar, la E ayuda a acortarlo a una forma que se pueda leer.

He visto en bootcamps que lo utlizan de la siguiente manera: <label>Mokipon<input type=“radio”/></label>.
Hay alguna diferencia?, estaría bien utilizar cualquiera de las dos formas?

La letra “e” es una forma abreviada de notación científica, la cual expresa un exponente de 10, es decir que si se quiere expresar un numero de 25 billones se representaría así 2.5E

  • Like por Hermenegildo si entiendes la referencia xd :3
    .

Muy buen profesor Juan, me siento super integrado a la clase, como si fuera presencial, excelente.

Le cambie los nombres a las mascotas 😅
Piplup -> Agua
Sandile -> Tierra
Litten -> Fuego
Volcanion -> Agua y Fuego
Swampter -> Tierra y Agua
Heatmor -> Fuego y Tierra

mi infancia Mokepon no podia dejarlo asi 😁

Genial,nunca habia usado for en una etiqueta label, hasta ahora me doycuenta que es una forma de usarlas

Gracias Juan David, me sirvió mucho esta clase para entender mejor las etiquetas en html, estoy tratando de construir un proyecto desde cero por mi misma y me costaba muchísimo la maquetación, la creación de las secciones y mas aun los tipos de input. Todos los días uno aprende algo nuevo, por eso Nunca pares de aprender.

La ‘e’ hace referencia al número de Euler

Otros tipos de input…

Los nombres de los Mokepones están algo difíciles de pronunciar jaja

Mi aporte de la clase lo hice con imagenes de las mascotas de marvel jajaja

La e SIgnifica “exponencial” es decir, que ese número se multiplica por sí mismo cuantas veces indique a la derecha.

for “”

Nos ayuda a vincular un <label> con un <input>

De verdad, el profesor Juan es muy dinámico.

jajaja se veo feo… un poquito, un circulito chiquiticoooo, no le atinan, 😂 me cayó muy bien este profe!

Aunque no es una cuestión académica, noto que con este profesor cambiaron el fondo utilizado en el lugar de grabación y se me hace mas agradable a la vista que el que usaron con Freddy; uso Platzi en “modo oscuro” y me molesto que cuando apareciera Freddy en las clases anteriores el fondo fuera blanco, contrasta demasiado con el “modo oscuro” que uso normalmente en la plataforma.

Vamos a hacerlo bonito, les dejo un link de un generador de fakemons, se generan por AI, así pueden echar a volar su imaginación mientras crean su juego

Link de generador: https://nokemon.eloie.tech/

<input type="radio" /> funciona en conjunto ↓

<input type="radio" name="mascota" /> 
<input type="radio" name="mascota"/> 
<input type="radio" name="mascota"/>
<input type="radio" name="ataque"/>

//la ultima linea, solo seleccionará y no se podrá quitar la selección,  ya que no pertenece al mismo grupo

Se agregará un <label><label/> por cada <input><input/> para que cada bolita de selección corresponda a cada mascota.

<label>Hipodoge</label>
<input type="radio" name="mascota" id="Hipodogue"/>

<label>Capipepo</label>
<input type="radio" name="mascota" id="Capipepo"/> 

<lable>Ratigueya</lable>
<input type="radio" name="mascota" id="Ratigueya"/>

Se va a agregar el atributo for dentro de <label><label/> que ayudará a vincular un input con un label , para que al momento de seleccionar se haga haciendo click en la palabra o en la bolita, El for debe tener el mismo nombre del id del input

<label for="Hipodogue">Hipodogue</label>
<input type="radio" name="mascota" id="Hipodogue"/>

<label for="Capipepo">Capipepo</label>
<input type="radio" name="mascota" id="Capipepo"/> 

<label for="Ratigueya" >Ratigueya</lable>
<input type="radio" name="mascota" id="Ratigueya"/>

.

El número e es un número irracional trascendente, es decir, es un número que no puede ser expresado como una fracción que no es raíz de ningún polinomio (no nulo) con coeficientes enteros (o racionales) y por tanto no pueden expresarse mediante radicales

Yo no estoy haciendo el juego como tal de mokepon, si no que estoy creando mi propia version siguiendo las instrucciones, siento que asi puedo desarrollar mi propia creatividad, y tambien mejorar muchas partes logicas al momento de programar ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-08-08%20165925-444ce2d5-b0c5-4bc9-b693-8f55d892ba7f.jpg)
La letra "e" que aparece en una calculadora generalmente representa el número **"e"** (aproximadamente 2.71828), que es una constante matemática conocida como la **base del logaritmo natural**. Este número tiene una gran importancia en matemáticas, especialmente en cálculos relacionados con el crecimiento exponencial, logaritmos naturales, y ciertas ecuaciones diferenciales. Cuando aparece la "e" en una calculadora, puede ser en dos formas principales: 1. **En notación científica**: Si el resultado de una operación es muy grande o muy pequeño, la calculadora usa la notación científica. Por ejemplo, un número como **5.0 × 10^8** podría mostrarse como **5e8**. En este caso, la "e" significa "por diez elevado a", lo que es una manera compacta de escribir números grandes o pequeños. * Ejemplo: 5e3 significa 5×103=50005 \times 10^3 = 5000. 2. **Como parte de un cálculo exponencial**: Si estás trabajando con funciones que involucran el número **e** (como exe^x, logaritmos naturales, o funciones exponenciales), entonces la "e" puede aparecer directamente en el cálculo. Por ejemplo, si tienes una operación como e2e^{2}, la calculadora puede mostrar "e" como parte del resultado. * Ejemplo: Si calculas e2e^2, el resultado será aproximadamente **7.3891**. Entonces, si ves la "e" en una calculadora, puede significar que estás utilizando la notación científica o que estás trabajando con funciones que involucran el número "e", que es esencial en muchos campos de las ciencias.
yo puse una mascota perzonalizda que es charizard

Mis notas

Input

Esta etiqueta le permite al usuario ingresar informacion y segun el atributo type podemos hacer uso de diferentes valores, como checkbox, radio, text(por defecto), number, password.

<input type="radio" name="name" id="nombre-id" />

El usar radio debemos indicarle a html a que grupo pertenece, ya que en una web pueden haber muchos inputs, entonces html nos pide que los encapsulemos en grupos, de lo contrario se seleccionaran todos y no uno a la vez, esto lo hago dandole el mismo name a todos los inputs que pertenezcan a ese grupo.

⚠️ Nota: Esta etiqueta no se cierra con otra etiqueta de cierre, pero es una buena practica cerrarla con un /

Label

Representa una etiqueta que puede estar asociada al elemento de control, en este caso es input, lo utilizaremos en caso no puedan presionar el circulo de radio pueden seleccionar el label.

<label for="nombre-id">Nombre</label>

Input + label

Con el atributo for

<label for="hipodogue">Hipodogue</label>
<input type="radio" name="mascota" id="hipodogue" />

Para enlazar el input con el label, el valor de for tiene que ser el id que colocamos en el input.

Mas simple uniendo los dos

<label>Hipodogue <input  type="radio" name="nombre" id="nombre-id"/> </label>

Aqui englobo tanto el label con el input

para los que no saben como ordenar su código instalen la extensión Prettier en YouTube hay videos para configurarlo

La mayoría de las pantallas de las calculadoras pueden mostrar hasta 10 dígitos. Por lo tanto, para números mayores a 1,000,000,000, las calculadoras incorporan el símbolo E, el cual proviene de notaciones científicas. Esto le permite a las calculadoras indicar valores muy largos.

Fuente: Geniolandia

  • label representa un título para un elemento de una interfaz de usuario.
  • El atributo for nos ayuda un label con un input.
    😎

La mayoría de las pantallas de las calculadoras pueden mostrar hasta 10 dígitos. Por lo tanto, para números mayores a 1,000,000,000, las calculadoras incorporan el símbolo E, el cual proviene de notaciones científicas. Esto le permite a las calculadoras indicar valores muy largos.

Estoy muy emocionada por la clase, muchas gracias

La “e” es de exponente, pero cuidado no en base natural (e = 2.718 28…) si no en base 10, i. e., el número al cual va elevado 10.

En lenguajes como fortran hay “varias formas de poner este exponente”, dependiendo de la precision. E es para single precision (float 32, KIND=4), D es para double precision (float 64, KIND=8) y Q para quadruple precision (float 132, KIND=16). Se suelen poner incluso con exponente 0 para poner de forma explicita la precisión.

REAL             :: y
DOUBLE PRECISION :: x
REAL (KIND=16)   :: h
x = 1.d0
y = 0.E0
h = 6.62607015q-34

Si quieren copiar y pegar rapido solo deben oprimir Shift + alt +

la flecha de la dirección a donde quieres pegar el código.

La tarea del profe.

La e representa 10 a un cierto exponente. Por ejemplo, 5.23 E significa 5.23 x 10^4. Esto es un resumen para escribir 52,300.

Es una forma de acortar los numeros a cierto exponente cuando son operaciones muy largas.

La e significa un exponente y en la calculadora aparece por que el numero es muy grande y no puede ser expresado de otra manera.

**++

La e hace referencia a los numeros irracionales
e = Leonhard Euler >

++**

Significa de la “e” = Euler🔢

E representa 10 a un cierto exponente. Por ejemplo, 5.23 E significa 5.23 x 10^4. Esto es un resumen para escribir 52,300.

<section id = "Seleccionar-mascota">
            <h2>Elige tu mascota</h2>
            
            <label for = "Hipodoge">Hipodoge</label>
            <input type = "radio" name = "mascota" id = "Hipodoge"/>
            <br/>
            <label for = "Capipepo">Capipepo</label>
            <input type = "radio" name = "mascota" id = "Capipepo"/>
            <br/>
            <label for = "Ratiqueya">Ratiqueya</label>
            <input type = "radio" name = "mascota" id = "Ratiqueya"/>
            <br/>
            <label for = "Langostelvis">Langostelvis</label>
            <input type = "radio" name = "mascota" id = "Langostelvis"/>
            <br/>
            <label for = "Tucapalma">Tucapalma</label>
            <input type = "radio" name = "mascota" id = "Tucapalma"/>
            <br/>
            <label for = "Pydos">Pydos</label>
            <input type = "radio" name = "mascota" id = "Pydos"/>
            <br/>

La e es de logaritmo natural que tiene un valor determinado 😃

e es uno de los números irracionales y los números trascendentes más importantes.1​ Es aproximadamente 2,71828 2​y aparece en diversas ramas de las matemáticas, al ser la base de los logaritmos naturales y formar parte de las ecuaciones del interés compuesto y otros muchos problemas.

-<label> </label>

Nos ayuda a que podamos darle un indicador a los usuarios de que sepan que estan seleccionando.

El volumen bajo es de origen, no tienen que ajustar sus audifonos/bocinas

La etiqueta ( HIDDEN ) se utiliza para incluir datos ocultos en un formulario web. Estos datos no son visibles ni modificables por el usuario, pero se envían al servidor cuando se envía el formulario BSA........
aun con 12 años ando aprendiendo sobre este tema muy interesante no paremos de aprender y conocer mas sorbe la programacion
Para integrar JavaScript en HTML, utiliza la etiqueta `<script>` dentro del documento HTML. Puedes colocarla en el `<head>` o justo antes de cerrar el `<body>`. Si tu código JavaScript está en un archivo externo, usa el atributo `src` para especificar la ruta del archivo. Por ejemplo: ```html <script src="./js/mokepon.js"></script> ``` Esto vincula el archivo `mokepon.js` que contiene tu código JavaScript. Recuerda que si lo colocas en el `<head>`, asegúrate de que el script no intente acceder a elementos HTML que aún no se han cargado. Para evitar problemas, es recomendable colocar el script al final del `<body>`.
Explicación al reto de la clase: ¿Qué significa la letra E en las calculadoras? * Se utiliza para indicar valores muy largos ya que, la mayoría de las pantallas de las calculadoras pueden mostrar hasta 10 dígitos. Por lo que para números mayores a 1,000,000,000 las calculadoras incorporan el símbolo E, el cual proviene de notaciones científicas. El significado de E es "10 a un cierto número de exponente. * Al presionar la tecla "E" en la calculadora seguida de un número, se realiza una operación matemática que involucra el número de Euler. * La E también se utiliza para mostrar números muy pequeños.
holaaaaaaaaaaaaaa

ya cree mis propias mascotas, y sus nombres son:
quarushum (agua)
talearth (tierra)
handypyro?? (fuego)
medupydro (agua y fuego)
whalearth (agua y tierra)
rapyrth (fuego y tierra)
muchas gracias por esta clase, ha sido muy divertido
nunca paremos de aprender 👍👍!!!

Me parece que este profe es un genio!! tiene tantas ideas y conocimientos que se le desbordan por todas partes🤣🤣

Me he tomado algunas libertades en los nombres 😃

Poniendo al final de cada renglón </br> se muestra un salto de página que da un aspecto más prolijo

La e significa notación cientifica es decir que el numero antes de la e se multiplica por 10 con exponente igual al numero que hay despues de la e. Soy profe de matemáticas, diseñador y programador web, me gusta mucho el curso, lo estoy haciendo completo y me parece muy bien estructurado, me gusta mucho platzi.

si no te sale el circulo, probablemente escribiste IMPUT, en vez de INPUT__

la “e” es el exponente se utiliza para simplificar numeros ya que la calculadoras tienes un una pantalla limitada

Yo avanzo con el juego con una version de Avatar la leyenda de aang

Para que se vaya viendo más estético lo centre todo.

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8"/>
        <title>Batalla Avatar</title>
    </head>
    <body id="contenido"; style="width: 800px; margin:auto">
        <header id="Encabezado-del-juego">
            <h1><center>Batalla Avatar 🔥💧🌄</center></h1>
        </header>
        <section id="Escoger-personaje">
            <center>
            <h2>Escoge a tu personaje</h2>
            <img id="foto-katara" src="katara.png" height="100">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <img id="foto-zuko" src="zuko.png" height="100">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <img for="foto-toph" src="toph.png" height="100"><br>
            <input type="radio" id="katara" name="personaje"><label for="katara">Katara 🌊</label>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <input type="radio" id="zuko" name="personaje"><label for="zuko">Zuko 🔥</label>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <input type="radio" id="toph" name="personaje"><label for="toph">Toph 🌄</label><br><br>
            <button>Seleccionar</button>
            </center>
        </section>
        
        <seection id="Escoger-ataque">
            <h2>Escoge tu ataque</h2>
            <p>
                Tu oponente será <span>zuko</span> 
            </p>
            <p>
                <span>Tu oponente</span> tiene <span>3</span> vidas
            </p>
            <p>
                Te quedan <span>3</span> vidas
            </p>
            <p>
                <button> Agua 🌊 </button>
                <button> Fuego 🔥 </button>
                <button> Tierra 🌄 </button>
            </p>
        </section>
        <section id="batalla">
            <h2>Batalla</h2>
            <p> Atacaste con fuego y <span>tu oponente</span> con agua - GANASTE ESTA PARTIDA<p>
        </section>
        <section>
            <button> Reiniciar juego </button>
        </section>
    </body>
</html> 

Yo use lista para ordenar la selección múltiple para seleccionar mascota…creo que es más ordenado que agregar <br>

Bueno lo que yo en medio de mi curiosidad hice, fue una lista desplegable, una vez se seleccionara una mascota esto debería mostrar la imagen:

 <section id="seleccionar-mascota">
        <p>
      <h2>Selecciona una mascota:</h2>
      <select id="mascotas" onchange="cambiarImagen()">
        <option value="gallo" selected >Gallo</option>
        <option value="perro">Perro</option>
        <option value="caballo">Caballo</option>
        <option value="cocodrilo">Cocodrilo</option>
      </select>
      <img id="imagen-mascota" class="imagen-mascota" src="" alt="">
    <!-- Botón selección. -->
      <button id ="seleccion">Seleccionar</button>
       </p>
    </section>

--Esta parte fue el js--
function cambiarImagen() {
    let select = document.getElementById("mascotas");
    let imagen = document.getElementById("imagen-mascota");
    let valor = select.value;
    
    switch(valor) {
      case "gallo":
        imagen.src = "img/gallo.jpg";
        break;
      case "perro":
        imagen.src = "img/perro.jpg";
        break;
      case "caballo":
        imagen.src = "img/caballo.jpg";
        break;
      case "cocodrilo":
        imagen.src = "img/cocodrilo.jpg";
        break;
      default:
        imagen.src = "";
    }
  }
  
--Este el CSS--
.imagen-mascota {
    width: 200px;
    height: 200px;
    border-radius: 4%;
  }

  img[src=""] {
    display: none;
  }
  

PD:El número “E” que aparece en las calculadoras se refiere a la notación científica, que se utiliza para expresar números muy grandes o muy pequeños de una manera más concisa. En esta notación, un número se escribe en la forma “a x 10^b”, donde “a” es un número entre 1 y 10 (llamado mantisa) y “b” es un número entero que indica la potencia de 10. Por ejemplo, el número 3,000,000 se puede escribir como 3 x 10^6 en notación científica.

Cuando se utiliza una calculadora científica, si el resultado de una operación es un número muy grande o muy pequeño, la calculadora puede mostrar el resultado en notación científica para que sea más fácil de leer y manejar. En lugar de escribir el número completo, la calculadora muestra la mantisa seguida de la letra “E” y el exponente. Por ejemplo, si la calculadora muestra el número “3.2E7”, esto significa 3.2 x 10^7, o sea, 32,000,000.

Yo le coloque nombre no tan trabalenguas

Input en Html

Input significa entrada, en programación y desarrollo es la manera como un usuario que esta interactuando con un programa que desarrollamos ingresa datos al sistema para cumplir algún propósito, en este caso, elegir el Mokemon, en HTML, input es una etiqueta que cuenta con distintos atributos, cada uno diferente, pero el más usado es type, y identifica que tipo de entrada va a realizar el usuario por ejemplo:

<input type="text">//Este type recibe texto (string)
<input type="number">// Esta recibe números y ya
<input type="radio">//Esta permite elegir UNA sola opción de varias
<input type="checkbox">// Esta permite elegir varias opciones.

El número “e” es un número irracional trascendente, es decir, es un número que no puede ser expresado como una fracción que no es raíz de ningún polinomio con coeficientes enteros (o racionales) y por tanto no pueden expresarse mediante radicales

esto fue lo que encontre, pero la verdad no tengo idea XD

hay que recalcar que no todas las etiquetas tienen los mismos atributos, según encontré el atributo Id es global , es decir es un atributo que puede usarse en todos los elementos HTML, pero hay otros atributos que no pueden usarse para todos.

exponencial

La e aparece porque es la constante de Euler

me encanta la energía que este profe le pone a la clase !!! gracias

Comparto mi codigo… espero ayude…

El profe me da la energía que necesito para nunca parar de aprender y me da una clase súper divertida Gracias Juan David!!

la e es un numero irracional listo reto cumplido

la letra en el contexto de los numero es exponecial ejemplo 1.8e^6 eso es igual a 1’800.000 y tambien es el nnunmero de euler que es la funcion exponencial

Me fui en orden alfabético para ver qué aparecía y salieron estas 23 opciones:
<input type=“text”/>
<input type=“number”/>
<input type=“password”/>
<input type=“radio”/>
<input type=“checkbox”/>
<input type=“button”/>
<input type=“color”/>
<input type=“email”/>
<input type=“date”/>
<input type=“datetime”/>
<input type=“datetime-local”/>
<input type=“file”/>
<input type=“hidden”/>
<input type=“image”/>
<input type=“month”/>
<input type=“range”/>
<input type=“reset”/>
<input type=“search”/>
<input type=“submit”/>
<input type=“time”/>
<input type=“tel”/>
<input type=“url”/>
<input type=“week”/>

una funcion son pedasos de codigo que mientras lo escribas por un propocito general y puedes usarlos muchas veces

Me encanta la forma de dar la clase de este profesor, excelente, jamás me aburrí y jamás se me hizo dificil, explica como si fuera un niño de 5 años!

ESTE PROFE ESTA LOCO SON UNOS GENIOS QUE GUSTO APRENDER ASI

El número e es un número utilizado para expresar el limite de una inversión con 1 UM o unidad monetaria, es el maximo valor que se puede alcanzar al dividir el interés por el tiempo, si me equivoco en algo no duden en corregirme, eso es lo que entendí de mi investigación!

Hay muchos tipos de <input type=" ">

<input type=“radio” el que usamos en esta clase

otros:
<input type=“text”>
<input type=“number”>
<input type=“time”>
<input type=“date”>
<input type=“checkbox”>

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8"/>
        <title>MOKEPON! 🔥💧🌱</title>
        <script src = "./js/mokepon.js"></script>
    </head>
    <body>
        <h1>MOKEPON ! 🔥💧🌱</h1>

        <section id = "seleccionar-mascota">
            <h2>Elige tu mascota:</h2>

            <label for = "hipodoge">Hipodoge</label>
            <input type = "radio" name = "mascota" id = "hipodoge"/>

            <label for = "capipepo">Capipepo</label>
            <input type = "radio" name = "mascota" id = "capipepo"/>

            <label for = "ratiqueya">Ratiqueya</label>
            <input type = "radio" name = "mascota" id = "ratiqueya"/>
            
            <!--Hipodoge -> Agua
            Capipepo -> Tierra
            Ratiqueya -> Fuego
            Langostelvis -> Agua y Fuego
            Tucapalma -> Agua y Tierra
            Pydos -> Tierra y Fuego-->

            <button>Seleccionar</button>
        </section>

        <section id = "seleccionar-ataque">
            <h2>Elige tu ataque:</h2>

            <p>Tu mascota tiene <span>3</span> vidas</p>
            <p>Las mascotas del enemigo tiene <span>3</span> vidas</p>

            <p>
                <button>Fuego 🔥</button>
                <button>Agua 💧</button>
                <button>Tierra 🌱</button>
            </p>  

        </section>

        <section id = "mensajes">
            <p>Tu mascota atacó con FUEGO, las mascota del enemigo atacó con TIERRA - GANASTE 🎉🎉</p>
        </section>

        <section id = "reiniciar">
            <button>Reiniciar</button>
        </section>
              
    </body>
</html>

El número e es un número irracional trascendente, es decir, es un número que no puede ser expresado como una fracción que no es raíz de ningún polinomio (no nulo) con coeficientes enteros (o racionales) y por tanto no pueden expresarse mediante radicales

En esta clase si sentí como demasiada información para procesar.

📌 La etiqueta label complementa a la etiqueta input para darle una especie de “nombre”

e significa de exponecial o tambien puede ser el numero o cosntante e.
Jejejeje

La e es de exponencial.

Código de la clase

<section id="selectPet">
        <h2>Elige a tu mascota:</h2

        <label for="hipodoge">Hipodoge</label>
        <input id="hipodoge" type="radio" name="mascota">

        <label for="capipepo">Capipepo</label>
        <input id="capipepo" type="radio" name="mascota">

        <label for="ratigueya">Ratigueya</label>
        <input id="ratigueya" type="radio" name="mascota">

        <!--
            Hipodoge -> Agua
            Capipepo -> Tierra
            Ratigueya -> Fuego
            Langostelvis -> Agua y Fuego
            Tucapalma -> Agua y Tierra
            Pydos -> Tierra y Fuego
        -->


        <button>Seleccionar</button>
    </section>