O projeto da calculadora: por que foi mais fácil, mas cheio de obstáculos

Olá, é Blazej,

Trabalhar no Projeto Calculadora foi muito divertido e, eu diria, uma experiência diferente. Diferente do Etch-a-Sketch, que parecia ser mais difícil. Como é possível então?

A resposta pode não estar na dificuldade do exercício, mas em outra coisa, eu acho. Vamos começar do começo.

Iniciando o Projeto da Calculadora

Comecei a trabalhar na Calculadora no dia 2 de maio de 2024. A primeira sessão demorou três horas, durante as quais consegui configurá-la e executá-la. Era por volta do meio-dia, então decidi fazer um compromisso final, jantar e malhar.

Eu queria programar um pouco mais naquela tarde porque sabia que minha amiga viria me visitar no dia seguinte e ela ficaria por três noites.

Assim como outros Odinistas dedicados, eu não queria fazer pausas na codificação, especialmente na Calculadora, que acredito ser o projeto mais importante em Fundações.

Inspirações inesperadas

Eu estava prestes a desligar meu computador quando o vídeo de ForrestKnight no YouTube apareceu. Assisti um pouco e fiz uma pausa logo depois que ele falou sobre gostar de programar.

Eu pensei sobre isso e aqui está minha perspectiva como um iniciante que acabou de terminar a codificação e ainda me faz essa pergunta com frequência.

A resposta não é simples para alguém como eu, que tem acesso a um computador desde a infância, joga muitos jogos e tem uma compreensão básica de como as coisas funcionam.

No entanto, eu nunca tinha codificado antes!

Experiência inicial de codificação

Porém, percebi que quanto mais codifico e vejo funcionar, mais gosto do processo. Isso foi especialmente verdadeiro com a calculadora, que funcionou perfeitamente no geral, e consegui evitar ficar SÉRIAMENTE PRESO - bem, principalmente. Falarei sobre isso mais tarde.

Este projeto pareceu significativamente mais fácil do que o projeto Etch-a-Sketch, onde tive dificuldades para implementar a lógica de mudança de cor gradiente por dois dias. Codificar certamente não é fácil, mas para este projeto dediquei cerca de 1,5 a 2 horas por dia durante quatro dias e foi uma experiência gerenciável e gratificante.

Cada vez que abri o VSCode, me senti muito produtivo, o que me ajudou a resolver as tarefas rapidamente. O mais fascinante ao trabalhar nisso foi poder imaginar outras opções que também resolveriam este exercício.

Eu me senti como uma criança construindo um carro louco de Lego Technic e imaginando quais recursos adicionar novamente. Sentimento engraçado.

Aproveitando o processo

O que exatamente quero dizer com isso? Eu sabia que poderia ter criado uma função com eventos para todos os botões de dígitos, em vez de criar nove botões separados.

Porém, esqueci como fazer isso direito e decidi seguir em frente com 9 diferentes, mas prometi a mim mesmo que voltaria e leria a documentação que trazia algumas lições sobre como resolver esse problema. Como eu pensei que fiz.

Eu estava pensando em ficar preso em alguma coisa por mais cinco horas ou mais, mas isso nunca aconteceu. Consegui funcionar com 244 linhas de código.

Desafios com CSS

Agora era hora de começar a brincar com CSS e estilizar um pouco esse projeto. Bem, foi aí que fiquei preso. Parecia ser mais difícil do que criar JavaScript.

Eu não pude acreditar! Eu sabia que precisava usar o Flexbox para este projeto, mas os botões pareciam um pouco diferentes do Etch-a-Sketch que fiz anteriormente. No Etch-a-Sketch, me disseram para fazer uma grade usando loops:

Sempre que fico preso ao Flexbox, sempre recorro à postagem do blog de Josh. Não há melhor explicação de como eles funcionam, IMHO.

Eu não tinha certeza, entretanto, se funcionaria para uma calculadora, pois nem todos os botões são iguais. Eu queria que 0 fosse maior, por exemplo.

Rolei o artigo para baixo porque me lembrei que CSS Grid foi mencionado lá. Acontece que eu realmente precisaria usá-lo aqui.

Além disso, a calculadora mostrada como exemplo por Odin também foi projetada usando CSS Grid.

Descobrindo a grade CSS

Nesse ponto, fiquei um pouco perdido porque, pelo que me lembro, não tocamos no grid.

Comecei a pesquisar no Google. O que eu encontrei? Um grande artigo com uma explicação bastante avançada de como usá-lo. Achei que não era hora para isso e presumi que seríamos apresentados ao grid mais tarde.

Além disso, só havia Flexbox mencionado no exercício, então sim, ESPERO que aprendamos grid também. Se não, voltarei a isso em algum momento sozinho.

PEQUENA ATUALIZAÇÃO - no dia seguinte, vi este post no Odin Discord:

Ajustes finais e design de UI

Decidi usar algumas divs e apenas reagrupar os botões em HTML

Depois de outra sessão de estudo, a calculadora parecia familiar a um dispositivo normal.

Adicionando suporte para teclado

O último passo para mim foi fazer o suporte do teclado.

Puta merda! Isso não foi fácil e tive que voltar à lição do evento e ler a documentação várias vezes para entender como funcionam essas teclas do teclado.

Foi muito difícil, pois o borbulhar dos eventos estava me confundindo. Era o momento certo para fazer 1 função que clicaria em botões e 2 chamadas para ela. Um para um 'clique' do mouse e o segundo para um 'keydown' do teclado.

Consegui ordenar todos os dígitos e botões de igual, mas decidi não usar operadores, pois teria que mudar minha lógica com o objeto do operador.

Esta configuração parece mais fácil de entender se eu precisar revisá-la mais tarde.

No entanto, posso estar errado, então não tome isso como garantido.

O projeto finalizado pode ser visto aqui:

CALCULADORA

Reflexões e Lições Aprendidas

Qual foi a lição aqui? Gostei do processo de criação e design de um aplicativo e aprendi MUITO sobre eventos. Eu recomendo fortemente que você passe pelo processo de crédito extra com este!

Se você gostou dessa história e achou as dicas úteis, siga-me no Twitter para mais atualizações e dicas de codificação. Eu adoraria ouvir sobre seus próprios desafios e sucessos de codificação nos comentários abaixo!