This repository has been archived by the owner on May 11, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathday-counter.html
99 lines (82 loc) · 3.03 KB
/
day-counter.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Day Counter</title>
</head>
<body>
<h2>Day Counter</h2>
<label for="startDate">Start Date:</label>
<input type="date" id="startDate" name="startDate" />
<label for="endDate">End Date:</label>
<input type="date" id="endDate" name="endDate" />
<button onclick="countDays()">Count Days</button>
<h2>Count Days from a Date</h2>
<label for="initialDate">Start Date:</label>
<input type="date" id="initialDate" value="2023-12-17" />
<label for="daysToAdd">Add days:</label>
<input type="number" id="daysToAdd" value="15" />
<button onclick="countDays2()">Count Days</button>
<h3>Results</h3>
<p id="dayCountResult"></p>
<script>
function countDays2() {
const startDate = new Date(
document.getElementById("initialDate").value
);
const addDays = parseInt(document.getElementById("daysToAdd").value);
const resultDate = new Date(startDate);
resultDate.setDate(resultDate.getDate() + addDays);
const resultText = `${formatDate(
resultDate
)} is the date ${addDays} days after ${formatDate(
startDate
)}, including ${formatDate(startDate)}.`;
document.getElementById("dayCountResult").textContent = resultText;
}
function formatDate(date) {
const options = {
year: "numeric",
month: "long",
day: "numeric",
weekday: "long",
};
return date.toLocaleDateString("en-US", options);
}
function countDays() {
const startDate = new Date(document.getElementById("startDate").value);
const endDate = new Date(document.getElementById("endDate").value);
// Check if the dates are valid
if (!(startDate.getTime() && endDate.getTime())) {
alert("Please enter valid dates.");
return;
}
if (startDate > endDate) {
alert("End Date must be after the Start Date.");
return;
}
const diffTime = endDate - startDate;
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
const startDayOfWeek = startDate.toLocaleDateString("en-US", {
weekday: "long",
});
const endDayOfWeek = endDate.toLocaleDateString("en-US", {
weekday: "long",
});
const startDateFormatted = startDate.toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
});
const endDateFormatted = endDate.toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
});
document.getElementById(
"dayCountResult"
).textContent = `There are ${diffDays} days between ${startDateFormatted} (${startDayOfWeek}) and ${endDateFormatted} (${endDayOfWeek})`;
}
</script>
</body>
</html>