Crie Sua Própria Ferramenta De Calculadora De Datas

by carolinasantoss in Circuits > Tools

13 Views, 0 Favorites, 0 Comments

Crie Sua Própria Ferramenta De Calculadora De Datas

Whisk_2de318452b016c5809c4616ca129be8adr.jpeg

Você já precisou calcular o número exato de dias entre duas datas? Seja para prazos jurídicos, planejamento de projetos, cálculo de férias ou apenas para contar dias até um evento especial, ferramentas precisas de cálculo de datas são essenciais.

Neste projeto, você aprenderá a criar uma calculadora de datas online usando HTML, CSS e JavaScript. Ao final, você terá uma ferramenta funcional capaz de:

  1. Calcular dias entre duas datas
  2. Somar ou subtrair dias de uma data específica
  3. Considerar anos bissextos automaticamente
  4. Funcionar em dispositivos móveis e desktop

Esta é uma ótima prática para iniciantes em desenvolvimento web, e você também pode transformá-la em uma aplicação profissional.

Para ver um exemplo avançado de date calculator pronto para uso, visite este link.

Passo 1: Entendendo a Lógica do Cálculo de Datas

Antes de escrever código, precisamos entender a lógica:

Em JavaScript, cada data pode ser convertida em um timestamp (milissegundos desde 1º de janeiro de 1970). Quando subtraímos duas datas, obtemos a diferença em milissegundos.

Fórmula para calcular dias:


Diferença em Dias = (Data2 - Data1) / (1000 × 60 × 60 × 24)

Isso converte milissegundos em dias. Navegadores modernos já lidam automaticamente com:

  1. Anos bissextos
  2. Diferentes quantidades de dias em meses (28 a 31)
  3. Ajustes de fuso horário

Passo 2: Estrutura Básica do HTML

Crie um arquivo chamado index.html e adicione:


<!DOCTYPE html>
<html>
<head>
<title>Calculadora de Datas</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<h1>Calculadora de Datas</h1>

<label>Data Inicial:</label>
<input type="date" id="startDate">

<label>Data Final:</label>
<input type="date" id="endDate">

<button onclick="calculateDays()">Calcular</button>

<h2 id="result"></h2>
</div>

<script src="script.js"></script>
</body>
</html>

Isso cria dois campos de entrada de datas, um botão e um espaço para mostrar o resultado.

Passo 3: Estilizando com CSS

Crie style.css:


body {
font-family: Arial, sans-serif;
background: #f4f6f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
width: 350px;
text-align: center;
}

input, button {
width: 100%;
padding: 10px;
margin: 10px 0;
}

button {
background: #007BFF;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background: #0056b3;
}

Passo 4: Lógica com JavaScript

Crie script.js:


function calculateDays() {
const start = new Date(document.getElementById("startDate").value);
const end = new Date(document.getElementById("endDate").value);

if (!start || !end) {
document.getElementById("result").innerText = "Selecione ambas as datas.";
return;
}

const difference = end - start;
const days = difference / (1000 * 60 * 60 * 24);

document.getElementById("result").innerText =
"Diferença: " + Math.abs(days) + " dias";
}

Agora sua calculadora calcula a diferença entre datas de forma simples e precisa.


Supplies

Passo 5: Adicionando Função de Adição/Subtração de Dias


function addDays() {
const baseDate = new Date(document.getElementById("startDate").value);
const numberOfDays = 10; // Exemplo

baseDate.setDate(baseDate.getDate() + numberOfDays);

document.getElementById("result").innerText =
"Nova Data: " + baseDate.toDateString();
}

Você pode criar um campo de entrada para que o usuário defina o número de dias a adicionar ou subtrair.

Passo 6: Dias Úteis (Avançado)


function calculateBusinessDays(start, end) {
let count = 0;
let current = new Date(start);

while (current <= end) {
const day = current.getDay();
if (day !== 0 && day !== 6) { // Ignora sábados e domingos
count++;
}
current.setDate(current.getDate() + 1);
}

return count;
}

Você pode melhorar incluindo feriados nacionais em um array e excluindo-os do cálculo.


Passo 7: Recursos Adicionais

Após construir a calculadora básica, você pode:

  1. Criar contadores regressivos
  2. Mostrar semanas e meses equivalentes
  3. Armazenar cálculos anteriores
  4. Implementar modo escuro
  5. Publicar online via GitHub Pages, Netlify ou Vercel

Para ver uma date calculator avançada e pronta para uso, acesse nosso site.

Conclusão

Agora você tem uma calculadora de datas funcional, perfeita para:

  1. Desenvolvedores iniciantes
  2. Planejamento de projetos
  3. RH, jurídico e finanças
  4. Contagem de datas pessoais

Com este projeto, você aprende a criar ferramentas úteis para o dia a dia e pode expandi-lo com recursos mais complexos no futuro.