Criando um clone do Jogo Wordle com JavaScript e praticando TDD
Tags: javascript, testing, css, html
Published: 2023-02-27 12:00:24

A [Alura](https://www.alura.com.br/) 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](https://www.alura.com.br/artigos), vídeos em seu canal do [Youtube](https://www.youtube.com/c/Alura), os [Podcasts](https://www.alura.com.br/podcasts) (Hipsters Ponto Tech, Dev Sem Fronteiras), as [Imersões Dev](https://www.alura.com.br/imersao), o [Tech Guide](https://techguide.sh/) (um guia de carreira para se transformar em um profissional em T) e o [7 Days Of Code](https://7daysofcode.io/) 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](https://7daysofcode.io/matricula/javascript-e-dom-wordle).

![Layout no Figma: Wordle board game preenchido](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nahj2lpccqiyaqd8m53h.png)

O [jogo Wordle](https://www.nytimes.com/games/wordle/index.html) 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](https://developer.mozilla.org/pt-BR/docs/Web/API/Element/keydown_event). Além disso, para a escrita do testes é recomendado o uso da biblioteca [JSDom](https://github.com/jsdom/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](https://github.com/apvarun/toastify-js), 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](https://developer.mozilla.org/pt-BR/docs/Web/API/Element/click_event).

### 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](https://docs.github.com/pt/actions/automating-builds-and-tests/building-and-testing-nodejs) e o [Gitub Pages](https://docs.github.com/pt/pages/getting-started-with-github-pages/creating-a-github-pages-site), respectivamente.