day 16

pouyio · pouyio · commit 0d419393ac94 · 2017-06-21T20:55:00.000+02:00
diff --git a/16-text-shadow/README.md b/16-text-shadow/README.md
@@ -0,0 +1,2 @@
+# CSS Text Shadow Mouse Move Effect
+Watch this challenge live in [codepen](https://codepen.io/pouyio/full/mwweaq/).
diff --git a/16-text-shadow/app.js b/16-text-shadow/app.js
@@ -0,0 +1,21 @@
+window.onload = () => {
+ const body = document.querySelector('body');
+ const text = document.querySelector('.text');
+ const walk = 100;
+
+ const shadow = (e) => {
+   const {offsetWidth: width, offsetHeight: height} = body;
+   let {offsetX: x, offsetY: y} = e;
+   if(this !== e.target){
+     x = x + e.target.offsetLeft;
+     y = y + e.target.offsetTop;
+   }
+
+   const xWalk = Math.round(x/width * walk) - (walk / 2);
+   const yWalk = Math.round(y/width * walk) - (walk / 2);
+
+   console.log(xWalk, yWalk);
+   text.style.textShadow = `${xWalk}px ${yWalk}px 0 red`;
+ }
+ body.addEventListener('mousemove', shadow);
+}
diff --git a/16-text-shadow/index.html b/16-text-shadow/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Text Shadow Mouse Move Effect</title>
+    <style media="screen">
+      body{
+        font-family: sans-serif;
+        font-size: 1.8em;
+        color: #383838;
+        min-height: 100vh;
+        margin: 0;
+        padding: 1em;
+        box-sizing: border-box;
+        background-color: #e7e4e4;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+      }
+    </style>
+  </head>
+  <body>
+    <h1 class="text">Chimichanga 🌮</h1>
+    <script type="text/javascript" src="./app.js">
+    </script>
+  </body>
+</html>
diff --git a/16-text-shadow/style.css b/16-text-shadow/style.css
@@ -0,0 +1,41 @@
+body {
+    font-family: sans-serif;
+    color: #383838;
+    font-size: 1.5rem;
+    min-height: 100vh;
+    padding: 1em;
+    box-sizing: border-box;
+    background-color: #e7e4e4;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.content {
+  text-align: justify;
+}
+
+img {
+  width: 220px;
+  height: auto;
+  padding: .8em;
+  opacity: 0;
+  transition: all .5s;
+}
+
+.al-right {
+  float: right;
+  padding-right: 0;
+}
+
+.al-left {
+  float: left;
+  padding-left: 0;
+}
+
+.active {
+  opacity: 1;
+}
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ My goal is simply to learn the basics by doing many simple things rather than st
 13. [x] [Slide in on Scroll](./13-slide-in-on-scroll) - [Codepen](http://codepen.io/pouyio/full/ENzdzv/)
 14. [x] [JavaScript References vs. Copying](./14-reference-copying) - [Codepen](https://codepen.io/pouyio/pen/wegbpP)
 15. [x] [LocalStorage](./15-localStorage) - [Codepen](https://codepen.io/pouyio/full/XgRpOd/)
-16. [ ] Mouse Move Shadow
+16. [x] [CSS Text Shadow Mouse Move Effect](./16-text-shadow) - [Codepen](https://codepen.io/pouyio/full/mwweaq/)
 17. [ ] Sort Without Articles
 18. [ ] Adding Up Times with Reduce
 19. [ ] Webcam Fun

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# CSS Text Shadow Mouse Move Effect`
	`2`	`+Watch this challenge live in [codepen](https://codepen.io/pouyio/full/mwweaq/).`