Skip to content

Commit 6a07f7e

Browse files
nitishdayalnitishdayal
committed
Challenge 16 complete
Commented answer key, created documentation for challenge, and updated root readme.
1 parent 7f39bd7 commit 6a07f7e

File tree

4 files changed

+185
-65
lines changed

4 files changed

+185
-65
lines changed

Diff for: ‎exercises/16 - Mouse Move Shadow/README.md

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
# Exercise 15: Mouse Move Shadow
2+
Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)
3+
Last Commit Date: Dec 23, 2016
4+
5+
We're given an HTML document with a `div` element containing an `h1` element.
6+
The `h1` element has a `textShadow` _style property_ which we want to manipulate
7+
depending on the user's current mouse location. Write the necessary JavaScript
8+
code to bring functionality to this page.
9+
10+
## Guide
11+
12+
In the `<script>` tag, we're provided with three `const` (constant) variables: one
13+
which references the `div` element with class `hero`, one which references the `h1` element
14+
that is a _child_ of the `hero div` element, and one which is defined as a _number literal_
15+
value. We'll use the latter when we're calculating the `textShadow` distance.
16+
17+
Begin by attaching an _event listener_ to the `hero` div element that will listen for
18+
'mousemove' events and call upon an _event handler_ function (for brevity's sake, let's
19+
name that function 'shadow'). Declare a `const` variable 'shadow' and define it as
20+
an _arrow function_ that accepts an event as a parameter; this is our _event handler_ function.
21+
In the function body, set two `const` variables as the `offsetWidth` and `offsetHeight`
22+
properties of the `hero` div element. Then declare two `let` variables and define them
23+
as the _event's `offsetX` and `offsetY` properties_. If the event's current target
24+
is **different** from the event's originating target (the `hero` div element), increment
25+
the x & y coordinates by the distance between the current target element and the event's
26+
**originating target** using the `offsetLeft` and `offsetTop` properties of the original
27+
target.
28+
29+
Declare two `const` variables and define them as the stretch distance for the `textShadow` property
30+
on the x & y axis, respectively. Finally, update the `textShadow` style property of the `h1`
31+
element, using the two `const` variables we just defined as the _horizontal and vertical_
32+
positions of the shadow.
33+
34+
**Steps:**
35+
36+
1. Attach an _event listener_ to the `hero` div element that will call upon a provided _event handler_
37+
on the 'mousemove' event.
38+
39+
```JavaScript
40+
hero.addEventListener('mousemove', shadow)
41+
```
42+
43+
2. Declare a `const` with a name that matches the event listener's _event handler_ function,
44+
and define it as an _arrow function_ which accepts an event as a parameter.
45+
46+
```JavaScript
47+
const shadow = (e) = > { /* ... */ }
48+
```
49+
50+
- Declare two `const` variables and define them as the `offsetWidth`
51+
and `offSetHeight` properties of the `hero` div HTML element.
52+
53+
```JavaScript
54+
// Get the width & height properties of the 'hero' div in relation
55+
// to the window object
56+
const { offsetWidth: width, offsetHeight: height } = hero;
57+
```
58+
59+
- Declare two `let` variables and define them as the distance of the
60+
mouse from the event's _target element_ on the x & y axis.
61+
62+
```JavaScript
63+
// Using ES6 object deconstruction
64+
let { offsetX: x, offsetY: y } = e;
65+
66+
// Without ES6 object deconstruction
67+
let x = e.offsetX, y = e.offsetY;
68+
```
69+
70+
- If the element that is the _current target_ of the event differs
71+
from the event's _originating target_, increment the values of the two previously declared
72+
variables by the distance between the originating target and the current target on the
73+
x & y axis.
74+
75+
```JavaScript
76+
if (e.currentTarget !== e.target) {
77+
x += e.target.offsetLeft
78+
y += e.target.offsetTop
79+
}
80+
81+
```
82+
83+
- Calculate the stretch distance for the element's shadow on the x & y axis
84+
85+
```JavaScript
86+
const xWalk = Math.round((x / width * walk) - (walk / 2)),
87+
yWalk = Math.round((y / height * walk) - (walk / 2));
88+
```
89+
90+
- Update the `textShadow` _style property_ of the `h1` element.
91+
92+
```JavaScript
93+
text.style.textShadow = `
94+
${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
95+
${-xWalk}px ${yWalk}px 0 rgba(0,255,255,0.7),
96+
${yWalk}px ${-xWalk}px 0 rgba(0,255,0,0.7),
97+
${-yWalk}px ${-xWalk}px 0 rgba(0,0,255,0.7)
98+
`;
99+
```
100+
101+
3. Last step is best step! Wrap up **all** of the JavaScript code inside an IIFE
102+
(_immediately invoked function expression_).
103+
104+
# Nothing like the sweet smell of success in the morning! 😎

Diff for: ‎exercises/16 - Mouse Move Shadow/index-start.html

-63
This file was deleted.

Diff for: ‎exercises/16 - Mouse Move Shadow/index.html

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Mouse Shadow</title>
7+
</head>
8+
9+
<body>
10+
11+
<div class="hero">
12+
<h1 contenteditable>🔥WOAH!</h1>
13+
</div>
14+
15+
<style>
16+
html {
17+
color:black;
18+
font-family: sans-serif;
19+
}
20+
21+
.hero {
22+
min-height: 100vh;
23+
display:flex;
24+
justify-content: center;
25+
align-items: center;
26+
color:black;
27+
}
28+
29+
30+
h1 {
31+
text-shadow: 10px 10px 0 rgba(0,0,0,1);
32+
font-size: 100px;
33+
}
34+
</style>
35+
36+
<script>
37+
(() => {
38+
const hero = document.querySelector('.hero'),
39+
text = hero.querySelector('h1'),
40+
walk = 500;
41+
42+
const shadow = (e) => {
43+
// Get the width & height properties of the 'hero' div
44+
const { offsetWidth: width, offsetHeight: height } = hero;
45+
// Get the distance of the mouse from the event's target node in X and Y
46+
// coordinates
47+
let { offsetX: x, offsetY: y } = e;
48+
49+
50+
// If the element that the mouse is hovering over is different than the event's target element...
51+
if (e.currentTarget !== e.target) {
52+
// Increment the x & y coordinates by the distance between the element and the event's target
53+
// element on the x & y axis.
54+
x += e.target.offsetLeft;
55+
y += e.target.offsetTop;
56+
}
57+
58+
// Calculate the stretch distance for the element's shadow
59+
// on the x & y axis
60+
const xWalk = Math.round((x / width * walk) - (walk / 2)),
61+
yWalk = Math.round((y / height * walk) - (walk / 2));
62+
63+
// Update the 'textShadow' style property of the h1 element
64+
text.style.textShadow = `
65+
${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
66+
${-xWalk}px ${yWalk}px 0 rgba(0,255,255,0.7),
67+
${yWalk}px ${-xWalk}px 0 rgba(0,255,0,0.7),
68+
${-yWalk}px ${-xWalk}px 0 rgba(0,0,255,0.7)
69+
`;
70+
71+
}
72+
// Attach event listener
73+
hero.addEventListener('mousemove', shadow);
74+
})();
75+
76+
</script>
77+
</body>
78+
79+
</html>

Diff for: ‎readme.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# JavaScript30 - 30 Day JavaScript Challenge
22
Nitish Dayal, Software & Applications Developer
3-
Last Commit Date: Dec 19, 2016
3+
Last Commit Date: Dec 23, 2016
44

55
> Course created by [Wes Bos](https://github.com/wesbos)
66
> Join the challenge (for free!) here - [JavaScript30](https://javascript30.com/account)
@@ -43,7 +43,7 @@ Completed written guides can be found in the corresponding challenge directory (
4343
13. [x] ~~[Slide in on Scroll](./exercises/13\ -\ Slide\ in\ on\ Scroll/)~~
4444
14. [x] ~~[JavaScript References vs. Copying](./exercises/14\ -\ JavaScript\ References\ VS\ Copying)~~
4545
15. [x] ~~[LocalStorage](./exercises/15\ -\ LocalStorage/)~~
46-
16. [ ] Mouse Move Shadow
46+
16. [x] ~~[Mouse Move Shadow](./exercises/16\ Mouse\ Move\ Shadow/)~~
4747
17. [ ] Sort Without Articles
4848
18. [ ] Adding Up Times with Reduce
4949
19. [ ] Webcam Fun

0 commit comments

Comments
 (0)