11<!DOCTYPE html>
22< html lang ="en ">
3-
43< head >
54 < meta charset ="UTF-8 ">
65 < meta http-equiv ="X-UA-Compatible " content ="IE=edge ">
76 < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
87 < title > Age Calculator</ title >
98 < link rel ="stylesheet " href ="style.css ">
109</ head >
11-
1210< body >
13- < div class ="container ">
14- < div class ="calculator ">
15- < h1 > Age Calculator</ h1 >
16- < div class ="input-box ">
17-
18- < input type ="date " id ="date ">
19- < button onclick ="calculateAge() "> Calculate</ button >
20- </ div >
21- < p id ="result "> </ p >
11+ < div class ="container ">
12+ < div class ="calculator ">
13+ < h1 > Age Calculator</ h1 >
14+ < div class ="input-box ">
15+ < input type ="date " id ="date ">
16+ < button onclick ="calculateAge() "> Calculate</ button >
2217 </ div >
23-
18+ < p id =" result " > </ p >
2419 </ div >
20+ </ div >
21+ < script >
22+ let userInput = document . getElementById ( "date" )
23+ userInput . max = new Date ( ) . toISOString ( ) . split ( "T" ) [ 0 ] ;
2524
26- < script >
27- let userInput = document . getElementById ( "date" )
28- userInput . max = new Date ( ) . toISOString ( ) . split ( "T" ) [ 0 ] ;
29-
30- let result = document . getElementById ( "result" ) ;
31-
32- function calculateAge ( ) {
33- let birthDate = new Date ( userInput . value ) ;
34- let d1 = birthDate . getDate ( ) ;
35- let m1 = birthDate . getMonth ( ) + 1 ;
36- let y1 = birthDate . getFullYear ( ) ;
37-
38- let today = new Date ( ) ;
39-
40- let d2 = today . getDate ( ) ;
41- let m2 = today . getMonth ( ) + 1 ;
42- let y2 = today . getFullYear ( ) ;
43-
44- let d3 , m3 , y3 ;
45-
46- y3 = y2 - y1 ;
47- if ( m2 >= m1 ) {
48- m3 = m2 - m1 ;
49- }
50- else {
51- y3 -- ;
52- m3 = 12 + m2 - m1 ;
53- }
54- if ( d2 >= d1 ) {
55- d3 = d2 - d1 ;
56- }
57- else {
58- m3 -- ;
59- d3 = getDaysInMonth ( y1 , m1 ) + d2 - d1 ;
60- }
61- if ( m3 < 0 ) {
62- m3 = 11 ;
63- y3 -- ;
64- }
65- result . innerHTML = `You are <span>${ y3 } </span> years, <span>${ m3 } </span> months and <span>${ d3 } </span> days old ` ;
25+ let result = document . getElementById ( "result" ) ;
26+ function calculateAge ( ) {
27+ let birthDate = new Date ( userInput . value ) ;
28+ let d1 = birthDate . getDate ( ) ;
29+ let m1 = birthDate . getMonth ( ) + 1 ;
30+ let y1 = birthDate . getFullYear ( ) ;
6631
32+ let today = new Date ( ) ;
6733
34+ let d2 = today . getDate ( ) ;
35+ let m2 = today . getMonth ( ) + 1 ;
36+ let y2 = today . getFullYear ( ) ;
6837
38+ let d3 , m3 , y3 ;
6939
40+ y3 = y2 - y1 ;
41+ if ( m2 >= m1 ) {
42+ m3 = m2 - m1 ;
43+ }
44+ else {
45+ y3 -- ;
46+ m3 = 12 + m2 - m1 ;
47+ }
48+ if ( d2 >= d1 ) {
49+ d3 = d2 - d1 ;
7050 }
71- function getDaysInMonth ( year , month ) {
72- return new Date ( year , month , 0 ) . getDate ( ) ;
51+ else {
52+ m3 -- ;
53+ d3 = getDaysInMonth ( y1 , m1 ) + d2 - d1 ;
7354 }
55+ if ( m3 < 0 ) {
56+ m3 = 11 ;
57+ y3 -- ;
58+ }
59+ result . innerHTML = `You are <span>${ y3 } </span> years, <span>${ m3 } </span> months and <span>${ d3 } </span> days old ` ;
7460
75- </ script >
76- </ body >
61+ }
62+ function getDaysInMonth ( year , month ) {
63+ return new Date ( year , month , 0 ) . getDate ( ) ;
64+ }
7765
66+ </ script >
67+ </ body >
7868</ html >
0 commit comments