Calculadora de tempo vivido:
Aprenda a criar uma calculadora de tempo vivido com este tutorial completo.
Este projeto consiste em
uma Calculadora que calcula o tempo exato que você já viveu até o momento, ela calcula o tempo em anos, meses, semanas, dias, horas, minutos e segundos.Neste tutorial você vai aprender a fazer uma Calculadora de tempo vivido usando apenas HTML, CSS e JavaScript.
Veja a Calculadora de tempo vivido em funcionamento neste link. Calculadora de tempo vivido.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de Tempo Vivido</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator-container">
<h1>Insira sua data de nascimento</h1>
<form class="birth-date-form">
<input type="datetime-local" data-birth-date />
<button data-calculate-button>Calcular</button>
</form>
<div class="time-lived-container" data-time-lived></div>
</div>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Space Grotesk";
}
body {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
background-color: #F0F8FF;
}
.calculator-container {
width: 100%;
max-width: 730px;
padding: 16px;
display: grid;
grid-template-columns: 1fr;
gap: 16px;
text-align: center;
}
.calculator-container > h1 {
font-size: 32px;
color: rgba(60, 60, 60, 1);
}
.calculator-container > .birth-date-form {
display: flex;
justify-content: center;
gap: 16px;
}
.calculator-container > .birth-date-form > :is(input, button) {
padding: 16px 32px;
outline: 0;
font-size: 16px;
border-radius: 4px;
color: rgba(60, 60, 60, 1);
}
.calculator-container > .birth-date-form > input {
border: 1px solid rgba(150, 150, 150, 1);
}
.calculator-container > .birth-date-form > button {
border: 1px solid #4682B4;
background-color: #4682B4;
cursor: pointer;
}
.calculator-container > .time-lived-container {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.calculator-container > .time-lived-container > p {
font-size: 16px;
color: rgba(60, 60, 60, 1);
font-size: 22px;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
const calculateButton = document.querySelector("[data-calculate-button]");
let interval;
calculateButton.onclick = (event) => {
event.preventDefault();
clearInterval(interval)
renderResult();
};
const renderResult = () => {
const timeLivedElement = document.querySelector("[data-time-lived]");
interval = setInterval(() => {
const birthDateElement = document.querySelector("[data-birth-date]");
if (birthDateElement.value !== "") {
const currentDate = new Date();
const birthDate = new Date(birthDateElement.value);
const result = (currentDate.getTime() - birthDate.getTime()) / 1000;
if (result >= 0) {
const years = Math.floor(result / 31536349);
const months = Math.floor((result / 31536349) * 12);
const weeks = Math.floor(result / 60 / 60 / 24 / 7);
const days = Math.floor(result / 60 / 60 / 24);
const hours = Math.floor(result / 60 / 60);
const minutes = Math.floor(result / 60);
const seconds = Math.floor(result);
timeLivedElement.innerHTML = `
O seu tempo vivido até hoje é de:
${years === 1 ? years + " ano" : years + " anos"}
${months === 1 ? months + " mês" : months + " meses"}
${weeks === 1 ? weeks + " semana" : weeks + " semanas"}
${days === 1 ? days + " dia" : days + " dias"}
${hours === 1 ? hours + " hora" : hours + " horas"}
${minutes === 1 ? minutes + " minuto" : minutes + " minutos"}
${
seconds === 1 ? seconds + " segundo" : seconds + " segundos"
}
`;
} else {
alert("Preencha com uma data de nascimento válida!");
}
} else {
alert("Preencha com a sua data de nascimento!");
}
}, 1000);
};
Agora, com os três arquivos (index.html, style.css, e script.js) criados, você pode abrir o index.html no seu navegador e ver seu projeto funcionando perfeitamente!
Comentários
Postar um comentário
Obrigado pelo seu feedback!