🌩️ Tormenta de código: Apuesta al clic, la web que nunca te atreviste a hacer 🎰

🎯 Propósito: Crea una web con algo que no hayas usado nunca 🆕

Te cuento los requisitos y los trozos de código y plantilla que ya tienes disponibles para que sea aún más fácil.

‎

📋 Requisitos del reto

🌟 Tienes que utilizar algo que no hayas usado antes

Puede ser el stack completo o solo una parte.

Debe ser en la parte funcional/programática del stack (JavaScript). No vale solo usar un "sitio nuevo donde despliego" o "una librería CSS nueva", tiene que haber algo nuevo en la forma de construir la funcionalidad del usuario.

Por sencillas que parezcan, TODAS las soluciones son válidas.

Ejemplos:

• 👶 Si nunca has hecho una web, usa HTML, CSS y JavaScript Vanilla (o, incluso jQuery). NO es necesario usar un framework en este caso
• 🛠️ Si lo tuyo es el backend o mobile o devops, lee el caso anterior 😉
• 🅾️ Si estás a piñón con React prueba, por ejemplo, HTML+Alpine.js o HTMX
• 📚 Si llevas años con JavaScript, lánzate al TypeScript
• 🚀 Si quieres probar Vite o Bun, esta es tu oportunidad ‎

🎲 Requisitos funcionales de Apuesta al clic

Esta es la propuesta de funcionalidad.

1. Cada vez que se carga la página se genera un numero aleatorio que el usuario no ve directamente: está entre 0 y 10
2. Un botón rojo al que hay que hacer clic un número de veces
3. Un botón debajo con el que haces tu apuesta
4. Si la apuesta es acertada, te lleva a una pantalla donde te da la enhorabuena y consigues tu premio
5. Si la apuesta no acierta, muestra un mensaje de error y te propone que lo vuelvas a intentar
6. Despliega tu código en internet

🎁 ¿Cuál es el premio si aciertas el número?
Échale un poco de “imagifnación“ o “calambrazo” 😛

🌟 Requisitos extra (no obligatorios, pero hay gente muy “viciosa”)

• 🔒 Estaría bien que el número aleatorio no fuera conocido por el cliente antes de apostar (en el frontend no hay secretos)
• 🏆 Sería genial que no se pudiera acceder a la pantalla del premio sin haber acertado antes
• ⏩ Reseteo del sistema

‎

🏆 Premio especial

📏 Al que consiga crear el código con menos ~líneas~ caracteres de JS/TS sin que deje de ser legible por un ser humano.

¿Qué premio es?

Inténtalo y saldrás de dudas...

‎

👩‍💻 ¿Cómo participas en el reto?

✉️ Cuando tengas la solución, añades una issue en este repositorio y nos cuentas lo que has hecho y cuáles han sido tus principales aprendizajes y dificultades, ¡a la comunidad le encantará saberlo!

1️⃣ Hay que compartir el código.
2️⃣ Puedes hacer un fork de este repositorio y trabajar sobre él.

‎

🗓️ Fecha límite

21 de Septiembre de 2023.

¿Habrá directo? Sí, el 21 de Septiembre si se presentan soluciones ;)

🛠️ ¿Qué vas a aprender en este reto?

1. Gestionar el tiempo

Hay menos de 3 semanas para completar el reto. Es muy justo pero es que si tuvieras toda la vida para hacerlo, no sería un desafío (y no lo harías)

2. Un nuevo “algo”

Un framework entero, una librería, un stack o, quien sabe, ¡el propio JavaScript!

3. Gestionar el estado de una aplicación web

• El número de clics inicial
• El número de la apuesta (las veces que has hecho clic)
• La comprobación de la apuesta
• El cambio en la pantalla ‎

📁 Plantillas

Para hacértelo aún más fácil en la carpeta plantillas tienes:

1. El HTML con el CSS de la web en index.html
2. El código para generar el número aleatorio en randomNumber.js

🤗 Mecenazgo

Este reto se realiza por y para la Comunidad Malandriner

❤️