-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
244 lines (222 loc) · 9.14 KB
/
index.html
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Age calculator is an online tool with which you can find out your age using your date of birth and the current date. The tool helps to find out the difference in time between two dates. The result is displayed in years, months, weeks, and days. The results are also not affected by the time zone of a person since the tool just tells you the difference in time. The age calculator is based on the common age system, therefore it can be used by everyone."
/>
<title>
Age Calculator - Find your age in days, months, years and more.
</title>
</head>
<body>
<div class="container-xl text-center mb-5">
<header>
<h1 class="display-1 fw-bold mb-2">Age Calculator</h1>
<p class="subtitle">
The Age Calculator can determine the age or interval between two
dates. The calculated age will be displayed in years, months, weeks,
days, hours, minutes, and seconds.
</p>
</header>
</div>
<main class="container mb-3">
<section class="container mb-3">
<div
class="alert alert-success"
role="alert"
id="age-alert"
hidden
></div>
</section>
<section class="container mb-5">
<form id="dob-form">
<section class="container mb-3" id="alert" hidden>
<div class="alert alert-danger" role="alert">
Date of birth can not be greater than age at.
</div>
</section>
<section class="container mb-3">
<fieldset class="row">
<div class="px-1">
<legend>Date of Birth</legend>
</div>
<div class="col px-1">
<label class="visually-hidden" for="dob-day"> Day </label>
<select name="day" id="dob-day" class="form-control"></select>
</div>
<div class="col px-1">
<label class="visually-hidden" for="dob-month"> Month </label>
<select name="month" id="dob-month" class="form-control">
<option value="0" selected>January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
</div>
<div class="col px-1">
<label class="visually-hidden" for="dob-year">Year</label>
<input
class="form-control"
type="number"
id="dob-year"
placeholder="Select your birth year"
value="2002"
/>
</div>
</fieldset>
</section>
<section class="container mb-3">
<fieldset class="row">
<div class="px-1">
<legend>Age at the date of..</legend>
</div>
<div class="col px-1">
<label class="visually-hidden" for="age-at-day"> Day </label>
<select
name="day"
id="age-at-day"
class="form-control"
></select>
</div>
<div class="col px-1">
<label class="visually-hidden" for="age-at-month">
Month
</label>
<select name="month" id="age-at-month" class="form-control">
<option value="0" selected>January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
</div>
<div class="col px-1">
<label class="visually-hidden" for="age-at-year">Year</label>
<input
class="form-control"
type="number"
id="age-at-year"
placeholder="Select your birth year"
value="2022"
/>
</div>
</fieldset>
</section>
<section class="container mb-3">
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary btn-lg">
Calculate Date of Birth
</button>
</div>
</section>
</form>
</section>
<section class="container mb-3" id="age-table" hidden>
<h1>Your age in</h1>
<table class="table table-bordered">
<tbody>
<tr>
<th>years</th>
<td id="years"></td>
</tr>
<tr>
<th>months</th>
<td id="months"></td>
</tr>
<tr>
<th>weeks</th>
<td id="weeks"></td>
</tr>
<tr>
<th>days</th>
<td id="days"></td>
</tr>
<tr>
<th>hours</th>
<td id="hours"></td>
</tr>
<tr>
<th>minutes</th>
<td id="minutes"></td>
</tr>
<tr>
<th>seconds</th>
<td id="seconds"></td>
</tr>
<tr>
<th>milliseconds</th>
<td id="milliseconds"></td>
</tr>
</tbody>
</table>
</section>
<hr />
<section class="container mb-3">
<p>
Age calculator is an online tool with which you can find out your age
using your date of birth and the current date. The tool helps to find
out the difference in time between two dates. The result is displayed
in years, months, weeks, and days. The results are also not affected
by the time zone of a person since the tool just tells you the
difference in time. The age calculator is based on the common age
system, therefore it can be used by everyone.
</p>
<p>
The age of a person can be counted differently in different cultures.
This calculator is based on the most common age system. In this
system, age grows at the birthday. For example, the age of a person
that has lived for 3 years and 11 months is 3 and the age will turn to
4 at his/her next birthday one month later. Most western countries use
this age system.
</p>
<p>
In some cultures, age is expressed by counting years with or without
including the current year. For example, one person who is twenty
years old is the same as one person who is in the twenty-first year of
his/her life. In one of the traditional Chinese age systems, people
are born at age 1 and the age grows up at the Traditional Chinese New
Year instead of birthday. For example, if one baby was born just one
day before the Traditional Chinese New Year, 2 days later, the baby
will be at age 2 even though he/she is only 2 days old.
</p>
<p>
In some situations, the months and days result of this age calculator
may be confusing, especially when the starting date is the end of a
month. For example, we all count Feb. 20 to March 20 to be one month.
However, there are two ways to calculate the age from Feb. 28, 2015 to
Mar. 31, 2015. If thinking Feb. 28 to Mar. 28 as one month, then the
result is one month and 3 days. If thinking both Feb. 28 and Mar. 31
as the end of the month, then the result is one month. Both
calculation results are reasonable. Similar situations exist for dates
like Apr. 30 to May 31, May 30 to June 30, etc. The confusion comes
from the uneven number of days in different months. In our
calculation, we used the former method.
</p>
</section>
</main>
<hr />
<footer class="d-grid" style="place-items: center">
<p>© Copyright 2022. MulitCalculator. All rights reserved.</p>
</footer>
<script type="module" src="/main.js"></script>
</body>
</html>