Skip to content

Commit 9584279

Browse files
fullstackNRJfullstackNRJ
committed
day 24
1 parent 141baab commit 9584279

File tree

4 files changed

+134
-1
lines changed

4 files changed

+134
-1
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,5 @@ Motivate yourself to code daily till 30 days, and see the magic!
3939
| [Day 20](./each%20day%20build%20day!/Day%2020/) | [Sticky Nav](./each%20day%20build%20day!/Day%2020/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2020/README.md/) |
4040
| [Day 21](./each%20day%20build%20day!/Day%2021/) | [Speech Recognition](./each%20day%20build%20day!/Day%2021/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2021/README.md/) |
4141
| [Day 22](./each%20day%20build%20day!/Day%2022/) | [Not to do list](./each%20day%20build%20day!/Day%2022/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2022/README.md/) |
42-
| [Day 23](./each%20day%20build%20day!/Day%2023/) | [Speedometer and Compass](./each%20day%20build%20day!/Day%2023/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2023/README.md/) |
42+
| [Day 23](./each%20day%20build%20day!/Day%2023/) | [Speedometer and Compass](./each%20day%20build%20day!/Day%2023/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2023/README.md/) |
43+
| [Day 24](./each%20day%20build%20day!/Day%2024/) | [Pointer Highlighter](./each%20day%20build%20day!/Day%2024/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2024/README.md/) |

‎each day build day!/Day 24/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Mouse Pointer Highlight
2+
3+
A simple and intutive template in which a highlighter follows your mousepointer everywhere on the screen where there's a text
4+
achieved by using html, css and Js.
5+
6+
# Challenges
7+
- getBoundingClientRect();
8+
- Scroll object
9+
- CSS3 classes

‎each day build day!/Day 24/index.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Text Highlight 🔆 </title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
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>
19+
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>
27+
28+
29+
<script>
30+
const allLinks = document.querySelectorAll('a');
31+
const highlight = document.createElement('span');
32+
highlight.classList.add('highlight');
33+
document.body.appendChild(highlight);
34+
35+
function highlightLink(){
36+
//get the hight and width of the target element
37+
const targetData = this.getBoundingClientRect();
38+
console.log(targetData)
39+
40+
//get the absolute position of element from top & left
41+
42+
//add the scrollY units to it
43+
const scrollYBy = window.scrollY;
44+
const scrollXBy = window.scrollX;
45+
const pointerCoords = {
46+
height:targetData.height,
47+
width:targetData.width,
48+
top:targetData.top + scrollYBy,
49+
left:targetData.left + scrollXBy
50+
}
51+
52+
//finally the apply the highlight class
53+
highlight.style.width = `${pointerCoords.width}px`;
54+
highlight.style.height = `${pointerCoords.height}px`;
55+
highlight.style.transform = `translate(${pointerCoords.left}px, ${pointerCoords.top}px)`;
56+
}
57+
58+
allLinks.forEach(link => link.addEventListener('mouseenter',highlightLink))
59+
</script>
60+
</body>
61+
</html>

‎each day build day!/Day 24/styles.css

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
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; /* Important! */
12+
font-family: sans-serif;
13+
background:
14+
linear-gradient(45deg, rgb(88, 32, 51) 0%, hsla(340, 100%, 55%, 0) 70%),
15+
linear-gradient(135deg, rgb(25, 41, 90) 10%, hsla(225, 95%, 50%, 0) 80%),
16+
linear-gradient(225deg, rgb(16, 87, 40) 10%, hsla(140, 90%, 50%, 0) 80%),
17+
linear-gradient(315deg, rgb(87, 62, 26) 100%, hsla(35, 95%, 55%, 0) 70%);
18+
}
19+
20+
.wrapper {
21+
margin: 0 auto;
22+
max-width: 500px;
23+
font-size: 20px;
24+
line-height: 2;
25+
position: relative;
26+
}
27+
28+
a {
29+
text-decoration: none;
30+
color: black;
31+
background: rgba(0,0,0,0.05);
32+
border-radius: 20px;
33+
}
34+
35+
.highlight {
36+
transition: all 0.2s;
37+
border-bottom: 2px solid white;
38+
position: absolute;
39+
top: 0;
40+
background: white;
41+
left: 0;
42+
z-index: -1;
43+
border-radius: 20px;
44+
display: block;
45+
box-shadow: 0 0 10px rgba(0,0,0,0.2);
46+
}
47+
48+
.menu {
49+
padding: 0;
50+
display: flex;
51+
list-style: none;
52+
justify-content: center;
53+
margin:100px 0;
54+
}
55+
56+
.menu a {
57+
display: inline-block;
58+
padding: 5px;
59+
margin: 0 20px;
60+
color: black;
61+
}
62+

0 commit comments

Comments
 (0)