Article image
Felipe Marçal
Felipe Marçal16/02/2023 08:53
Share

Projeto pessoal - Gerador de sorteio com HTML, CSS e Javascript

  • #HTML
  • #JavaScript
  • #CSS

Olá, pessoal!

Compartilho com vocês meu projeto pessoal de gerador de sorteio. É meu primeiro projeto completo utilizando HTML, CSS e Javascript (aprendidos aqui na DIO!).

Utilizei a plataforma Codepen, uma plataforma aberta para criação de páginas utilizando estas 3 tecnologias. Ela também aceita outras tecnologias (como React) e está voltada ao desenvolvimento front-end.

Voltando ao projeto, trata-se de um simples input para recepcionar os nomes dos participantes. A inserção dos dados é manual e unitária, ou seja, deve-se incluir os nomes um a um. Tentei deixar a solução bem intuitiva e tratei as possíveis falhas de segurança (dentro do que eu consegui identificar), ou seja, o input só aceita nomes, desta forma, não é possível inserir tags html para tentar modificar o código por dentro, dado que os valores são lidos por Javascript.

A tela só mudará quando houver um valor a ser inserido dentro dos parâmetros estabelecidos (apenas letras).

Ao inserir valores, cria-se a lista em tela.

Uma vez que o usuário tenha inserido todos os nomes desejados, é só clicar no botão "sortear".

Haverá uma pequena pausa dramática e o nome do sorteado aparecerá.

A estilização da página está toda em CSS e a estrutura em HTML (semântico na medida do possível).

Espero que gostem e aguardo os comentários com críticas, elogios e/ou sugestões de melhorias.

Um abraço.

https://codepen.io/fgmarcal/full/NWLKROj

Share
Comments (2)

EA

Eros Alves - 16/02/2023 12:07

parabéns mano, ficou mto bom

DP

Diogo Paiva - 16/02/2023 09:01

Parabéns meu mano! Ficou mt massa