Skip to content

Commit 85196e3

Browse files
sahandghavidelsahandghavidel
committed
add month calnder project
1 parent ec18736 commit 85196e3

File tree

3 files changed

+180
-0
lines changed

3 files changed

+180
-0
lines changed

‎projects/month-calender/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Calendar</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
11+
/>
12+
<link
13+
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"
14+
rel="stylesheet"
15+
/>
16+
</head>
17+
<body>
18+
<div class="container">
19+
<div class="calendar">
20+
<div class="month">
21+
<div class="date">
22+
<h1></h1>
23+
<p></p>
24+
</div>
25+
</div>
26+
<div class="weekdays">
27+
<div>Mon</div>
28+
<div>Tue</div>
29+
<div>Wed</div>
30+
<div>Thu</div>
31+
<div>Fri</div>
32+
<div>Sat</div>
33+
<div>Sun</div>
34+
</div>
35+
<div class="days"></div>
36+
</div>
37+
</div>
38+
39+
<script src="script.js"></script>
40+
</body>
41+
</html>

‎projects/month-calender/script.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
const date = new Date();
2+
3+
const monthDays = document.querySelector(".days");
4+
5+
const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
6+
7+
const firstDayIndex = date.getDay();
8+
9+
const months = [
10+
"January",
11+
"February",
12+
"March",
13+
"April",
14+
"May",
15+
"June",
16+
"July",
17+
"August",
18+
"September",
19+
"October",
20+
"November",
21+
"December",
22+
];
23+
24+
document.querySelector(".date h1").innerText = months[date.getMonth()];
25+
26+
document.querySelector(".date p").innerText = new Date().toDateString();
27+
28+
let days = "";
29+
30+
for (let i = firstDayIndex - 1; i > 0; i--) {
31+
days += `<div class="empty"></div>`;
32+
}
33+
34+
for (let i = 1; i <= lastDay; i++) {
35+
if (i === new Date().getDate() && date.getMonth() === new Date().getMonth()) {
36+
days += `<div class="today">${i}</div>`;
37+
} else {
38+
days += `<div>${i}</div>`;
39+
}
40+
}
41+
42+
monthDays.innerHTML = days;

‎projects/month-calender/style.css‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: sans-serif;
6+
}
7+
8+
.container {
9+
width: 100%;
10+
height: 100vh;
11+
background-color: salmon;
12+
color: lightgray;
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
}
17+
18+
.calendar {
19+
width: 450px;
20+
height: 520px;
21+
background-color: black;
22+
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
23+
border-radius: 10px;
24+
}
25+
26+
.month {
27+
width: 100%;
28+
height: 120px;
29+
background-color: lightseagreen;
30+
display: flex;
31+
justify-content: center;
32+
align-items: center;
33+
padding: 0 20px;
34+
text-align: center;
35+
border-radius: 10px 10px 0 0;
36+
}
37+
38+
.month i {
39+
font-size: 25px;
40+
cursor: pointer;
41+
}
42+
43+
.month h1 {
44+
font-size: 30px;
45+
font-weight: 400;
46+
text-transform: uppercase;
47+
letter-spacing: 2px;
48+
margin-bottom: 1px;
49+
}
50+
51+
.month p {
52+
font-size: 16px;
53+
54+
}
55+
56+
.weekdays {
57+
width: 100%;
58+
height: 50px;
59+
display: flex;
60+
}
61+
62+
.weekdays div {
63+
font-size: 15px;
64+
font-weight: bold;
65+
letter-spacing: 1px;
66+
width: 100%;
67+
display: flex;
68+
align-items: center;
69+
justify-content: center;
70+
}
71+
72+
.days {
73+
width: 100%;
74+
display: flex;
75+
flex-wrap: wrap;
76+
padding: 2px;
77+
}
78+
79+
.days div {
80+
font-size: 14px;
81+
margin: 3px;
82+
width: 57.5px;
83+
height: 50px;
84+
display: flex;
85+
justify-content: center;
86+
align-items: center;
87+
}
88+
89+
.days div:hover:not(.empty) {
90+
border: 2px solid gray;
91+
cursor: pointer;
92+
}
93+
94+
.today {
95+
background-color: lightseagreen;
96+
97+
}

0 commit comments

Comments
 (0)