From bca1696d87aefe14255352e79cb26f18c687f995 Mon Sep 17 00:00:00 2001
From: Julianne Halversen <juliannehalversen@gmail.com>
Date: Mon, 21 Oct 2019 16:03:22 -0600
Subject: [PATCH 1/2] Added custom directive

---
 src/App.vue                       |  2 +-
 src/developers/JulieHalversen.vue | 17 +++++++++++++++--
 src/main.js                       | 28 +++++++++++++++++++++++++++-
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2d7763b..174b5c0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,7 +21,7 @@ export default {
   components: {
     PersonGrid,
     AustinWright,
-    JulieHalversen
+    JulieHalversen,
   },
   data: () => {
     return {
diff --git a/src/developers/JulieHalversen.vue b/src/developers/JulieHalversen.vue
index a0f7bf7..7a24dd9 100644
--- a/src/developers/JulieHalversen.vue
+++ b/src/developers/JulieHalversen.vue
@@ -1,6 +1,6 @@
 <template>
-<div>
-        <h1>Julie Halversen</h1>
+<div v-box-shadow:offset>
+        <h1 v-box-shadow:offset='30'>Julie Halversen</h1>
 
     <v-form
       ref="form"
@@ -66,6 +66,19 @@
 
 <script>
 export default {
+  components: {
+    /*
+    directives: {
+      focus: {
+        // directive definition
+        inserted: function (el) {
+          el.focus()
+        }
+      },
+    } */
+  },
+
+
 data: () => ({
     valid: true,
     name: '',
diff --git a/src/main.js b/src/main.js
index a21e528..2e9bf3b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,7 +4,33 @@ import vuetify from './plugins/vuetify';
 
 Vue.config.productionTip = false
 
+
+Vue.directive('box-shadow', {
+  bind(el, binding) {
+    let blur = 0
+    if (binding.modifiers['blur']) {
+      blur = 5
+    }
+    if (binding.arg === 'offset') {
+      el.style.boxShadow = `0px ${binding.value}px ${blur}px #222`
+    } else {
+      el.style.boxShadow = `5px 5px 5px #666`
+    }
+  }
+})
+
+
+// Register a global custom directive called `v-focus`
+Vue.directive('focus', {
+  // When the bound element is inserted into the DOM...
+  inserted: function (el) {
+    // Focus the element
+    el.focus()
+  }
+})
+
+
 new Vue({
   vuetify,
   render: h => h(App)
-}).$mount('#app')
+}).$mount('#app')
\ No newline at end of file

From 06fd52b2bb86591f6ecae46a79ea84641610694c Mon Sep 17 00:00:00 2001
From: Julianne Halversen <juliannehalversen@gmail.com>
Date: Mon, 21 Oct 2019 19:24:49 -0600
Subject: [PATCH 2/2] Added custom directive

---
 src/developers/JulieHalversen.vue | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/developers/JulieHalversen.vue b/src/developers/JulieHalversen.vue
index 7a24dd9..a62c053 100644
--- a/src/developers/JulieHalversen.vue
+++ b/src/developers/JulieHalversen.vue
@@ -1,6 +1,6 @@
 <template>
 <div v-box-shadow:offset>
-        <h1 v-box-shadow:offset='30'>Julie Halversen</h1>
+        <h1 v-local-highlight:background.delayed="'grey'">Julie Halversen</h1>
 
     <v-form
       ref="form"
@@ -66,19 +66,27 @@
 
 <script>
 export default {
-  components: {
-    /*
-    directives: {
-      focus: {
-        // directive definition
-        inserted: function (el) {
-          el.focus()
+  directives: {
+    'local-highlight': {
+      bind(el, binding, vnode) {
+        var delay = 0;
+        if (binding.modifiers['delayed']) {
+          delay = 3000;
         }
-      },
-    } */
+        setTimeout(() => {
+          if(binding.arg == 'background') {
+            el.style.backgroundColor = binding.value;
+            el.style.color = 'white';
+          } else {
+            el.style.color = binding.value;
+          }
+        }, delay);
+      }
+    }
   },
+  components: {
 
-
+  },
 data: () => ({
     valid: true,
     name: '',