💡 Introducción 💡

El desafío consiste en construir un juego, usando el súper Framework de Angular 😛, en el cual de una lista de números aleatorios irás seleccionando los números en orden. Si seleccionas el orden correcto de menor a mayor verás un mensaje de felicitación, de lo contrario la lista desaparecerá, como por arte de magia 🧙, y verás un mensaje de error 😞

¿Estás lista?

¡¡Claro que sí!! ¡¡ya eres toda una experta!! 👍

​¡Aquí puedes encontrar el demo!​

✨ Paso 1: Crear el título ✨

Como en el desafío anterior, iniciaremos por el título. Para ello simplemente iremos al archivo app.component.html, borramos todo el contenido y vamos a colocar lo siguiente:

app.component.html
<div class="container">
  <h1>💃💃🏻💃🏽 ¡¡¡Ordenemos los números!!! 💃💃🏻💃🏽</h1>
</div>

Pondremos unos emojis para hacerlo más bonito 💙💙. ¿Además, viste que puse otra etiqueta llamada <div>? esta etiqueta es opcional, pero es bueno darle más orden a nuestro documento y que nuestras etiquetas no estén por ahí, huerfanitas 😢. Nos podría servir para personalizar luego nuestro juego con CSS.

Deberías ver algo así: 👇

🆒 Paso 2: Agregar los botones 🆒

Ahora vamos a agregar los botones. Para hacerlo vamos a usar la etiqueta <button>:

app.component.html
<button type="button">5</button>

Pero espera, solo veo una, ¿qué paso con el resto? 🤔🤔🤔 Para los demás botones vamos a ser como los "Pros"👩‍🎓👩‍🎓, un montón de botones usando el código, pero más adelante. Como ya sabes añadir la etiqueta <div>, vamos a agregarla, dentro de ella pondremos nuestro botón y le pondremos una clase llamada "numbers-container" para después usarla en los estilos. Como sé que tú eres una tesa 💪🏻, no te daré el pastel 😋, solo un tip: es igual que cuando agregaste el título.😉😉

Ahora, solo veremos algo así: 👇

💬 Paso 3: Agregar el mensaje 💬

Ahora pondremos nuestro mensaje, para ello podemos usar dos etiquetas, un <div> y dentro de esta etiqueta añadimos un <p> ​

app.component.html
  <div>
    <p>Mensaje</p>
  </div>

El texto dentro de las etiquetas es opcional, después haremos algo súper chévere y automático 🤓🤓Nuestro progreso sería éste: 👇

🍭 Paso 4: Agregar los estilos 🍭

Ahora sí, vamos a ponerlo bonito!! 💅. Vamos a agregar un poco de CSS para darle color a nuestro juego. Reemplaza el contenido de app.component.css con el siguiente:

app.component.css
* {
  font-family: Lato;
}
​
.container h1 {
  color: #333;
  text-align: center;
}
​
.numbers-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  width: 50%;
}
​
.numbers-container button {
  cursor: pointer;
  background: #f45c41;
  border: 0;
  border-radius: 6px;
  color: white;
  font-size: 16px;
  height: 60px;
  margin-bottom: 10px;
  text-align: center;
  width: 60px;
}
​
.message {
  border-radius: 20px;
  box-shadow: 5px 5px 20px #cbcdd3;
  margin: 0 auto;
  height: 200px;
  padding: 20px;
  text-align: center;
  width: 50%; 
  /* Alinear texto verticalmente*/
  display: flex;
  align-items: center;
  justify-content: center;
}
​
.message > p {
  color: #fcfcfc;
  font-size: 35px;
  line-height: 40px;
  padding-bottom: 5px;
  text-transform: uppercase;
}

Ahora puedes decir que eres una experta 👩‍💻 en CSS y tu App (o juego) luciría así: 👇

Ahora iniciaremos con la lógica o código. Estás lista!!!😎

👩‍🔧 Paso 5: Generemos la lista de números aleatorios 👩‍🔧

Empecemos con el código. Seguiremos utilizando TypeScript, que como mencionamos es JavaScript sólo que con súper poderes 💪. Lo primero que haremos es que definiremos las variables que vamos a usar en el archivo "app.component.ts", todo esto será dentro de la clase AppComponent (en código una Clase nos permite definir propiedades y comportamientos o funciones):

app.component.ts
export class AppComponent  {
  arrayRandomNumbers;
}

El segundo paso es generar nuestra lista de números. Para ello crearemos una función (comportamiento) que genere los números de manera aleatoria. La llamaremos generateArrayRandomNumbers():

app.component.ts
export class AppComponent  {
  arrayRandomNumbers;
​
  generateArrayRandomNumbers() {
    const maxNumber = 10;
    const array = [];
    for(let i=0; i < maxNumber; i++) {
      const randomNumber = Math.round(Math.random() * maxNumber);
      array.push(randomNumber);
    }
    return array;
  }
}

¿Qué fue todo lo anterior?👆, no te preocupes, ahora te vamos a explicar detalladamente 😉 👇.

