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

Secci贸n de elegir mascota

17/84
Recursos

Aportes 244

Preguntas 50

Ordenar por:

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

o inicia sesi贸n.

Algunos ejemplo etiqueta Input Html

2022 = Mokepon 馃挌
2016 = Pakiman 馃挌馃挌馃挌

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.

Significado de 鈥渆鈥:
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 鈥済rupo 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 鈥渆l 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>

Si algo les falla o no les queda bien les dejo un excelente recurso donde pueden validar su HTML.

validador de HTML

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: 猸愨瓙猸愨瓙猸愨瓙猸愨瓙猸

Falt贸 el legendario PIKACHO, s贸lo los verdaderos Platzinautas recordar谩n.

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)

Me imagino como habr谩 sido la reuni贸n donde tenian que elegir los nombres JAJAJAJAJA

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


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

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.

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

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.

La letra 鈥渆鈥 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 鈥榚鈥 hace referencia al n煤mero de Euler

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 鈥渆xponencial鈥 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>

Otros tipos de input鈥

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 鈥渕odo oscuro鈥 y me molesto que cuando apareciera Freddy en las clases anteriores el fondo fuera blanco, contrasta demasiado con el 鈥渕odo 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

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

Otra forma de compaginar la etiqueta label con input es incrustando este 煤ltimo dentro del primero, de esta forma no hace falta utilizar el atributo for.
C贸digo de ejemplo:

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

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

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 verdad no sab铆a la funci贸n de FOR en label buen aporte

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 鈥渆鈥 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 鈥渧arias 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 鈥渆鈥 = 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鈥媦 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

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 鈥渆鈥 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鈥reo 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 鈥淓鈥 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 鈥渁 x 10^b鈥, donde 鈥渁鈥 es un n煤mero entre 1 y 10 (llamado mantisa) y 鈥渂鈥 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 鈥淓鈥 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 鈥渆鈥 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=鈥渢ext鈥/>
<input type=鈥渘umber鈥/>
<input type=鈥減assword鈥/>
<input type=鈥渞adio鈥/>
<input type=鈥渃heckbox鈥/>
<input type=鈥渂utton鈥/>
<input type=鈥渃olor鈥/>
<input type=鈥渆mail鈥/>
<input type=鈥渄ate鈥/>
<input type=鈥渄atetime鈥/>
<input type=鈥渄atetime-local鈥/>
<input type=鈥渇ile鈥/>
<input type=鈥渉idden鈥/>
<input type=鈥渋mage鈥/>
<input type=鈥渕onth鈥/>
<input type=鈥渞ange鈥/>
<input type=鈥渞eset鈥/>
<input type=鈥渟earch鈥/>
<input type=鈥渟ubmit鈥/>
<input type=鈥渢ime鈥/>
<input type=鈥渢el鈥/>
<input type=鈥渦rl鈥/>
<input type=鈥渨eek鈥/>

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

En una fiesta de n煤meros irracionales, el n煤mero e est谩 apartado en un rinc贸n sin participar. Se acerca 蟺 y le dice:

  • Oye, t铆o 驴por qu茅 no te integras?
  • 驴Para qu茅? Si me voy a quedar igual

馃ぃ馃ぃ

https://youtu.be/Z5czpA-fyMU

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=鈥渞adio鈥 el que usamos en esta clase

otros:
<input type=鈥渢ext鈥>
<input type=鈥渘umber鈥>
<input type=鈥渢ime鈥>
<input type=鈥渄ate鈥>
<input type=鈥渃heckbox鈥>

<!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 鈥渘ombre鈥

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 馃憤馃憤!!!

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>

me cae bien el nuevo profe uvu

La letra e sirve para abreviar numero grandes o numeros muy peque帽os

tutorial: como ser demandado

prof