Skip to content

Commit bed3bdd

Browse files
wwags33wwags33
committed
Project 22 complete
1 parent de18ffa commit bed3bdd

File tree

3 files changed

+78
-20
lines changed

3 files changed

+78
-20
lines changed

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

+25-20
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,38 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<title>👀👀👀Follow Along Nav</title>
67
<link rel="stylesheet" href="style.css">
78
</head>
9+
810
<body>
911

10-
<nav>
11-
<ul class="menu">
12-
<li><a href="">Home</a></li>
13-
<li><a href="">Order Status</a></li>
14-
<li><a href="">Tweets</a></li>
15-
<li><a href="">Read Our History</a></li>
16-
<li><a href="">Contact Us</a></li>
17-
</ul>
18-
</nav>
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>
1921

20-
<div class="wrapper">
21-
<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>
22-
<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>
23-
<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>
24-
<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>
25-
<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>
26-
</div>
22+
<div class="wrapper">
23+
<p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Est <a href="">explicabo</a> unde natus
24+
necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!</p>
25+
<p>Aspernatur sapiente quae sint <a href="">soluta</a> modi, atque praesentium laborum pariatur earum <a
26+
href="">quaerat</a> cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.</p>
27+
<p>Cum ipsam quod, incidunt sit ex <a href="">tempore</a> placeat maxime <a href="">corrupti</a> possimus <a
28+
href="">veritatis</a> ipsum fugit recusandae est doloremque? Hic, <a href="">quibusdam</a>, nulla.</p>
29+
<p>Esse quibusdam, ad, ducimus cupiditate <a href="">nulla</a>, quae magni odit <a href="">totam</a> ut consequatur
30+
eveniet sunt quam provident sapiente dicta neque quod.</p>
31+
<p>Aliquam <a href="">dicta</a> sequi culpa fugiat <a href="">consequuntur</a> pariatur optio ad minima, maxime <a
32+
href="">odio</a>, distinctio magni impedit tempore enim repellendus <a href="">repudiandae</a> quas!</p>
33+
</div>
2734

28-
<script>
29-
// 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
30-
</script>
35+
<script src="typescripts.js"></script>
3136
</body>
32-
</html>
3337

38+
</html>

‎22 - Follow Along Link Highlighter/typescripts.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
var triggers = document.querySelectorAll('a');
2+
var highlight = document.createElement('span');
3+
highlight.classList.add('highlight');
4+
document.body.append(highlight);
5+
function highlightLink() {
6+
var linkCoords = this.getBoundingClientRect();
7+
var coords = {
8+
width: linkCoords.width,
9+
height: linkCoords.height,
10+
top: linkCoords.top + window.scrollY,
11+
left: linkCoords.left + window.scrollX,
12+
};
13+
highlight.style.width = coords.width + 4 + "px";
14+
highlight.style.height = coords.height + "px";
15+
highlight.style.transform = "translate(" + (coords.left - 2) + "px, " + coords.top + "px)";
16+
}
17+
triggers.forEach(function (a) { return a.addEventListener('mouseenter', highlightLink); });

‎22 - Follow Along Link Highlighter/typescripts.ts

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/**
2+
* JavaScript30 by Wes Bos, https://javascript30.com/
3+
* TypeScript implementation by Will Wager
4+
* Project: Follow Along Link Highlighter
5+
* Concepts: Update and move highlighter with mouseenter;
6+
* getting entered element's location
7+
* Key takeaways: getBoundingClientRect + scroll; css translate transform
8+
* Sidenotes: No additional typing was necessary for TypeScript. Tsc can get the
9+
* propper types from querySelectors when element tags are used;
10+
* One improvement could be adding the transition after the first highlight, so
11+
* it doesn't slide in from the top left.
12+
* Compilation command:
13+
* tsc --removeComments --strictNullChecks --noImplicitAny --target es5 typescripts.ts
14+
*/
15+
16+
// 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
17+
18+
const triggers = document.querySelectorAll('a');
19+
const highlight = document.createElement('span');
20+
highlight.classList.add('highlight');
21+
document.body.append(highlight);
22+
23+
function highlightLink() {
24+
const linkCoords = this.getBoundingClientRect();
25+
const coords = {
26+
width: linkCoords.width,
27+
height: linkCoords.height,
28+
top: linkCoords.top + window.scrollY,
29+
left: linkCoords.left + window.scrollX,
30+
};
31+
highlight.style.width = `${coords.width + 4}px`;
32+
highlight.style.height = `${coords.height}px`;
33+
highlight.style.transform = `translate(${coords.left - 2}px, ${coords.top}px)`;
34+
}
35+
36+
triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));

0 commit comments

Comments
 (0)