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 ce67029

Browse files
day 14 js ready
1 parent 5329dd3 commit ce67029

File tree

4 files changed

+151
-36
lines changed

4 files changed

+151
-36
lines changed

‎day14/STARTER-FILES/app.js

Whitespace-only changes.

‎day14/STARTER-FILES/index.html

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,39 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="UTF-8">
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
87
<title>14 - Calendar Picker || Advent of JavaScript</title>
98
<link rel="stylesheet" href="./styles.css" />
10-
</head>
9+
</head>
1110

12-
<body>
11+
<body>
1312
<div class="wrapper">
13+
<div class="previous">
14+
<img src="images/previous.svg" alt="Previous" />
15+
</div>
1416

15-
<div class="previous">
16-
<img src="images/previous.svg" alt="Previous" />
17-
</div>
17+
<div class="month">December</div>
1818

19-
<div class="month">December</div>
19+
<div class="next">
20+
<img src="images/next.svg" alt="Next" />
21+
</div>
2022

21-
<div class="next">
22-
<img src="images/next.svg" alt="Next" />
23-
</div>
23+
<p class="date"></p>
2424

25-
<div class="day-of-week">S</div>
26-
<div class="day-of-week">M</div>
27-
<div class="day-of-week">T</div>
28-
<div class="day-of-week">W</div>
29-
<div class="day-of-week">T</div>
30-
<div class="day-of-week">F</div>
31-
<div class="day-of-week">S</div>
25+
<div class="day-of-week">S</div>
26+
<div class="day-of-week">M</div>
27+
<div class="day-of-week">T</div>
28+
<div class="day-of-week">W</div>
29+
<div class="day-of-week">T</div>
30+
<div class="day-of-week">F</div>
31+
<div class="day-of-week">S</div>
3232

33-
<div></div>
34-
<div></div>
35-
<div> </div>
33+
<section class="days">
34+
<div class="prev-date">28</div>
35+
<div class="prev-date">29</div>
36+
<div class="prev-date">30</div>
3637
<div>1</div>
3738
<div>2</div>
3839
<div>3</div>
@@ -64,10 +65,9 @@
6465
<div>29</div>
6566
<div>30</div>
6667
<div>31</div>
67-
<div></div>
68-
68+
<divclass="next-date">1</div>
69+
</section>
6970
</div>
70-
<script src="app.js"></script>
71-
</body>
72-
73-
</html>
71+
<script src="/day14/app.js"></script>
72+
</body>
73+
</html>

‎day14/STARTER-FILES/styles.css

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,33 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Oswald&family=Roboto:wght@400;700&display=swap');
1+
@import url("https://fonts.googleapis.com/css2?family=Oswald&family=Roboto:wght@400;700&display=swap");
22

33
body {
44
margin: 0;
55
padding: 0;
66
min-width: 100vw;
77
min-height: 100vh;
8-
background: #FBFBFB;
8+
background: #fbfbfb;
99
display: flex;
1010
align-items: center;
1111
justify-content: center;
12-
font-family: 'Roboto', sans-serif;
12+
font-family: "Roboto", sans-serif;
1313
font-size: 2rem;
1414
}
1515

16-
.wrapper {
16+
.wrapper,
17+
.days {
1718
display: grid;
1819
grid-template-columns: repeat(7, minmax(60px, 1fr));
1920
max-width: 660px;
2021
grid-gap: 30px;
21-
background: #FFFFFF;
22+
background: #ffffff;
23+
}
24+
25+
.wrapper {
2226
box-shadow: 0px 2.3128px 39.3176px rgba(0, 0, 0, 0.25);
2327
border-radius: 24px;
2428
padding: 75px 100px;
29+
position: absolute;
30+
top: 50px;
2531
}
2632

2733
div {
@@ -30,15 +36,23 @@ div {
3036
display: flex;
3137
align-items: center;
3238
justify-content: center;
39+
box-sizing: border-box;
3340
}
3441

3542
.month {
3643
grid-column: span 5;
37-
font-family: 'Oswald', sans-serif;
44+
font-family: "Oswald", sans-serif;
3845
text-transform: uppercase;
3946
line-height: 32px;
4047
}
4148

49+
.date {
50+
grid-column: span 7;
51+
line-height: 20px;
52+
font-size: 20px;
53+
margin: -25px 0px;
54+
}
55+
4256
.day-of-week {
4357
font-weight: bold;
4458
}
@@ -49,3 +63,13 @@ div {
4963
height: 60px;
5064
width: 60px;
5165
}
66+
67+
.prev-date,
68+
.next-date {
69+
opacity: 0.3;
70+
}
71+
72+
div:hover:not(.today) {
73+
border: 0.2rem solid #777;
74+
cursor: pointer;
75+
}

‎day14/app.js

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
const date = new Date();
2+
3+
const renderCalendar = () => {
4+
date.setDate(1);
5+
6+
const monthDays = document.querySelector(".days");
7+
8+
const month = date.getMonth();
9+
const lastDay = new Date(
10+
date.getFullYear(),
11+
date.getMonth() + 1,
12+
0
13+
).getDate();
14+
const prevLastDay = new Date(
15+
date.getFullYear(),
16+
date.getMonth(),
17+
0
18+
).getDate();
19+
20+
const firstDayIndex = date.getDay();
21+
22+
const lastDayIndex = new Date(
23+
date.getFullYear(),
24+
date.getMonth() + 1,
25+
0
26+
).getDay();
27+
28+
const nextDays = 7 - lastDayIndex - 1;
29+
30+
const months = [
31+
"January",
32+
"February",
33+
"March",
34+
"April",
35+
"May",
36+
"June",
37+
"July",
38+
"August",
39+
"September",
40+
"October",
41+
"November",
42+
"December"
43+
];
44+
45+
document.querySelector(".month").innerHTML =
46+
months[month] + " " + date.getFullYear();
47+
document.querySelector(".date").innerHTML = new Date().toDateString();
48+
49+
let days = "";
50+
51+
for (let x = firstDayIndex; x > 0; x--) {
52+
days += `<div class="prev-date">${prevLastDay - x + 1}</div>`;
53+
}
54+
55+
for (i = 1; i <= lastDay; i++) {
56+
if (
57+
i === new Date().getDate() &&
58+
date.getMonth() === new Date().getMonth() &&
59+
date.getFullYear() === new Date().getFullYear()
60+
) {
61+
days += `<div class='today'>${i}</div>`;
62+
} else {
63+
days += `<div>${i}</div>`;
64+
}
65+
}
66+
67+
for (let j = 1; j <= nextDays; j++) {
68+
days += `<div class="next-date">${j}</div>`;
69+
monthDays.innerHTML = days;
70+
}
71+
};
72+
73+
function prevMonth() {
74+
date.setMonth(date.getMonth() - 1);
75+
renderCalendar();
76+
}
77+
78+
function nextMonth() {
79+
date.setMonth(date.getMonth() + 1);
80+
renderCalendar();
81+
}
82+
83+
document.querySelector(".previous").addEventListener("click", prevMonth);
84+
document.querySelector(".next").addEventListener("click", nextMonth);
85+
86+
renderCalendar();
87+
88+
document.body.onkeydown = (e) => {
89+
if (e.code === "ArrowLeft") prevMonth();
90+
if (e.code === "ArrowRight") nextMonth();
91+
};

0 commit comments

Comments
(0)

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