Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 85196e3

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /