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.
Fundamentos de Programación
Bienvenida a Platzi: ¿qué necesitas para tomar el curso?
Programación en Navegadores: Primeros Pasos
Crea tu primer sitio web
Sitios web con HTML
Estructura de árbol en HTML
Instalando tu primer editor de código
Cómo declarar variables y usar prompt
Algoritmo de piedra, papel o tijera
Algoritmo avanzado de piedra, papel o tijera
Aleatoriedad
Refactor del código usando funciones
Ciclos
Gana 3 veces
Archivos de HTML y JavaScript
¿Qué es el DOM?
Quiz: Fundamentos de Programación
Desarrollando un juego con HTML y JavaScript
Maquetación con HTML
Sección de elegir mascota
¿Dónde ubicar la etiqueta script? Conectando HTML con JavaScript
Escuchando eventos con JavaScript
addEventListener
Manipulación del DOM
Enemigos aleatorios
Ataques en JavaScript
Ataques aleatorios del enemigo
Imprimiendo ataques del enemigo
¿Ganaste, perdiste o empataste?
Tablas de verdad
Creando el contador de vidas
¿Quién ganó el juego?
Reiniciando el juego
Ocultando elementos HTML con JS para mejorar la UX del juego
Quiz: Desarrollando un juego con HTML y JavaScript
Estilos con CSS
Anatomía de CSS
Tipos de display
Flexbox
Modelo de caja
Imágenes para los Mokepones
Estilos del botón
Adaptando HTML al diseño del juego
Layout: título y ataques
Adaptando JavaScript al diseño del juego
CSS Grid
Responsive Design
Detalles finales
Quiz: Estilos con CSS
Optimización de código
Revisión de código
Don't repeat yourself (DRY)
Clases y objetos
Clases y objetos de Mokepon
Arrays o arreglos
Objetos vs. arreglos
Ciclos: manipulando el DOM con iteradores
Declaración lenta de variables
Una sola fuente de la verdad
Mascotas aleatorias con arreglos
Ataques dinámicos por cada mascota: extraer
Renderizado dinámico en HTML
Eventos de click dinámicos
Secuencia de ataques del enemigo
Iniciando el combate
Resolviendo el reto de condicionales
Optimizando el frontend del juego
Quiz: Optimización de código
Mapa con canvas
Introducción a canvas: dibujando con JavaScript
Moviendo a Capipepo hacia la derecha
Movimiento hacia todas las direcciones
Movimientos con el teclado
Imágenes y personajes de fondo
Métodos en las clases
Obstáculos y colisiones
Combate entre mokepones colisionados
Mapa responsive
Botones bonitos y viewport
Quiz: Mapa con canvas
Backend: videojuego multijugador
¿Qué es backend?
Instalación de Node.js y NPM
Terminal de comandos y Node.js
Servidor web con Express.js
HTTP, localhost, servidores y puertos
Express.js y fetch: API REST con JavaScript
JSON y POST: mokepon online
Transmisión de coordenadas
Mokepones dinámicos en el mapa
Optimizando el mapa del juego
Batalla entre jugadores
Consumiendo la API de ataques del enemigo
Quiz: Backend: videojuego multijugador
Próximos pasos
Probando el juego en varios dispositivos
¿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
Paga en 4 cuotas sin intereses
Termina en:
Juan David Castro Gallego
Aportes 275
Preguntas 51
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>
<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>
<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>
<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>
<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>
</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>
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.
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
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
Mis notas
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 /
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>
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
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 2y 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
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 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">      
<img id="foto-zuko" src="zuko.png" height="100">      
<img for="foto-toph" src="toph.png" height="100"><br>
<input type="radio" id="katara" name="personaje"><label for="katara">Katara 🌊</label>      
<input type="radio" id="zuko" name="personaje"><label for="zuko">Zuko 🔥</label>      
<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 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>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?