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:
app.component.html
1
<h1>¿Cuál es mayor? 🙌</h1>
Copied!
Deberías ver algo así: 👇

Paso 2: Agregar los botones 💻

Ahora vamos agregar los botones. Para hacerlo vamos a usar la etiqueta <button>:
app.component.html
1
<h1>¿Cuál es mayor? 🙌</h1>
2
<button>7</button>
3
<button>9</button>
Copied!
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:
app.component.css
1
* {
2
font-family: Lato;
3
}
4
5
button {
6
background: hotpink;
7
border: 3px solid black;
8
border-radius: 4rem;
9
font-size: 3rem;
10
width: 5rem;
11
box-shadow: 2px 2px 10px 0px gray;
12
margin: 1rem;
13
outline: none;
14
cursor: pointer;
15
transition: box-shadown 2s;
16
}
17
18
button:hover {
19
background: #ff409f;
20
}
21
22
button:active {
23
box-shadow: inset 2px 2px 10px 0px black;
24
}
Copied!
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:
app.component.ts
1
export class AppComponent {
2
leftNumber;
3
rightNumber;
4
score = '';
5
}
Copied!
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():
app.component.ts
1
export class AppComponent {
2
leftNumber;
3
rightNumber;
4
score = '';
5
6
generateRandomNumber() {
7
const maxNumber = 10;
8
const randomDecimal = Math.random() * maxNumber;
9
const randomNumber = Math.round(randomDecimal);
10
return randomNumber;
11
}
12
}
Copied!
Échale un ojo por un momento. Analiza su funcionamiento. Trata de inferir cómo funciona 👆.
Listo? 😀
Por si tienes alguna duda. Aquí te explicamos cómo funciona: 👷‍♀️
1. Primero definimos una variable llamada maxNumber. Ésta almacenará el número más alto que deseamos generar al azar. Puedes cambiarlo por 100 o 1000. 👍
2. En segundo lugar generamos el número aleatorio utilizando la función Math.random(). Ésta es una función propia de JavaScript y lo que hace es devolvernos un valor aleatorio entre 0 y 1. Al multiplicarlo por 10 estamos generando un número al azar entre 0 y 10. 😉
3. El último paso es remover los decimales adicionales. Ya que de otro modo tendríamos números como 6.3 o 1.5. Para sólo basta con utilizar la función Math.round() que nos permite redondear números. ⭐️
Ahora, para generar los números aleatorios basta con que los asignemos: 👇
app.component.ts
1
export class AppComponent {
2
leftNumber;
3
rightNumber;
4
score = '';
5
6
generateNumbers() {
7
this.leftNumber = this.generateRandomNumber();
8
this.rightNumber = this.generateRandomNumber();
9
}
10
11
generateRandomNumber() {
12
const maxNumber = 10;
13
const randomDecimal = Math.random() * maxNumber;
14
const randomNumber = Math.round(randomDecimal);
15
return randomNumber;
16
}
17
}
Copied!
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: 👇
app.component.ts
1
export class AppComponent {
2
leftNumber;
3
rightNumber;
4
score = '';
5
6
constructor() {
7
this.generateNumbers();
8
}
9
10
generateNumbers() {
11
this.leftNumber = this.generateRandomNumber();
12
this.rightNumber = this.generateRandomNumber();
13
}
14
15
generateRandomNumber() {
16
const maxNumber = 10;
17
const randomDecimal = Math.random() * maxNumber;
18
const randomNumber = Math.round(randomDecimal);
19
return randomNumber;
20
}
21
}
Copied!
¡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í: 👇
app.component.html
1
<h1>¿Cuál es mayor? 🙌</h1>
2
<button>{{leftNumber}}</button>
3
<button>{{rightNumber}}</button>
4
<h1>Score</h1>
Copied!
Por si tienes alguna duda. Aquí te explicamos cómo funciona: 👷‍♀️
String Interpolation es la técnica a través de la cual mostramos los números en la vista (HTML). Para ello simplemente basta con tener las variables declaradas y utilizar las llaves para mostrarla así: {{ myVariable }}
¡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 👇
app.component.ts
1
...
2
generateNumbers() {
3
this.leftNumber = this.generateRandomNumber();
4
this.rightNumber = this.generateRandomNumber();
5
if (this.leftNumber === this.rightNumber) {
6
this.generateNumbers();
7
}
8
}
9
...
Copied!
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:
  1. 1.
    Compare los dos números
  2. 2.
    Actualice el Score respectivamente
  3. 3.
    Genere números nuevos
Para hacerlo simplemente basta con ir al archivo app.component.ts y agregar la siguiente función:
app.component.ts
1
...
2
isGreater(firstValue, secondValue) {
3
if (firstValue > secondValue) {
4
this.score = this.score + '😁';
5
} else {
6
this.score = this.score + '❌';
7
}
8
this.generateNumbers();
9
}
10
...
Copied!
Analiza el código de arriba. Trata de interpretarlo. ¿Lo comprendes? 😉
Por si tienes alguna duda. Aquí te explicamos cómo funciona: 👷‍♀️
1. Primero creamos una función que recibe dos números. Los números que vamos a comparar 👍
2. En segundo lugar hacemos la comparación. Dependiendo del resultado concatenamos los emojis respectivos (😉 o ❌).
3. El último paso es generar nuevos números aleatorios para continuar jugando. ⭐️
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:
app.component.html
1
<h1>¿Cuál es mayor? 🙌</h1>
2
3
<button (click)="isGreater(leftNumber, rightNumber)">{{leftNumber}}</button>
4
<button (click)="isGreater(rightNumber, leftNumber)">{{rightNumber}}</button>
5
6
<h1>Score:</h1>
Copied!
Analiza el código. ¿Parece coherente? 👆
Por si tienes alguna duda. Aquí te explicamos cómo funciona: 👷‍♀️
1. Primero que todo estamos utilizando una técnica llamada Event Binding. Ella nos permite agregar eventos a nuestra vista. En este caso utilizamos el evento de Click, pero pueden ser muchos tipos: (keyup), (change), (resize), etc 💻
2. Luego simplemente escribimos el método que deseamos llamar cuando el evento se ejecute. En este caso estamos llamando a la función isGreater() que creamos anteriormente.
3. Notarás que el primer botón pasamos leftNumber y luego rightNumber, pero en el segundo botón invertimos el orden. Esto es porque la función que creamos va a determinar si el primer parámetro que se le pasó es mayor que el segundo parámetro. ⭐️
¡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!
Aquí puedes encontrar el ejercicio resuelto.

🎉 ¡LO LOGRASTE! 🎉

Has completado el desafío #2, ahora vamos a el desafío #3 👇
Nota:
Si necesitas mentoría con este ejercicio puedes contactar a:
Juan Herrera Twitter: @jdjuan Correo: [email protected]
Last modified 2yr ago