O Desafio Amigo Secreto é um projeto que foi desenvolvido pela Alura no programa ONE, com o objetivo de desenvolver as habilidades em lógica de programação, consolidar os conhecimentos, dominar o raciocínio lógico, aprimorar habilidades de análise e resolução de problemas.
- 👨🏫 Avaliadores: Professores e mentores da Alura.
- 📌 Desenvolvedores iniciantes: que desejam aprender sobre lógica de programação.
- 📌 Estudantes de tecnologia: que buscam projetos práticos para aprimorar seus conhecimentos.
- 📌 Organizadores de eventos: que precisam de um sistema simples para sorteios.
✅ Usuário adiciona Amigos: O usuário deverá adicionar nomes de amigos no campo de texto por meio de um botão "Adicionar";
✅ Validação de entrada: Se o campo de texto estiver vazio, o programa exibirá um alerta solicitando um nome válido;
✅ Visualizar a lista: Exibe os nomes dos amigos inseridos em uma lista visível na página;
✅ Sorteio Aleatório do Amigo Secreto: O sorteio é aleatório e determinar quem é o "amigo secreto" por meio de um botão "Sortear Amigo", exibindo o resultado na tela.
✅ Usuário Reinicia o jogo: Após o termino do sorteio o usuário pode reiniciar o jogão por meio de um botão "Reiniciar".
🖥️ Linguagens de Programação: HTML, CSS e JavaScript.
📌 JavaScript: Uso de arrays, funções e eventos para interatividade.
📌 HTML: Estruturação da interface com elementos semânticos e acessibilidade.
📌 CSS: Estilização da página com variáveis CSS, flexbox e efeitos visuais para melhor experiência do usuário.
📌 index.html - Define a estrutura da página, incluindo o cabeçalho com título e imagem, campos de entrada para adicionar nomes, botões de interação e listas para exibição dos participantes e do resultado do sorteio.
📌 style.css - Responsável pela estilização da interface, utilizando variáveis CSS para cores, flexbox para organização do layout e efeitos visuais como sombras e transições para melhorar a experiência do usuário.
📌 app.js - Contém a lógica do sorteio, permitindo adicionar amigos de forma validada, renderizar dinamicamente a lista e sortear um nome aleatório, garantindo uma interação intuitiva e funcional.
1️⃣ Abra em um navegador web: Faça o download dos arquivos e abra o index.html no navegador para visualizar o projeto funcionando.
2️⃣ Deploy online: Via link (https://carinamendesdev.github.io/jogo_amigo_secreto/), sem necessidade de baixar arquivos ou rodar localmente.
🔍 Testes Realizados:
- Testes de Funcionalidade: O programa foi testado para garantir que as funcionalidades de adicionar amigos, validar entrada, realizar o sorteio do amigo secreto, exibir o amigo sorteado e reiniciar o jogo, estão funcionando corretamente.
- Testes de Validação: Garantido que não seja possível adicionar um nome em branco e que a lista de amigos seja exibida corretamente.
- Testes de Interface: A interface foi testada em diferentes tamanhos de tela para garantir que a experiência seja responsiva e acessível.
🔧 Ferramentas de Teste:
Os testes foram realizados manualmente em navegadores modernos, incluindo Google Chrome e Mozilla Firefox, verificando todos os fluxos de interação com o usuário.
🚀 Adicionar Nomes com Enter: Implementar a funcionalidade de adicionar nomes à lista ao pressionar a tecla "Enter". 🚀 Remover Nomes: Implementar a funcionalidade para remoção de nomes da lista após a confirmação. 🚀 Armazenamento de dados: Implementar o armazenamento local para salvar a lista de nomes. 🚀 Aprimoramento Visual: Melhorar o design visual com animações e transições fluídas. 🚀 Acessibilidade: Implementar a acessibilidade para tornar o jogo mais inclusivo, como a navegação e suporte a leitores de tela.
💡 Este projeto foi uma excelente oportunidade para aplicar meus conhecimentos em JavaScript e aprimorar minhas habilidades em CSS para construir uma interface responsiva e visualmente atrativa, evidenciando minha capacidade de resolver problemas de forma prática, eficiente e criativa no desenvolvimento web.
