-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
134 lines (97 loc) · 3.2 KB
/
main.js
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
// INPUT ELEMENTS
const inputYear = document.querySelector('#year');
const inputMonth = document.querySelector('#month');
const inputDay = document.querySelector('#day');
// OUTPUT ELEMENTS
const outputYear = document.querySelector('#output-year');
const outputMonth = document.querySelector('#output-month');
const outputDay = document.querySelector('#output-day');
const submitBtn = document.querySelector('#submit-btn');
let isValid = false;
const errorDay = document.querySelector('.error-day');
const errorMonth = document.querySelector('.error-month');
const errorYear = document.querySelector('.error-year');
inputDay.addEventListener('input', (e) => {
if(+inputDay.value > 31) {
errorDay.textContent = 'must be a valid Date';
inputDay.style.borderColor = 'red';
isValid = false;
return;
} else {
isValid = true;
errorDay.textContent = '';
inputDay.style.borderColor = 'purple';
}
if(+inputDay.value === 0) {
isValid = false;
errorDay.textContent = 'This field is required';
inputDay.style.borderColor = 'red';
isValid = false;
return;
} else {
errorDay.textContent = '';
inputDay.style.borderColor = 'purple';
}
});
inputMonth.addEventListener('input', (e) => {
if(+inputMonth.value > 12) {
errorMonth.textContent = 'must be a valid Date';
inputMonth.style.borderColor = 'red';
isValid = false;
return;
} else {
isValid = true;
errorMonth.textContent = '';
inputMonth.style.borderColor = 'purple';
}
if(+inputMonth.value === 0) {
isValid = false;
errorMonth.textContent = 'This field is required';
inputMonth.style.borderColor = 'red';
isValid = false;
return;
} else {
errorMonth.textContent = '';
inputMonth.style.borderColor = 'purple';
}
});
inputYear.addEventListener('input', (e) => {
if(+inputYear.value > 2023) {
errorYear.textContent = 'must be a valid Date';
inputYear.style.borderColor = 'red';
isValid = false;
return;
} else {
isValid = true;
errorYear.textContent = '';
inputYear.style.borderColor = 'purple';
}
if(+inputYear.value === 0) {
isValid = false;
errorYear.textContent = 'This field is required';
inputYear.style.borderColor = 'red';
isValid = false;
return;
} else {
errorYear.textContent = '';
inputYear.style.borderColor = 'purple';
}
});
function CalculateDate() {
if (isValid) {
let birthday = `${inputMonth.value}/${inputDay.value}/${inputYear.value}`;
console.log(birthday);
let birthdayObj = new Date(birthday);
let ageDiffMill = Date.now() - birthdayObj;
let ageDate = new Date(ageDiffMill);
let ageYears = ageDate.getUTCFullYear() - 1970;
let ageMonth = ageDate.getUTCMonth();
let ageDay = ageDate.getUTCDay() - 1;
outputDay.textContent = ageDay;
outputMonth.textContent = ageMonth;
outputYear.textContent = ageYears;
} else {
alert("error");
}
};
submitBtn.addEventListener('click', CalculateDate);