Skip to content

Commit cb61482

Browse files
author
vanntile
committed
Day 22
1 parent 3508a2c commit cb61482

7 files changed

Lines changed: 56 additions & 92 deletions

File tree

‎22 - Follow Along Link Highlighter/index-FINISHED.html‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

‎22 - Follow Along Link Highlighter/index-START.html‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎22 - Follow Along Link Highlighter/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>👀👀👀Follow Along Nav</title>
7+
<link rel="stylesheet" href="style.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="script.js"></script>
31+
</body>
32+
33+
</html>

‎22 - Follow Along Link Highlighter/script.js‎

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

‎22 - Follow Along Link Highlighter/style.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@ body {
1212
font-family: sans-serif;
1313
background:
1414
linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
15-
linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
16-
linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
17-
linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
15+
linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%)
1816
}
1917

2018
.wrapper {

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ Check the course at [https://JavaScript30.com](https://JavaScript30.com)
3939
and my [notes](./19%20-%20Webcam%20Fun)
4040
20. [ ] Speech Detection (not working in browsers for now)
4141
21. [ ] Geolocation
42-
22. [ ] Follow Along Link Highlighter
42+
22. [x] [Follow Along Link Highlighter](https://vanntile.github.io/JavaScript30/22%20-%20Follow%20Along%20Link%20Highlighter)
4343
23. [ ] Speech Synthesis
4444
24. [ ] Sticky Nav
4545
25. [ ] Event Capture, Propagation, Bubbling, and Once

‎assets/img/22 - Follow Along Link Highlighter.png‎

814 KB
Loading

0 commit comments

Comments
 (0)