Skip to content

Commit 0cedd54

Browse files
daviskamaudaviskamau
authored
Add files via upload
1 parent 7055dcf commit 0cedd54

File tree

3 files changed

+505
-0
lines changed

3 files changed

+505
-0
lines changed

‎Calendar/index.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>CALENDAR</title>
7+
<link rel="stylesheet" href="style.css">
8+
<script src="script.js" defer></script>
9+
</head>
10+
<body>
11+
<div class="contianer">
12+
<div class="calendar">
13+
<div class="calendar-header">
14+
<span class="month-picker" id="month-picker"> May </span>
15+
<div class="year-picker" id="year-picker">
16+
<span class="year-change" id="pre-year">
17+
<pre><</pre>
18+
</span>
19+
<span id="year">2023 </span>
20+
<span class="year-change" id="next-year">
21+
<pre>></pre>
22+
</span>
23+
</div>
24+
</div>
25+
26+
<div class="calendar-body">
27+
<div class="calendar-week-days">
28+
<div>Sun</div>
29+
<div>Mon</div>
30+
<div>Tue</div>
31+
<div>Wed</div>
32+
<div>Thu</div>
33+
<div>Fri</div>
34+
<div>Sat</div>
35+
</div>
36+
<div class="calendar-days">
37+
</div>
38+
</div>
39+
<div class="calendar-footer">
40+
</div>
41+
<div class="date-time-formate">
42+
<div class="day-text-formate">TODAY</div>
43+
<div class="date-time-value">
44+
<div class="time-formate">02:51:20</div>
45+
<div class="date-formate">23 - july - 2024</div>
46+
</div>
47+
</div>
48+
<div class="month-list"></div>
49+
</div>
50+
</div>
51+
</body>
52+
</html>

‎Calendar/script.js‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
const isLeapYear = (year) => {
2+
return (
3+
(year % 4 === 0 && year % 100 !== 0 && year % 400 !== 0) ||
4+
(year % 100 === 0 && year % 400 === 0)
5+
);
6+
};
7+
const getFebDays = (year) => {
8+
return isLeapYear(year) ? 29 : 28;
9+
};
10+
let calendar = document.querySelector('.calendar');
11+
const month_names = [
12+
'January',
13+
'February',
14+
'March',
15+
'April',
16+
'May',
17+
'June',
18+
'July',
19+
'August',
20+
'September',
21+
'October',
22+
'November',
23+
'December',
24+
];
25+
let month_picker = document.querySelector('#month-picker');
26+
const dayTextFormate = document.querySelector('.day-text-formate');
27+
const timeFormate = document.querySelector('.time-formate');
28+
const dateFormate = document.querySelector('.date-formate');
29+
30+
month_picker.onclick = () => {
31+
month_list.classList.remove('hideonce');
32+
month_list.classList.remove('hide');
33+
month_list.classList.add('show');
34+
dayTextFormate.classList.remove('showtime');
35+
dayTextFormate.classList.add('hidetime');
36+
timeFormate.classList.remove('showtime');
37+
timeFormate.classList.add('hideTime');
38+
dateFormate.classList.remove('showtime');
39+
dateFormate.classList.add('hideTime');
40+
};
41+
42+
const generateCalendar = (month, year) => {
43+
let calendar_days = document.querySelector('.calendar-days');
44+
calendar_days.innerHTML = '';
45+
let calendar_header_year = document.querySelector('#year');
46+
let days_of_month = [
47+
31,
48+
getFebDays(year),
49+
31,
50+
30,
51+
31,
52+
30,
53+
31,
54+
31,
55+
30,
56+
31,
57+
30,
58+
31,
59+
];
60+
61+
let currentDate = new Date();
62+
63+
month_picker.innerHTML = month_names[month];
64+
65+
calendar_header_year.innerHTML = year;
66+
67+
let first_day = new Date(year, month);
68+
69+
70+
for (let i = 0; i <= days_of_month[month] + first_day.getDay() - 1; i++) {
71+
72+
let day = document.createElement('div');
73+
74+
if (i >= first_day.getDay()) {
75+
day.innerHTML = i - first_day.getDay() + 1;
76+
77+
if (i - first_day.getDay() + 1 === currentDate.getDate() &&
78+
year === currentDate.getFullYear() &&
79+
month === currentDate.getMonth()
80+
) {
81+
day.classList.add('current-date');
82+
}
83+
}
84+
calendar_days.appendChild(day);
85+
}
86+
};
87+
88+
let month_list = calendar.querySelector('.month-list');
89+
month_names.forEach((e, index) => {
90+
let month = document.createElement('div');
91+
month.innerHTML = `<div>${e}</div>`;
92+
93+
month_list.append(month);
94+
month.onclick = () => {
95+
currentMonth.value = index;
96+
generateCalendar(currentMonth.value, currentYear.value);
97+
month_list.classList.replace('show', 'hide');
98+
dayTextFormate.classList.remove('hideTime');
99+
dayTextFormate.classList.add('showtime');
100+
timeFormate.classList.remove('hideTime');
101+
timeFormate.classList.add('showtime');
102+
dateFormate.classList.remove('hideTime');
103+
dateFormate.classList.add('showtime');
104+
};
105+
});
106+
107+
(function () {
108+
month_list.classList.add('hideonce');
109+
})();
110+
document.querySelector('#pre-year').onclick = () => {
111+
--currentYear.value;
112+
generateCalendar(currentMonth.value, currentYear.value);
113+
};
114+
document.querySelector('#next-year').onclick = () => {
115+
++currentYear.value;
116+
generateCalendar(currentMonth.value, currentYear.value);
117+
};
118+
119+
let currentDate = new Date();
120+
let currentMonth = { value: currentDate.getMonth() };
121+
let currentYear = { value: currentDate.getFullYear() };
122+
generateCalendar(currentMonth.value, currentYear.value);
123+
124+
const todayShowTime = document.querySelector('.time-formate');
125+
const todayShowDate = document.querySelector('.date-formate');
126+
127+
const currshowDate = new Date();
128+
const showCurrentDateOption = {
129+
year: 'numeric',
130+
month: 'long',
131+
day: 'numeric',
132+
weekday: 'long',
133+
};
134+
const currentDateFormate = new Intl.DateTimeFormat(
135+
'en-US',
136+
showCurrentDateOption
137+
).format(currshowDate);
138+
todayShowDate.textContent = currentDateFormate;
139+
setInterval(() => {
140+
const timer = new Date();
141+
const option = {
142+
hour: 'numeric',
143+
minute: 'numeric',
144+
second: 'numeric',
145+
};
146+
const formateTimer = new Intl.DateTimeFormat('en-us', option).format(timer);
147+
let time = `${`${timer.getHours()}`.padStart(
148+
2,
149+
'0'
150+
)}:${`${timer.getMinutes()}`.padStart(
151+
2,
152+
'0'
153+
)}: ${`${timer.getSeconds()}`.padStart(2, '0')}`;
154+
todayShowTime.textContent = formateTimer;
155+
}, 1000);
156+

0 commit comments

Comments
 (0)