1. ¿Cuál es mayor? 👵
💡 Introducción 💡
Este desafío consiste en construir un juego en el que el usuario debe seleccionar el mayor entre dos números generados aleatoriamente: ¡Aquí puedes encontrar el demo!
¿Estás lista?
Por supuesto que estás lista, desde el día en que naciste 😝
Paso 1: Crear el título ⭐️
Lo primero que haremos será construir los títulos y los botones. Para ello simplemente iremos al archivo app.component.html y empezaremos reemplazando su contenido con el siguiente código:
<h1>¿Cuál es mayor? 🙌</h1>Deberías ver algo así: 👇
Paso 2: Agregar los botones 💻
Ahora vamos agregar los botones. Para hacerlo vamos a usar la etiqueta <button>:
<h1>¿Cuál es mayor? 🙌</h1>
<button>7</button>
<button>9</button>Deberías ver algo así: 👇
Paso 3: Agregar el score 🏁
¡Esta es tu oportunidad de brillar! Ayúdanos agregando el título de Score utilizando la etiqueta <h1>. Cuando lo hagas, debería verse así: 👇
Paso 4: Agregar los estilos 💅
Nuestra interfaz luce bien, pero podría lucir mejor 😏. Vamos a agregar un poco de CSS para darle color a nuestro videojuego. Reemplaza el contenido de app.component.css con éste:
* {
font-family: Lato;
}
button {
background: hotpink;
border: 3px solid black;
border-radius: 4rem;
font-size: 3rem;
width: 5rem;
box-shadow: 2px 2px 10px 0px gray;
margin: 1rem;
outline: none;
cursor: pointer;
transition: box-shadown 2s;
}
button:hover {
background: #ff409f;
}
button:active {
box-shadow: inset 2px 2px 10px 0px black;
}Ahora nuestra aplicación debería verse mucho mejor: 👇
¡Ya casi terminamos! 👏
Paso 5: Generar los números 📱
¡Ahora es momento de pasar a la lógica! Nosotros utilizaremos TypeScript, que es lo mismo que JavaScript sólo que mejorado 🤝.
Lo primero que haremos es que definiremos las variables que vamos a usar en el archivo app.component.ts:
export class AppComponent {
leftNumber;
rightNumber;
score = '';
}El segundo paso es inicializar los números. Para ello debemos empezar creando una función que genere números de manera aleatoria. La llamaremos generateRandomNumber():
export class AppComponent {
leftNumber;
rightNumber;
score = '';
generateRandomNumber() {
const maxNumber = 10;
const randomDecimal = Math.random() * maxNumber;
const randomNumber = Math.round(randomDecimal);
return randomNumber;
}
}Échale un ojo por un momento. Analiza su funcionamiento. Trata de inferir cómo funciona 👆.
Listo? 😀
Ahora, para generar los números aleatorios basta con que los asignemos: 👇
export class AppComponent {
leftNumber;
rightNumber;
score = '';
generateNumbers() {
this.leftNumber = this.generateRandomNumber();
this.rightNumber = this.generateRandomNumber();
}
generateRandomNumber() {
const maxNumber = 10;
const randomDecimal = Math.random() * maxNumber;
const randomNumber = Math.round(randomDecimal);
return randomNumber;
}
}Como habrás notado simplemente creamos la función generateNumbers() que se encarga de llamar la función que creamos para cada número. 👍
Para que el código funcione debemos asegurarnos de llamar a la función que acabamos de crear. Para ello podemos usar el constructor: 👇
export class AppComponent {
leftNumber;
rightNumber;
score = '';
constructor() {
this.generateNumbers();
}
generateNumbers() {
this.leftNumber = this.generateRandomNumber();
this.rightNumber = this.generateRandomNumber();
}
generateRandomNumber() {
const maxNumber = 10;
const randomDecimal = Math.random() * maxNumber;
const randomNumber = Math.round(randomDecimal);
return randomNumber;
}
}¡Eso es todo! Sólo hace falta mostrar los números, que es el paso más sencillo. Abre el archivo app.component.html y reemplaza su contenido así: 👇
<h1>¿Cuál es mayor? 🙌</h1>
<button>{{leftNumber}}</button>
<button>{{rightNumber}}</button>
<h1>Score</h1>¡Cada vez que recargues el navegador verás números generados de manera aleatoria! 🎉🎉🎉
Paso 6: No repetir números 🖐
¡Parece ser que en algunas ocasiones los números se repiten! Debemos evitar esto (porque de otro modo no podríamos jugar el juego 😝).
Cuando ambos números generados aleatoriamente sean iguales vamos a volver a llamar a la función 👇
...
generateNumbers() {
this.leftNumber = this.generateRandomNumber();
this.rightNumber = this.generateRandomNumber();
if (this.leftNumber === this.rightNumber) {
this.generateNumbers();
}
}
...Fácil verdad? 😊
Paso 7: Comparemos! 👽
¡Es momento de comparar qué número es mayor! Lo cual es muy sencillo. Para esto necesitamos una función que:
Compare los dos números
Actualice el Score respectivamente
Genere números nuevos
Para hacerlo simplemente basta con ir al archivo app.component.ts y agregar la siguiente función:
...
isGreater(firstValue, secondValue) {
if (firstValue > secondValue) {
this.score = this.score + '😁';
} else {
this.score = this.score + '❌';
}
this.generateNumbers();
}
...Analiza el código de arriba. Trata de interpretarlo. ¿Lo comprendes? 😉
Estamos a punto de acabar. Sólo nos basta con hacer los que botones llamen la función que acabamos de crear cada vez que sean oprimidos. 💪
Para hacerlo vamos a ir a app.component.html y vamos a reemplazar el siguiente código:
<h1>¿Cuál es mayor? 🙌</h1>
<button (click)="isGreater(leftNumber, rightNumber)">{{leftNumber}}</button>
<button (click)="isGreater(rightNumber, leftNumber)">{{rightNumber}}</button>
<h1>Score:</h1>Analiza el código. ¿Parece coherente? 👆
¡Revisa tu aplicación!
Cada vez que hagas click en un botón debería generar nuevos números aleatorios. 📱
😎 Tu Misión 😎
Parece que nuestra aplicación está lista excepto por un pequeño detalle 😵. Parece que no está mostrando el Score.
⭐️ Utiliza String Interpolation para mostrar el Score. Usa la etiqueta <h2> ⭐️
¡Cuando lo hayas hecho, habrás terminado el primer desafío!
🎉 ¡LO LOGRASTE! 🎉
Has completado el desafío #2, ahora vamos a el desafío #3 👇
Last updated
Was this helpful?