DEV Community

James Smith
James Smith

Posted on • Edited on

Como Construí uma Calculadora de Horas e Por Que Todo Freelancer Precisa de Uma

Sabe aquele momento em que você termina um projeto e pensa: "espera, quantas horas eu trabalhei nisso mesmo?" Pois é, passei por isso tantas vezes que resolvi criar minha própria solução.

O Problema Que Todo Freelancer Enfrenta

Trabalho como desenvolvedor freelancer há uns dois anos. No começo eu anotava tudo em papel. "Cliente X: 3 horas". Simples, né? Mas depois de um mês tentando somar tudo, percebi que tinha um problema sério.
Horas não funcionam como números normais. Você não pode simplesmente fazer 2:45 + 3:30 = 5:75. Não existe 75 minutos. São 1 hora e 15 minutos a mais. Meu caderninho virou uma bagunça de contas erradas.
Tentei planilha também. Melhorou um pouco, mas ainda tinha que configurar fórmulas, formatar células, e no celular era uma tortura usar. Foi aí que pensei: "cara, eu sou programador. Por que não faço uma ferramenta pra isso?"

A Primeira Versão

Comecei simples. Uma calculadora de horas básica que pegava horário de entrada e saída, subtraía, e pronto. Fiz em JavaScript vanilla, sem framework, só pra ir rápido.
O código inicial era bem direto:
function calcularHoras(inicio, fim) {
const diffMs = fim - inicio;
const diffHrs = Math.floor(diffMs / 3600000);
const diffMins = Math.round((diffMs % 3600000) / 60000);
return ${diffHrs}h ${diffMins}m;
}

Funcionou, mas tinha um problemão: não considerava intervalos. Eu começava às 9h, parava às 12h pro almoço, voltava 13h, trabalhava até 18h. A calculadora dizia que trabalhei 9 horas. Mentira. Trabalhei 7 horas.

Adicionando Complexidade

Versão 2.0 veio com suporte a múltiplos intervalos. Você podia adicionar quantas pausas quisesse: almoço, café, aquela pausa pra resolver problema pessoal.
Também adicionei validação. Porque sempre tem alguém que vai colocar horário de saída antes do horário de entrada. Ou intervalos que não fazem sentido. Programar pensando no usuário maluco salva muita dor de cabeça depois.
function validarHorarios(inicio, fim, intervalos) {
if (fim <= inicio) {
throw new Error('Horário de saída deve ser após entrada');
}

intervalos.forEach(intervalo => {
if (intervalo.inicio < inicio || intervalo.fim > fim) {
throw new Error('Intervalo fora do período de trabalho');
}
});
}

O Recurso Que Mudou Tudo

Um amigo designer que testa minhas ferramentas sugeriu algo genial: acumular horas de vários dias. Porque ninguém trabalha só um dia, né?
Implementei um sistema onde você registra cada sessão de trabalho e a ferramenta soma tudo automaticamente. Virou praticamente uma calculadora de horas trabalhadas completa, não só uma calculadora simples.
A parte legal? Salvei tudo no localStorage. Nada de banco de dados, servidor, API. Tudo local, rápido, e privado. Seus dados ficam no seu navegador, ponto final.

Quando as Coisas Ficaram Interessantes

Mês passado um cliente me pediu pra calcular horas extras. Ele paga diferente depois das 8 horas diárias. Precisava separar hora normal de hora extra.
Aí eu pensei: "já que to mexendo nisso, vou fazer direito." Criei uma calculadora de horas extras integrada. Você define quantas horas são consideradas normais, e tudo acima disso aparece destacado.
Isso foi útil demais na hora de fazer fatura. Cliente vê claramente: "você trabalhou 45 horas esse mês, sendo 37 normais e 8 extras." Fica tudo transparente.

Aprendizados Técnicos

