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 9584279

Browse files
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)

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