Skip to content

Commit 0cedd54

Browse files
daviskamaudaviskamau
authoredMay 1, 2024··
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

+52
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

+156
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+

‎Calendar/style.css

+297
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
:root {
2+
--dark-text: #f8fbff;
3+
--light-body: #f3f8fe;
4+
--light-main: #fdfdfd;
5+
--light-second: #c3c2c8;
6+
--light-hover: #f0f0f0;
7+
--light-text: #151426;
8+
--light-btn: #9796f0;
9+
--blue: #0000ff;
10+
--white: #fff;
11+
--shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
12+
--font-family: consolas;
13+
}
14+
* {
15+
padding: 0;
16+
margin: 0;
17+
box-sizing: border-box;
18+
}
19+
html,
20+
body {
21+
place-items: center;
22+
font-family: var(--font-family);
23+
background:linear-gradient(to right, #9796f0, #fbc7d4);
24+
overflow: hidden;
25+
}
26+
.contianer {
27+
width: max-content;
28+
height: max-content;
29+
position: relative;
30+
display: flex;
31+
padding: 2% 0px 0px 0px;
32+
justify-content: center;
33+
top: 10%;
34+
right: 0%;
35+
width: 100%;
36+
height: 100%;
37+
}
38+
.calendar {
39+
height: 610px;
40+
width: max-content;
41+
background-color: white;
42+
border-radius: 25px;
43+
overflow: hidden;
44+
padding: 30px 50px 0px 50px;
45+
}
46+
.calendar {
47+
box-shadow: var(--shadow);
48+
}
49+
.calendar-header {
50+
background: #9796f0;
51+
display: flex;
52+
justify-content: space-between;
53+
align-items: center;
54+
font-weight: 700;
55+
color: var(--white);
56+
padding: 10px;
57+
}
58+
.calendar-body {
59+
pad: 10px;
60+
}
61+
.calendar-week-days {
62+
display: grid;
63+
grid-template-columns: repeat(7, 1fr);
64+
font-weight: 600;
65+
cursor: pointer;
66+
color:rgb(104, 104, 104);
67+
}
68+
.calendar-week-days div:hover {
69+
color:black;
70+
transform: scale(1.2);
71+
transition: all .2s ease-in-out;
72+
}
73+
.calendar-week-days div {
74+
display: grid;
75+
place-items: center;
76+
color: var(--bg-second);
77+
height: 50px;
78+
}
79+
.calendar-days {
80+
display: grid;
81+
grid-template-columns: repeat(7, 1fr);
82+
gap: 2px;
83+
color: var(--color-txt);
84+
}
85+
.calendar-days div {
86+
width: 37px;
87+
height: 33px;
88+
display: flex;
89+
align-items: center;
90+
justify-content: center;
91+
padding: 5px;
92+
position: relative;
93+
cursor: pointer;
94+
animation: to-top 1s forwards;
95+
}
96+
.month-picker {
97+
padding: 5px 10px;
98+
border-radius: 10px;
99+
cursor: pointer;
100+
}
101+
.month-picker:hover {
102+
background-color: var(--color-hover);
103+
}
104+
.month-picker:hover {
105+
color: var(--color-txt);
106+
}
107+
.year-picker {
108+
display: flex;
109+
align-items: center;
110+
}
111+
.year-change {
112+
height: 30px;
113+
width: 30px;
114+
border-radius: 50%;
115+
display: grid;
116+
place-items: center;
117+
margin: 0px 10px;
118+
cursor: pointer;
119+
}
120+
.year-change:hover {
121+
background-color: var(--light-btn);
122+
transition:all .2s ease-in-out ;
123+
transform: scale(1.12);
124+
}
125+
.year-change:hover pre {
126+
color: var(--bg-body);
127+
}
128+
.calendar-footer {
129+
padding: 10px;
130+
display: flex;
131+
justify-content: flex-end;
132+
align-items: center;
133+
}
134+
#year:hover{
135+
cursor: pointer;
136+
transform: scale(1.2);
137+
transition: all 0.2 ease-in-out;
138+
}
139+
.calendar-days div span {
140+
position: absolute;
141+
}
142+
.calendar-days div:hover {
143+
transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
144+
background-color: #fbc7d4;
145+
border-radius: 20%;
146+
color: var(--dark-text);
147+
}
148+
.calendar-days div.current-date {
149+
color: var(--dark-text);
150+
background-color: var(--light-btn);
151+
border-radius: 20%;
152+
}
153+
.month-list {
154+
position: relative;
155+
left: 0;
156+
top: -50px;
157+
background-color: #ebebeb;
158+
color: var(--light-text);
159+
display: grid;
160+
grid-template-columns: repeat(3, auto);
161+
gap: 5px;
162+
border-radius: 20px;
163+
}
164+
.month-list > div {
165+
display: grid;
166+
place-content: center;
167+
margin: 5px 10px;
168+
transition: all 0.2s ease-in-out;
169+
}
170+
.month-list > div > div {
171+
border-radius: 15px;
172+
padding: 10px;
173+
cursor: pointer;
174+
}
175+
.month-list > div > div:hover {
176+
background-color:var(--light-btn);
177+
color: var(--dark-text);
178+
transform: scale(0.9);
179+
transition: all 0.2s ease-in-out;
180+
}
181+
.month-list.show {
182+
visibility: visible;
183+
pointer-events: visible;
184+
transition: 0.6s ease-in-out;
185+
animation: to-left .71s forwards;
186+
}
187+
.month-list.hideonce{
188+
visibility: hidden;
189+
}
190+
.month-list.hide {
191+
animation: to-right 1s forwards;
192+
visibility: none;
193+
pointer-events: none;
194+
}
195+
.date-time-formate {
196+
width: max-content;
197+
height: max-content;
198+
font-family: Dubai Light, Century Gothic;
199+
position: relative;
200+
display: inline;
201+
top: 140px;
202+
justify-content: center;
203+
}
204+
.day-text-formate {
205+
font-family: Microsoft JhengHei UI;
206+
font-size: 1.4rem;
207+
padding-right: 5%;
208+
border-right: 3px solid #9796f0;
209+
position: absolute;
210+
left: -1rem;
211+
}
212+
.date-time-value {
213+
display: block;
214+
height: max-content;
215+
width: max-content;
216+
position: relative;
217+
left: 40%;
218+
top: -18px;
219+
text-align: center;
220+
}
221+
.time-formate {
222+
font-size: 1.5rem;
223+
}
224+
.time-formate.hideTime {
225+
animation: hidetime 1.5s forwards;
226+
}
227+
.day-text-formate.hidetime {
228+
animation: hidetime 1.5s forwards;
229+
}
230+
.date-formate.hideTime {
231+
animation: hidetime 1.5s forwards;
232+
}
233+
.day-text-formate.showtime{
234+
animation: showtime 1s forwards;
235+
}
236+
.time-formate.showtime {
237+
animation: showtime 1s forwards;
238+
}
239+
.date-formate.showtime {
240+
animation: showtime 1s forwards;
241+
}
242+
@keyframes to-top {
243+
0% {
244+
transform: translateY(0);
245+
opacity: 0;
246+
}
247+
100% {
248+
transform: translateY(100%);
249+
opacity: 1;
250+
}
251+
}
252+
@keyframes to-left {
253+
0% {
254+
transform: translatex(230%);
255+
opacity: 1;
256+
}
257+
100% {
258+
transform: translatex(0);
259+
opacity: 1;
260+
}
261+
}
262+
@keyframes to-right {
263+
10% {
264+
transform: translatex(0);
265+
opacity: 1;
266+
}
267+
100% {
268+
transform: translatex(-150%);
269+
opacity: 1;
270+
}
271+
}
272+
@keyframes showtime {
273+
0% {
274+
transform: translatex(250%);
275+
opacity: 1;
276+
}
277+
100% {
278+
transform: translatex(0%);
279+
opacity: 1;
280+
}
281+
}
282+
@keyframes hidetime {
283+
0% {
284+
transform: translatex(0%);
285+
opacity: 1;
286+
}
287+
100% {
288+
transform: translatex(-370%);
289+
opacity: 1;
290+
}
291+
}
292+
@media (max-width:375px) {
293+
.month-list>div{
294+
295+
margin: 5px 0px;
296+
}
297+
}

0 commit comments

Comments
 (0)
Please sign in to comment.