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 6e02075

Browse files
day 17 ready
1 parent 4b06e6a commit 6e02075

File tree

2 files changed

+19
-23
lines changed

2 files changed

+19
-23
lines changed

‎day17/STARTER-FILES/styles.css

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

33
body {
44
padding: 0;
55
margin: 0;
66
min-width: 100vw;
77
min-height: 100vh;
8-
font-family: 'Roboto', sans-serif;
8+
font-family: "Roboto", sans-serif;
9+
margin-bottom: 150px;
910
}
1011

1112
h1 {
@@ -29,13 +30,13 @@ h3 {
2930
}
3031

3132
a {
32-
color: #F40082;
33+
color: #f40082;
3334
font-weight: 800;
3435
}
3536

3637
blockquote {
3738
font-size: 1.625rem;
38-
color: #8B8B8B;
39+
color: #8b8b8b;
3940
max-width: 466px;
4041
margin: 38px auto;
4142
}
@@ -71,7 +72,6 @@ caption {
7172
grid-column-gap: 20px;
7273
}
7374

74-
7575
aside {
7676
grid-column: 2 / span 2;
7777
}
@@ -87,7 +87,7 @@ aside .table-of-contents {
8787
font-size: 0.875rem;
8888
letter-spacing: 3px;
8989
padding-left: 24px;
90-
margin-bottom: 30px;;
90+
margin-bottom: 30px;
9191
}
9292

9393
aside ul {
@@ -103,8 +103,8 @@ aside ul li {
103103
}
104104

105105
aside ul li.selected {
106-
color: #F40082;
107-
border-left: 2px solid #F40082
106+
color: #f40082;
107+
border-left: 2px solid #f40082;
108108
}
109109

110110
aside ul li a {
@@ -115,7 +115,7 @@ aside ul li a {
115115

116116
aside ul li.selected a {
117117
font-weight: bold;
118-
color: #F40082;
118+
color: #f40082;
119119
}
120120

121121
main {
@@ -131,4 +131,4 @@ p {
131131

132132
img {
133133
max-width: 100%;
134-
}
134+
}

‎day17/app.js

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,26 @@
11
const hrefs = document.querySelectorAll('li a[href="#"]');
2-
// console.log(hrefs[0]);
32

43
const headers = document.querySelectorAll("main h3");
5-
// console.log(headers[0]);
64
const mainPart = document.querySelector("main");
75
const content = document.querySelector(".content");
86

9-
// const hrefCoords = [180, 240, 285, 345, 414, 463, 532, 582, 640];
10-
11-
let bounding = [];
12-
137
for (let i = 0; i < hrefs.length; i++) {
148
hrefs[i].addEventListener("click", function (event) {
159
event.preventDefault();
1610
headers[i].scrollIntoView({
1711
behavior: "smooth",
18-
block: "start"
12+
block: "center"
1913
});
20-
deleteActiveItem(hrefs);
21-
this.parentNode.classList.add("selected");
2214
});
2315
}
2416

25-
const array = {};
26-
2717
window.addEventListener("scroll", function () {
28-
headers.forEach((item) => isInViewport(item) && console.log(item));
18+
for (let b = 0; b < hrefs.length; b++) {
19+
if (isInViewport(headers[b])) {
20+
deleteActiveItem(hrefs);
21+
hrefs[b].parentNode.classList.add("selected");
22+
}
23+
}
2924
});
3025

3126
function isInViewport(elem) {
@@ -34,7 +29,8 @@ function isInViewport(elem) {
3429
bounding.top >= 0 &&
3530
bounding.left >= 0 &&
3631
bounding.bottom <=
37-
(window.innerHeight || document.documentElement.clientHeight) &&
32+
(window.innerHeight - 350 ||
33+
document.documentElement.clientHeight - 350) &&
3834
bounding.right <=
3935
(window.innerWidth || document.documentElement.clientWidth)
4036
);

0 commit comments

Comments
(0)

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