Ahora vamos a llamar nuestra función generateArrayRandomNumbers(), en otra función llamada generateNumbers(), que actualizará la variable arrayRandomNumbers👇

app.component.ts
export class AppComponent {
  arrayRandomNumbers;
​
  generateNumbers(){
    this.arrayRandomNumbers = this.generateArrayRandomNumbers();
  }
​
  generateArrayRandomNumbers() {
    const maxNumber = 10;
    const array = [];
    for (let i=0; i < maxNumber; i++) {
      const randomNumber = Math.round(Math.random() * maxNumber);
      array.push(randomNumber)
    }
    return array;
  }
}

Para que el código funcione debemos asegurarnos de llamar a la función que acabamos de crear. Para ello podemos usar el constructor (es una función o método, equivalente a una Clase, que son constructores que permiten definir propiedades y comportamientos=funciones): 👇

app.component.ts
export class AppComponent {
  arrayRandomNumbers;
​
  constructor() {
    this.generateNumbers();
  }
​
  generateNumbers(){
    this.arrayRandomNumbers = this.generateArrayRandomNumbers();
  }
​
  generateArrayRandomNumbers() {
    const maxNumber = 10;
    const array = [];
    for (let i=0; i < maxNumber; i++) {
      const randomNumber = Math.round(Math.random() * maxNumber);
      array.push(randomNumber)
    }
    return array;
  }
}

Ahora añadamos lo que hicimos en nuestro HTML para mostrar esa lista de números que generamos en nuestro archivo app.component.html, así: 👇

app.component.html
  <div class="numbers-container">
     <div class="button-container" *ngFor="let number of arrayRandomNumbers">
        <button type="button">{{ number }}</button>
     </div>
  </div>

Notaste que colocamos otro <div>, la clase en él es opcional, pero tiene algo llamado "*ngFor", no te preocupes ya te explicaremos todo🤗👇

¡Verás la lista de todos los elementos que se generaron aleatoriamente! 🎉🎉🎉

🧐 Paso 6: Seleccionemos un número en orden de menor a mayor🧐

¡Es momento de que seleccionemos un número de nuestra lista y lo vayamos ordenando! Necesitaremos crear una nueva función que nos permita realizar esta operación.

¿Qué haremos?

• Crearemos una variable que nos permita almacenar cuál fue el número previo seleccionado, previousNumber y le asignaremos un 0.

app.component.ts
...
  export class AppComponent  {
    arrayRandomNumbers;
    previousNumber= 0;
  }
...

• Crearemos una función clickMe(), que recibirá el número seleccionado para compararlo con el anterior y determinar si la respuesta es correcta. Si es correcta se actualiza la variable.

app.component.ts
...
  clickMe(number){
  }
...

• Empecemos a comparar dentro de la función el número que seleccionamos con el que vamos almacenando.

app.component.ts
...
  clickMe(number){
    if(number >= this.previousNumber){
      this.previousNumber = number;
    }else{
    }
  }
...

Interpretemos un poco el código, éste está más sencillo 😉

• Falta poco para acabar. Sólo nos hace falta llamar a nuestra función en los botones. 💪

Para hacerlo vamos a ir a app.component.html y vamos a añadir la función así:

app.component.html
<div class="button-container" *ngFor="let number of arrayRandomNumbers">
     <button type="button" (click)="clickMe(number)">{{ number }}</button>
  </div>

¿Te parece claro? 👆

Visualmente no es mucho el cambio en nuestro juego 👇

👻Paso 7: Ocultemos el número y limpiemos la lista 👻

Ahora vamos a ocultar el número que vamos seleccionando. Necesitaremos crear una nueva función que nos permita realizar esta nueva operación.

¿Qué haremos?

• Crearemos una función llamada removeElement(), que va a recibir un parámetro number, que será el número que vamos a ocultar o quitar de la lista.

app.component.ts
...
  removeElement(number){
  }
...

• Dentro de la función crearemos una variable position, la cual va a guardar la posición en la cual se encuentra el número que vamos a quitar de nuestra de lista de aleatorios. A ésta le asignamos nuestra función de aleatorios arrayRandomNumbers() seguida del método indexOf() al cual le pasaremos nuestro número.

app.component.ts
...
  removeElement(number){
    const position = this.arrayRandomNumbers.indexOf(number);
  }
...

• Al tener la posición lo único que nos falta es quitarlo de nuestra lista de aleatorios. Para eso usaremos otro método llamado splice(). Debajo de nuestra variable position haremos la operación de remover el elemento.

app.component.ts
...
  removeElement(number){
    const position = this.arrayRandomNumbers.indexOf(number);
    this.arrayRandomNumbers.splice(position, 1);
  }
...

Interpretemos que hicimos 😉

• Ahora debemos llamar a nuestra función. Esto es super fácil. En nuestra función clickMe(), lo que haremos dentro de nuestras condiciones (o cada una de las preguntas), es llamar la función donde lo necesitemos.

app.component.ts
...
  clickMe(number){
   if(number >= this.previousNumber){
      this.previousNumber = number;
      this.removeElement(number);
    }else{
    }
  }
