README-PT.md

Solução da aplicação calculadora de gorjetas

Desafio do Frontend Mentor        Mudar para Inglês 🇺🇸

Visualizar o Aplicativo    Relatar Problema    Sugerir Funcionalidade

       

Índice

1. Introdução
2. Principais funcionalidades
3. Meu papel no projeto
4. Propósito e Objetivo
5. Destaque
6. Capturas de tela
7. Como Rodar o Projeto Localmente
8. Meu processo
   • Planejamento
   • Arquitetura do código
   • Desafios enfrentados
9. Aprendizados
10. Tecnologias usadas
11. Autor
12. Agradecimentos

Introdução

Este projeto é uma aplicação de cálculo de gorjetas que permite aos usuários calcular facilmente o valor da gorjeta e o custo total da conta por pessoa. O design e o desafio foram propostos pelo Frontend Mentor, com o objetivo de criar uma interface responsiva que se adapta a diferentes tamanhos de tela.

Principais funcionalidades

• Cálculo automático de gorjetas baseado em porcentagens pré-definidas ou personalizadas.
• Entrada de dados em tempo real, com feedback visual instantâneo.
• Validação de entradas para garantir dados válidos.
• Design responsivo e acessível.

Meu papel no projeto

Neste projeto, eu fui responsável por toda a implementação, desde o desenvolvimento do front-end até a lógica de cálculo em JavaScript.

Propósito e Objetivo

O propósito deste projeto é proporcionar uma ferramenta prática para ajudar os usuários a calcular gorjetas de forma rápida e eficiente. A aplicação visa simplificar o processo de divisão de contas em situações de grupos, como em jantares ou refeições em conjunto.

Destaque

O recurso principal deste projeto é a capacidade de calcular automaticamente a gorjeta e o custo total da conta com base nas entradas do usuário. A lógica de cálculo é implementada em JavaScript, garantindo resultados precisos e atualizações em tempo real à medida que o usuário interage com os campos de entrada.

Capturas de tela

Mobile

Tablet

Como Rodar o Projeto Localmente

Para rodar este projeto localmente em sua máquina, siga os passos abaixo:

1. Clone o Repositório:

git clone https://github.com/alberto-rj/tip-calculator/

2. Navegue até o Diretório do Projeto:

cd tip-calculator

3. Abra o arquivo index.html em seu navegador: Você pode abrir o arquivo diretamente no navegador ou usar um servidor local como o Live Server se estiver usando o Visual Studio Code.

4. Interaja com o aplicativo: O aplicativo está pronto para uso! Basta inserir os valores desejados nos campos e calcular as gorjetas.

Meu processo

Para desenvolver esta aplicação, segui um processo estruturado.

Planejamento

Compreendi as exigências do desafio e elaborei um esboço inicial da interface.

Arquitetura do código

O projeto foi estruturado usando HTML, CSS e JavaScript, com ênfase em boas práticas de acessibilidade e usabilidade.

Desafios enfrentados

1. Validação Acessível

• Problema: O aplicativo deve permanecer acessível durante a validação das entradas dos usuários.
• Solução:
  • Implementação de validações acessíveis.
  • Mensagens de erro claras e informativas.
  • Testes realizados em diferentes dispositivos para garantir uma experiência inclusiva.

2. Feedback Visual Interativo

• Problema: Necessidade de implementar estados de hover e foco para todos os elementos interativos na página.
• Solução:
  • Utilização das pseudoclasses CSS :hover e :focus-visible.
  • Garantia de feedback visual consistente em botões e campos.
  • Melhoria da usabilidade e acessibilidade da aplicação.

3. Responsividade do Layout

• Problema: O layout deve ser otimizado para diferentes tamanhos de tela.
• Solução:
  • Implementação de media queries para ajustar o layout.
  • Uso de unidades relativas (como %, e rem) para garantir escalabilidade.
  • Aplicação de Flexbox e CSS Grid para criar um layout flexível e adaptável.
  • Testes realizados em vários dispositivos para garantir uma visualização adequada.

4. Cálculo Preciso de Gorjetas

• Problema: O aplicativo deve calcular corretamente a gorjeta e o custo total por pessoa.
• Solução:
  • Implementação de funções de cálculo precisas em JavaScript.
  • Garantia de que os resultados são exibidos de forma clara e compreensível.

Aprendizados

• Acessibilidade:

  • Aprendi a implementar validações e mensagens de erro acessíveis, garantindo que todos os usuários consigam interagir com a aplicação, independentemente de suas habilidades.

• Feedback Visual:

  • Compreendi a importância de estados de hover e foco para melhorar a usabilidade e a acessibilidade, proporcionando uma melhor experiência ao usuário.

• Design Responsivo:

  • Desenvolvi habilidades em CSS, utilizando unidades relativas, flexbox e CSS Grid para garantir que o layout se adapte a diferentes tamanhos de tela.

• Testes:

  • Valorizei a importância de testar a aplicação em diferentes dispositivos e contextos para identificar e corrigir problemas de usabilidade.

• Aprimoramento Contínuo:

  • Aprendi que sempre há espaço para melhorias e que cada desafio enfrentado é uma oportunidade de aprendizado.

Tecnologias usadas

                 

Autor

• GitHub - @alberto-rj
• Frontend Mentor - @alberto-rj
• Twitter - @albertorauljose

Agradecimentos

Desafio fornecido pelo Frontend Mentor.