Trabalhar com Date em JavaScript é chato. Sério mesmo. Timezone, formato, parsing. Tudo conspirou pra dar problema. Acabei usando Intl.DateTimeFormat pra manter consistência.
Performance importa mesmo em apps simples. Quando comecei a acumular centenas de registros, a interface travava. Tive que otimizar as operações de soma e renderização. Aprendi sobre memoization na prática.
UI/UX faz diferença brutal. Não adianta ter cálculo perfeito se ninguém entende como usar. Passei mais tempo ajustando interface do que escrevendo lógica de negócio.

Funcionalidades Inesperadas

Tem coisa que eu não planejei mas acabou sendo essencial. Tipo exportar dados. Pessoal queria mandar relatório pro cliente ou guardar backup.
Implementei export em JSON e CSV. JSON pra quem é dev e quer processar os dados. CSV pra quem vai abrir no Excel e fazer gráfico bonitinho.
Outra coisa: dark mode. Porque programador trabalha de madrugada e interface branca queima a retina. Foi literalmente 20 linhas de CSS mas todo mundo adorou.

O Lado do Negócio

Essa calculadora de horas virou ferramenta de trabalho mesmo. Uso todo santo dia. E não sou só eu, compartilhei com outros freelancers e virou ferramenta deles também.
O legal é que me ajudou a perceber quanto eu realmente trabalho. Antes eu achava que trabalhava 10 horas por dia. Na real? 6 horas efetivas. O resto era distração, reunião, email, interrupção.
Isso mudou como eu precificava projetos. Parei de cobrar no achismo. Tenho dados reais de quanto tempo cada tipo de trabalho leva.

Desafios de Manutenção

Manter projeto solo dá trabalho. Bug aparece, você que resolve. Feature nova, você que implementa. Documentação, você que escreve.
Mas aprendi muito. Git, versionamento, changelog, testes. Coisas que em projeto de empresa já vem pronto, aqui tive que montar do zero.
Também aprendi a dizer não. Já recebi pedido de integração com Trello, Notion, Google Calendar. Tudo legal, mas não tenho tempo pra tudo. Foco em fazer o essencial muito bem feito.

Tecnologias Usadas

Mantive tudo simples de propósito:
Frontend: HTML, CSS, JavaScript vanilla
Storage: LocalStorage API
Build: Nada, serve direto
Deploy: GitHub Pages
Sem framework, sem bundler, sem transpilação. Só código que qualquer navegador moderno entende. Isso significa zero tempo de build e site que carrega em milissegundos.
Tem gente que acha isso antiquado. Eu acho eficiente. Nem todo projeto precisa de Next.js e React. Às vezes vanilla resolve.

Próximos Passos

Tô pensando em adicionar uma calculadora de tempo mais genérica, não só pra trabalho. Tipo cronometrar estudos, exercícios, qualquer atividade.
Também quero implementar metas. Você define que quer trabalhar X horas na semana, e a ferramenta mostra quanto falta. Simples mas motivador.
E quem sabe versão mobile nativa? PWA tá funcionando legal, mas app nativo tem vantagens. Notificações, widgets, integração melhor com sistema.

Conclusão

Construir uma calculadora de horas trabalhadas foi um desses projetos que começou pra resolver problema próprio e virou ferramenta de verdade.
Se você é freelancer, autônomo, ou simplesmente quer controlar melhor seu tempo, recomendo fazer algo similar. Ou usar ferramentas existentes, tem várias boas por aí.
O importante é ter controle do seu tempo. Porque no fim das contas, tempo é literalmente dinheiro quando você trabalha por hora.
E se você construir algo assim, compartilha! Sempre tem gente precisando das mesmas soluções que você.

Top comments (1)

Collapse
 
kaike_m profile image
Kaike Maróstica

Fala mestre! Bom ver outros BRs freelancers! Estou começando minha carreira como freelancer webdev e, se interessar, poderíamos manter contato pra trocar ideias, experiências ou, quem sabe, até se ajudar em projetos!