A Alura compõe o maior ecossistema de ensino em tecnologia do Brasil e tem como missão transformar vidas e carreiras. Hoje a plataforma consta com mais de 1200 cursos em diversas áreas de atuação, como back-end, front-end, mobile, dados, UX, entre outros.
Ademais, a escola consta com uma grande gama de conteúdos gratuitos, como artigos, vídeos em seu canal do Youtube, os Podcasts (Hipsters Ponto Tech, Dev Sem Fronteiras), as Imersões Dev, o Tech Guide (um guia de carreira para se transformar em um profissional em T) e o 7 Days Of Code para você colocar em prática seus conhecimentos através de desafios diários.
E, com o objetivo de contribuir para a comunidade, eu me juntei a Alura e lançamos um novo desafio no 7 Days Of Code: construir um clone do jogo Wordle usando HTML, CSS, JavaScript e Jest aplicando TDD.
O jogo Wordle foi desenvolvido pelo Josh Wardle e tornou-se viral durante a pandemia do COVID-19. O jogo foi adquirido pelo jornal The New York Times em Janeiro de 2022.
A seguir veja mais detalhes de cada dia do desafio.
Este é apenas o primeiro post de uma série que vou trazer relacionado a este desafio. Os próximos vão ser de cunho mais prático com foco na escrita dos testes automatizados.
Dia 01
No primeiro dia do desafio, você recebe um link para acessar o layout da aplicação no Figma. O objetivo é recriar a página com base no design proposto construindo a estrutura HTML e a estilização com CSS. Você é desafiado a usar HTML semântico, alinhamento de elementos da página utilizando Flexbox e/ou CSS Grid, além do reset de CSS para sobrepor a formatação original que cada navegador aplica.
Dia 02
No segundo dia, você deve definir um banco de palavras e desenvolver uma função que será responsável por escolher randomicamente a palavra que será adivinhada no jogo. Você é desafiado a desenvolver testes automatizados seguindo a prática TDD (Test Driven Development), que basicamente consiste em um desenvolvimento orientado a testes.
Dia 03
Esse é um dos dias mais importantes! Você vai começar a tornar a sua página mais dinâmica e interativa: você vai desenvolver toda a lógica para realizar palpites, levando em consideração as regras do jogo. Neste desafio, você precisa interagir com as funções de DOM (Document Object Model) do JavaScript, como o evento keydown. Além disso, para a escrita do testes é recomendado o uso da biblioteca JSDom responsável por facilitar a manipulação da página HTML usando Jest.
Dia 04
No quarto dia, você vai verificar se o palpite está correto, levando em consideração as regras do jogo e, se o palpite completo for correto, irá exibir um alerta. Você continua sendo desafio a escrever testes automatizados usando Jest, mock de funções e a biblioteca JSDom.
Dia 05
Nesse dia, você vai customizar a caixa de diálogo (alerta) usando uma biblioteca externa chamada Toastify, incluindo essa dependência no projeto. Depois disso, você terá um jogo funcional.
Dia 06
Chegando quase no final, o foco do dia é o uso do DOM. O desafio do dia será tornar o teclado virtual clicável, ou seja, ao pressionar uma das teclas, isso deverá refletir no board do seu jogo, usando o evento de clique.
Dia 07
No sétimo e último dia do desafio, você precisa adicionar um botão na página que irá zerar as informações, para que o jogador possa jogar novamente do início. Você irá fechar com chave de ouro!
Considerações finais
Como uma pessoa desenvolvedora front-end é fundamental solidificar seus conhecimentos de HTML, CSS e JavaScript. Nada melhor do que pegar um design definido no Figma e transformar em código. Com isso, você terá uma boa base para dar mergulhos mais profundos em outras tecnologias, como React, pré-processadores de CSS.
Ademais, além de praticar a escrita de testes, você é desafiado a configurar o Github para executar seus testes automaticamente e publicar sua aplicação usando o Github Actions e o Gitub Pages, respectivamente.
Top comments (0)