Miercoles de #cotinatech // Hagamos nuestra propia ruleta de sorteo con HTML, CSS y JavaScript - por @nangel
Portada realizada en Paint
Hola amantes de la tecnología, las finanzas y el conocimiento en general; el día de hoy vengo con todas las ganas de enseñar y como siempre opino no todo en la vida es teoría y teoría, así que para cambiar un poco el protocolo el dia de hoy les quiero mostrar como hacer su propia Ruleta de sorteos programando con HTML, CSS y JavaScript.
Esta será una publicación práctica o más bien de demostración así que no me extenderé en los conceptos solo explicaré superficialmente el mecanismo y desarrollo, si desean aprender más de este tipo de programación pueden dejar en un comentario sus dudas y así poder ayudarlos.
Comencemos...
Primero que nada necesitamos una carpeta con 2 archivos uno lo guardaremos como index.html y el otro como indes.Css como es un programa muy sencillo no veo la necesidad de crear un archivo JavaScript a aparte.
Ahora para comenzar con el archivo HTML primero creamos nuestra estructura.
Yo utilizo SublimeText para escribir mis programas pero cualquier editor de texto sirve para editar los archivos.
Como toda estructura HTML está compuesta por su head y su body, dentro del head colocaremos nuestro title o título este se mostrara en la parte de arriba del ordenador y la llamaré Sorteo, abajo del title colocaré mi link para unir el HTML con el CSS.
En el body voy a construir un arreglo con la cantidad de concursantes yo, coloque 30 números, pero esto depende de ti puedes colocar concursantes, números e incluso nombres dentro del Array y esos serán los que se mostraran dentro de la ruleta.
Ahora que ya terminamos con esa parte podemos escribir nuestros div o contenedores que serán los encargados de organizar nuestra ruleta en el lugar correcto, además que estos por medio de las clases o id podrán ser modificados luego en nuestro archivo CSS.
Como habrás notado tambien hay una etiqueta que dice Button, pues esta etiqueta es la que trabajara con el código JavaScript al final para poder darle movilidad a la ruleta por modio del evento onclick y las funciones que crearemos más adelante.
Por los momentos ya terminamos con lo que seria el HTML ahora vamos con CSS. En este caso utilizaremos los nombres de las etiquetas, clases e Id, para conseguir un poco de estética en la ruleta si crees que está muy complicado la realidad es muy diferente.
La mayoría de las palabras están en inglés y los números son solamente datos para por así decirlo decir cuantos píxeles queremos de distancia, cuanto porcentaje de profundidad necesitamos en cada estructura, si queremos que el contenedor sea relativo al diámetro o si quieren que algo sé quede estático para eso emplearemos nuestro CSS, además que con él realizáremos el triángulo rojo que nos señalara al ganador en la ruleta.
Ahora regresamos a nuestro archivo index.html en donde comenzaremos a escribir el resto de nuestro código JavaScript. Abajo de nuestro Array colocaremos un FOR para que se pinte por medio de las herramientas de canva nuestro círculo y su radio de acuerdo con los datos de nuestro Array.
Por fuera del FOR crearemos nuestra primera función que se llamara random_color y se encargara de hacer que cada concursante dentro del círculo tenga un color diferente.
Muy bien ahora ya se nos debería de comenzar a mostrar nuestra ruleta y podemos iniciar a agregar los nombres de los concursantes lo cual haremos gracias al siguiente código que colocaremos dentro de nuestro FOR.
Muy bien para continuar colaremos un poco más de estética a nuestra ruleta con el siguiente código:
El código de arriba lo que hace es crear un borde negro y sólido alrededor de nuestra ruleta, y el código se coloca abajo de nuestro Array y arriba de nuestro FOR de una manera completamente independiente.
Ahora para finalizar con esta ruleta necesitamos de que se mueva y nos dé un número aleatorio para eso utilizaremos el siguiente código que es en realidad una función de nombre Sortear que crearemos fuera de nuestro FOR y arriba de la función random_color.
Esta función rotará los números en el sentido de las manecillas del reloj cada 10 milésimas de segundo desde que presionamos el botón por primera vez hasta que lo volvamos a presionar nuevamente para detenerlo.
Al final quedará una ruleta igual que la del video corto que subí a youtube.
Bueno eso fue todo por el día de hoy espero les gustara mi publicación nos veremos en la próxima.
Nota: todas las imagenes son capturas de pantalla realizados por mi persona.
Está excelente esa explicación amigo, si tuviera una computadora hubiese corrido a probar todo jeje ya que me gustan esos temas de programación.
Es una excelente propuesta para uno realizar rifas y que salgan los números como deberían. Un abrazo.
Muchas gracias por tus palabras amigo y por leer mi publicación.
bendiciones para ti
Y dado en Venezuela el masivo uso en rifas y sorteos es muy acordé. Cabe destacar que no todos van a entender de programación pero me agrada enseñes en base a lo que dominas y lo haces muy bien.
Muchas gracias, amiga trataré de hacer más publicaciones educativas y así hablar más de lo poco que conozco.
bendiciones para ti.
Upvoted! Thank you for supporting witness @jswit.
Hi, @nangel,
Thank you for your contribution to the Steem ecosystem.
Please consider voting for our witness, setting us as a proxy,
or delegate to @ecosynthesizer to earn 100% of the curation rewards!
3000SP | 4000SP | 5000SP | 10000SP | 100000SP
Thank you for contributing to #LearnWithSteem theme (which includes #assignment , #tutorial, and #lesson tags).
This post has been supported by @cryptogecko using @steemcurator09 account. We encourage you to keep publishing quality and original content in the Steemit ecosystem to earn support for your content.
Regards,
Team #Sevengers
Saludos Steemian, @nangel, Tu post ha sido recompensado por @yonaikerurso del Cotina Team.
Si deseas apoyar a la comunidad considera delegar Steem Power a @cotina o Votar por nuestro Witness