Reto #1 - Bingo

Puedes intentar partir de una estructura similar a esta:

  <div class="container">
    <div class="player card"></div>
    <div class="drum">
      <div class="number"><em>Saca número</em></div>
    </div>
    <div class="cpu card"></div>
    <div class="marks"></div>
  </div>

Una forma sencilla de abordar problemas de programación es seguir la filosofía de Divide y vencerás. Un buen consejo es hacer pequeñas funciones que realicen tareas concretas. Por ejemplo, algunas de ellas podrían ser:

• createCard Crea array de 15 números aleatorios, crea el DOM, inserta los datos, y devuelve el array creado.

• addNumber Añadir los números ya extraídos a la zona inferior de la página.

• checkWinner Comprueba si el jugador o la CPU han ganado.

• shuffle Desordena los elementos de un array

Este ejercicio es muy sencillo si planteas adecuadamente los pasos a seguir, pero puede ser complejo si no lo haces. Para y piensa un poco antes como generar unas estructuras de datos de un bombo y unos cartones de modo que luego no tengas que hacer múltiples comprobaciones.

Para que este ejemplo sea muy sencillo, considera apoyarte en el DOM. Crea los contenedores de los números del cartón con la siguiente estructura:

<div class="player card">
  <div class="title">Player</div>
  <div class="numbers">
    <div class="number number-5">5</div>
    <div class="number number-16">16</div>
    ...
  </div>
</div>

Esto facilitará mucho luego, a la hora de localizar los números, utilizando un simple .querySelector() o .querySelectorAll() para buscarlos.