Ever since the hands of a watch first started to move, people have become captivated by how time affects all aspects of life. For example, you can take one of the most valuable tools in existence for ages – the age calculator. This might be straightforward but remains an effective method of exploring the mysteries of time through highlighting the salient instances that define our experiences as human beings.

 

The Magic of Age Calculators: Understanding Time's Passing

What's an Age Calculator? It's Simple but Amazing

 

An age calculator does something simple: it determines the number of days that took place between the two dates. Nevertheless, this thing does not sound so easy, despite its apparent simplicity: a lot of sense hids behind it. Now people can say the age of something by birthday, anniversary, graduation, for example, but it is also possible to give the age not only in years, months, weeks and days but even in seconds.

HTML Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Age Calculator</title>
</head>
<body>
  <div id="age-calculator">
    <h2>Age Calculator</h2>
    <label for="birth-date">Enter your birthdate:</label>
    <input type="date" id="birth-date">
    <button id="calculate-button">Calculate Age</button>
    <p id="result"></p>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS CODE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
}
 
#age-calculator {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
label {
  display: block;
  margin-bottom: 10px;
}
 
input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
 
button {
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 
button:hover {
  background-color: #0056b3;
}
 
p {
  margin-top: 10px;
  font-weight: bold;
}

Java Script Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
document.addEventListener('DOMContentLoaded', function() {
  const calculateButton = document.getElementById('calculate-button');
  const birthDateInput = document.getElementById('birth-date');
  const resultElement = document.getElementById('result');
 
  calculateButton.addEventListener('click', function() {
    const birthDate = new Date(birthDateInput.value);
    const currentDate = new Date();
 
    const ageInMilliseconds = currentDate - birthDate;
    const ageInSeconds = ageInMilliseconds / 1000;
 
    const seconds = ageInSeconds;
    const minutes = ageInSeconds / 60;
    const hours = ageInSeconds / 3600;
    const days = ageInSeconds / 86400;
    const weeks = days / 7;
    const months = days / 30.44; // Approximate average month length
    const years = days / 365.25; // Approximate average year length
 
    resultElement.innerHTML = `Result<br>
      Age:<br>
      ${Math.floor(years)} years ${Math.floor(months % 12)} months ${Math.floor(days % 30.44)} days<br>
      or ${Math.floor(months)} months ${Math.floor(days % 30.44)} days<br>
      or ${Math.floor(weeks)} weeks ${Math.floor(days % 7)} days<br>
      or ${Math.floor(days)} days<br>
      or ${Math.floor(hours)} hours<br>
      or ${Math.floor(minutes)} minutes<br>
      or ${Math.floor(seconds)} seconds`;
  });
});

 Consider this information as a present for you to use it in development of your online site with an age checker function. Good luck with your project!