Conheça o projeto
Neste desafio, você vai desenvolver um site responsivo de sorteio de números. O usuário poderá escolher quantos números deseja sortear, definir um intervalo mínimo e máximo (range) e visualizar o resultado em tempo real. Além disso, será possível ativar a opção para não repetir números no sorteio. O foco está em construir uma interface clara e funcional, adaptada para desktop e mobile, aplicando boas práticas de HTML, CSS e JavaScript para manipular os números de forma dinâmica.
Recursos
Materiais para você usar como base para o desenvolvimento
Instruções
Estrutura, regras e requisitos do projeto
1. Estrutura inicial
- Crie o arquivo base
index.htmlcom a estrutura HTML padrão; - Crie o arquivo
style.csspara os estilos da página; - Linke o
style.cssnoindex.htmle configure a estrutura de seções principais.
2. Requisitos
Estrutura da página
- Deve conter um título principal;
- Deve haver uma seção explicando como o sorteador funciona;
- Deve existir uma área para o usuário inserir:
- A quantidade de números a serem sorteados;
- O valor mínimo do intervalo;
- O valor máximo do intervalo.
- Deve haver a opção de não repetir números.
Funcionalidades principais
- O usuário deve inserir a quantidade de números a serem sorteados;
- O usuário deve inserir o valor mínimo e máximo para o sorteio;
- Deve existir um botão "Sortear" que, ao ser clicado, exibe os números sorteados.
- Se a opção não repetir número estiver ativada, nenhum número sorteado pode se repetir.
Validações
- Não permitir campos vazios;
- O valor máximo deve ser maior que o valor mínimo;
- A quantidade de números não pode ser maior que o intervalo disponível (quando a opção de não repetir estiver marcada);
- Mensagens de erro amigáveis devem ser exibidas se as condições não forem atendidas.
Exibição dos resultados
- Os números sorteados devem aparecer na tela de forma clara e organizada;
- Crie uma animação para o sorteio dos livros;
- O resultado deve ser atualizado a cada novo sorteio.
3. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais tecnologias que utilizamos durante o desenvolvimento do primeiro módulo da formação.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além! 🚀
4. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github.
Além disso, que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência? É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar! Vai ser incrível acompanhar a sua evolução! 💜
5. Considerações finais
Lembre-se que o intuito de um desafio é te impulsionar, por isso, dependendo do desafio, pode ser que você precise ir além do que foi discutido em sala de aula. Mas isso não é algo ruim: ter autonomia para buscar informações extras é uma habilidade muito valiosa e vai ser ótimo pra você treinar ela aqui com a gente!
E lembre-se: tenha calma! Enfrentar desafios faz parte do seu processo de aprendizado!
Se precisar de alguma orientação ou suporte, estamos aqui com você! Bons estudos e boa prática! 💜
Feito com 💜 por Rocketseat 👋
1. Estrutura inicial
- Crie o arquivo base
index.htmlcom a estrutura HTML padrão; - Crie o arquivo
style.csspara os estilos da página; - Linke o
style.cssnoindex.htmle configure a estrutura de seções principais.
2. Requisitos
Estrutura da página
- Deve conter um título principal;
- Deve haver uma seção explicando como o sorteador funciona;
- Deve existir uma área para o usuário inserir:
- A quantidade de números a serem sorteados;
- O valor mínimo do intervalo;
- O valor máximo do intervalo.
- Deve haver a opção de não repetir números.
Funcionalidades principais
- O usuário deve inserir a quantidade de números a serem sorteados;
- O usuário deve inserir o valor mínimo e máximo para o sorteio;
- Deve existir um botão "Sortear" que, ao ser clicado, exibe os números sorteados.
- Se a opção não repetir número estiver ativada, nenhum número sorteado pode se repetir.
Validações
- Não permitir campos vazios;
- O valor máximo deve ser maior que o valor mínimo;
- A quantidade de números não pode ser maior que o intervalo disponível (quando a opção de não repetir estiver marcada);
- Mensagens de erro amigáveis devem ser exibidas se as condições não forem atendidas.
Exibição dos resultados
- Os números sorteados devem aparecer na tela de forma clara e organizada;
- Crie uma animação para o sorteio dos livros;
- O resultado deve ser atualizado a cada novo sorteio.
3. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais tecnologias que utilizamos durante o desenvolvimento do primeiro módulo da formação.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além! 🚀
4. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github.
Além disso, que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência? É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar! Vai ser incrível acompanhar a sua evolução! 💜
5. Considerações finais
Lembre-se que o intuito de um desafio é te impulsionar, por isso, dependendo do desafio, pode ser que você precise ir além do que foi discutido em sala de aula. Mas isso não é algo ruim: ter autonomia para buscar informações extras é uma habilidade muito valiosa e vai ser ótimo pra você treinar ela aqui com a gente!
E lembre-se: tenha calma! Enfrentar desafios faz parte do seu processo de aprendizado!
Se precisar de alguma orientação ou suporte, estamos aqui com você! Bons estudos e boa prática! 💜
Feito com 💜 por Rocketseat 👋
Tarefas
Use este checklist para ajudar a organizar a sua entrega