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 e20d50f

Browse files
Day 22 - Follow Along Link Highlighter
1 parent f0de580 commit e20d50f

File tree

6 files changed

+143
-0
lines changed

6 files changed

+143
-0
lines changed

‎22_day/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>22 Day</title>
7+
<link rel="stylesheet" href="main.css">
8+
</head>
9+
10+
<body>
11+
12+
<nav>
13+
<ul class="menu">
14+
<li><a href="">Home</a></li>
15+
<li><a href="">Order Status</a></li>
16+
<li><a href="">Tweets</a></li>
17+
<li><a href="">Read Our History</a></li>
18+
<li><a href="">Contact Us</a></li>
19+
</ul>
20+
</nav>
21+
22+
<div class="wrapper">
23+
<p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Est <a href="">explicabo</a> unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!</p>
24+
<p>Aspernatur sapiente quae sint <a href="">soluta</a> modi, atque praesentium laborum pariatur earum <a href="">quaerat</a> cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.</p>
25+
<p>Cum ipsam quod, incidunt sit ex <a href="">tempore</a> placeat maxime <a href="">corrupti</a> possimus <a href="">veritatis</a> ipsum fugit recusandae est doloremque? Hic, <a href="">quibusdam</a>, nulla.</p>
26+
<p>Esse quibusdam, ad, ducimus cupiditate <a href="">nulla</a>, quae magni odit <a href="">totam</a> ut consequatur eveniet sunt quam provident sapiente dicta neque quod.</p>
27+
<p>Aliquam <a href="">dicta</a> sequi culpa fugiat <a href="">consequuntur</a> pariatur optio ad minima, maxime <a href="">odio</a>, distinctio magni impedit tempore enim repellendus <a href="">repudiandae</a> quas!</p>
28+
</div>
29+
30+
<script src="main.js"></script>
31+
</body>
32+
33+
</html>

‎22_day/main.css

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
html {
2+
box-sizing: border-box;
3+
}
4+
5+
*, *:before, *:after {
6+
box-sizing: inherit;
7+
}
8+
9+
body {
10+
min-height: 100vh;
11+
margin: 0;
12+
/* Important! */
13+
font-family: sans-serif;
14+
background: url('https://picsum.photos/1500/1000/?random') center no-repeat;
15+
}
16+
17+
.wrapper {
18+
margin: 0 auto;
19+
max-width: 500px;
20+
font-size: 20px;
21+
line-height: 2;
22+
position: relative;
23+
}
24+
25+
a {
26+
text-decoration: none;
27+
color: black;
28+
background: rgba(0, 0, 0, 0.05);
29+
border-radius: 20px;
30+
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #ddd 50%);
31+
background-position: -0% 0;
32+
background-size: 200% auto;
33+
transition: background-position 0.6s ease-out;
34+
}
35+
36+
a:hover {
37+
background-position: -100% 0;
38+
}
39+
40+
.highlight {
41+
transition: all 0.3s;
42+
border-bottom: 2px solid white;
43+
position: absolute;
44+
top: 0;
45+
background: white;
46+
left: 0;
47+
z-index: -1;
48+
border-radius: 20px;
49+
display: block;
50+
box-shadow: 5px 3px 9px 1px rgba(0, 0, 0, 0.5);
51+
}
52+
53+
.menu {
54+
padding: 0;
55+
display: flex;
56+
list-style: none;
57+
justify-content: center;
58+
margin: 100px 0;
59+
}
60+
61+
.menu a {
62+
display: inline-block;
63+
padding: 5px;
64+
margin: 0 20px;
65+
color: black;
66+
}

‎22_day/main.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const triggers = document.querySelectorAll('a');
2+
const highlight = document.createElement('span');
3+
highlight.classList.add('highlight');
4+
document.body.append(highlight);
5+
6+
function highlightLink() {
7+
8+
console.log(`Link text is: %c${this.text || ''}`, 'color:green;font-weight:bold');
9+
10+
const linkCoords = this.getBoundingClientRect();
11+
console.log(linkCoords);
12+
13+
const coords = {
14+
width: linkCoords.width,
15+
height: linkCoords.height,
16+
top: linkCoords.top + window.scrollY,
17+
left: linkCoords.left + window.scrollX
18+
};
19+
20+
highlight.style.width = `${coords.width}px`;
21+
highlight.style.height = `${coords.height}px`;
22+
highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
23+
24+
}
25+
26+
triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));

‎22_day/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "gum",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "scripts.js",
6+
"scripts": {
7+
"start" : "browser-sync start --directory --server --files '*.css, *.html, *.js'"
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"devDependencies": {
12+
"browser-sync": "^2.12.5"
13+
}
14+
}

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,3 +127,6 @@ Learned about native [SpeechRecognition](https://developer.mozilla.org/en-US/doc
127127

128128
### Day 21: 8 Jul 2018
129129
Worked on Device Orientation using Chrome sensors devtools. Also learned about Geolocation & Orientation Api. Unlike desktops, mobile devices commonly use GPS hardware to detect location.
130+
131+
### Day 22: 9 Jul 2018
132+
Learned about `Element.getBoundingClientRect()` method and worked on some css effects.

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
<a class="active" href="./19_day/index.html">19 Day</a>
3131
<a class="active" href="./20_day/index.html">20 Day</a>
3232
<a class="active" href="./21_day/index.html">21 Day</a>
33+
<a class="active" href="./22_day/index.html">22 Day</a>
3334
</div>
3435
</body>
3536

0 commit comments

Comments
(0)

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