...

¿Por qué hicimos esto?, ya te explicamos 👇

Ahora espero sea todo más claro. Lo que haremos será limpiar la lista de nuestros números aleatorios, cuando un número seleccionado sea mayor al de nuestra variable previousNumber y nos borre toda la lista.

Haremos lo siguiente:

• En nuestro else vamos a limpiar nuestro array de números aleatorios, para ello solo es necesario asignarle al arrayRandomNumbers los corchetes []. Así: 👇

app.component.ts
...
  clickMe(number){
   if(number >= this.previousNumber){
      this.previousNumber = number;
      this.removeElement(number);
    }else{
      this.arrayRandomNumbers = [];
    }
  }
...

Nuestra lista se vería así:

Al seleccionar y eliminar los elementos quedaría así:

¿Te pareció súper fácil?, al principio todo se ve complicado, pero poco a poco es más fácil de entender después de la practica 🤗🤗

🧠Paso 8: Muestra el mensaje 🧠

Tenemos nuestro juego casi terminado, solo falta mostrar un mensaje cuando estemos seleccionado bien los números para felicitar a nuestro usuario, y un mensaje de error cuando falle.

Haremos lo siguiente:

• Crearemos tres variables, una para mostrar el mensaje llamada showSuccessMessage, otra showErrorMessage y message que tendrá el texto del mensaje. En nuestro archivo "app.component.ts", crearemos nuestras variables, debajo de las demás que hemos creado anteriormente:

app.component.ts
...
  export class AppComponent  {
    arrayRandomNumbers;
    previousNumber= 0;
    showSuccessMessage = false;
    showErrorMessage = false;
    message;
  ...

• En la función clickMe(), le pondremos un valor a nuestras variables.

app.component.ts
...
  clickMe(number){
    if(number >= this.previousNumber){
      this.previousNumber = number;
      this.removeElement(number);
      this.message = "Estas haciendolo muy bien!! 💪";
      this.showSuccessMessage = true;
      this.showErrorMessage = false;
    }else{
      this.arrayRandomNumbers = [];
      this.message = "Fallaste 😟";
      this.showSuccessMessage = false;
      this.showErrorMessage = true;
    }
  }
  ...

¡Te explicare todo para que quede más claro!!

• Ahora es necesario modificar un poco nuestro HTML del mensaje. Vamos a ir al archivo app.component.html y vamos a modificar nuestro mensaje así:

app.component.html
<div class="message succes-message" *ngIf="showSuccessMessage">
  <p>{{ message }}</p>
</div>
<div class="message error-message" *ngIf="showErrorMessage">
  <p>{{ message }}</p>
</div>

Ahora ya tenemos nuestro juego terminado. 🎆🎆🎆

Así lucirá nuestro juego cuando seleccionamos el primer número y cuando seleccionemos los siguientes en orden solo que con un emoji diferente.

Así luce cuando fallamos.

¡Pero espera falta ponerla más bonita, el color del texto no se ve claramente y tiene un fondo blanco! 😕

🤡Paso 9: Pongámoslo más bonito y mejorémoslo!! 🤡

En el paso anterior añadimos unas clases en nuestras etiquetas. Ahora vamos a usarlas para colocarle más color y vida a nuestro juego. Vamos a agregar más CSS y para ello al final de los estilos que habíamos añadido en el archivo app.component.css, añade las siguientes líneas:

app.component.css
​
.error-message {
  background: linear-gradient(to bottom left, #EF8D9C 40%, #FFC39E 100%);
}
​
.error-message > p {
  color: #cf0404;
}
​
.succes-message {
  background: linear-gradient(to bottom right, #B0DB7D 40%, #99DBB4 100%);
}
​
.succes-message > p{
  color: #3e6a29;
}
​

Vamos a ver nuestros mensajes así:

Ahora es tiempo que juegues un poco con tú creatividad y lo aprendido y pongas más estilos CSS si quieres o más HTML. La idea es que lo personalices un poco.

Puedes mejorar el juego añadiéndole un funcionalidad extra. Cuando un usuario falle, puedes mostrar un botón, que te permita mostrar de nuevo la lista de números aleatorios, para iniciar el juego.

Para hacer la funcionalidad extra, te daré el siguiente tip:

• Añade un botón al final de tu HTML, donde le pondrás el evento click (click)="" , es similar a como lo hicimos con la función clickMe(), pero llamando a una nueva función que crees en donde llamaras a la función generateNumbers(), para volver a generar la lista de números aleatorios. Ademas en esta nueva función debes ocultar el mensaje de error (actualizando la variable showErrorMessage= false). Este botón solo debes mostrarlo cuando el usuario falle (usa la directiva *ngIf ).

En este caso no te daré el pastel, porque se que tu puedes hacerlo sola 💪 solo debes aplicar todo lo aprendido. Si tienes dudas pregúntale a los mentores 👍

💪 Misión Cumplida 💪

Tu aplicación está lista 👍👍

¡Cumpliste el segundo desafío!👏👏👏👏

🎉 ¡LO LOGRASTE! 🎉