From 8c4e0ea3ad6f26f800e1801478b82fe3a7cd0f32 Mon Sep 17 00:00:00 2001
From: Jose Cisneros <josecis0216@gmail.com>
Date: Mon, 7 Oct 2019 15:45:38 -0600
Subject: [PATCH 1/3] moved Jose.vue to right location

---
 src/{ => developers}/Jose.vue | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/{ => developers}/Jose.vue (100%)

diff --git a/src/Jose.vue b/src/developers/Jose.vue
similarity index 100%
rename from src/Jose.vue
rename to src/developers/Jose.vue

From 00f2b48647a153991395d24725a0c867436d1bf1 Mon Sep 17 00:00:00 2001
From: Jose Cisneros <josecis0216@gmail.com>
Date: Mon, 21 Oct 2019 17:48:21 -0600
Subject: [PATCH 2/3] component with form validation

---
 src/App.vue             |  10 ++--
 src/developers/Jose.vue | 103 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 109 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3ef72da..d0c494b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,20 +11,22 @@
 </template>
 
 <script>
+import Jose from './developers/Jose'
 import PersonGrid from './components/PersonGrid'
 import AustinWright from './developers/AustinWright.vue'
-import JulieHalversen from './developers/JulieHalversen.vue';
-
+import JulieHalversen from './developers/JulieHalversen.vue'
 import ThorAnderson from './developers/ThorAnderson.vue'
 //import { people } from './assets/people'
 import axios from 'axios'
+
 export default {
   name: 'App',
   components: {
     PersonGrid,
     AustinWright,
-    JulieHalversen
-    ThorAnderson
+    JulieHalversen,
+    ThorAnderson,
+    Jose,
   },
   data: () => {
     return {
diff --git a/src/developers/Jose.vue b/src/developers/Jose.vue
index 9e71e47..ed119b7 100644
--- a/src/developers/Jose.vue
+++ b/src/developers/Jose.vue
@@ -3,10 +3,113 @@
     <v-content>
         <h1>Jose Cisneros</h1>
     </v-content>
+    <v-row align="center">
+    <v-row justify="space-around">
+      <v-switch v-model="valid" class="ma-4" label="Valid" readonly></v-switch>
+      <v-switch v-model="lazy" class="ma-4" label="Lazy"></v-switch>
+    </v-row>
+    <v-form
+      ref="form"
+      v-model="valid"
+      :lazy-validation="lazy"
+    >
+      <v-text-field
+        v-model="name"
+        :counter="10"
+        :rules="nameRules"
+        label="Name"
+        required
+      ></v-text-field>
+
+      <v-text-field
+        v-model="email"
+        :rules="emailRules"
+        label="E-mail"
+        required
+      ></v-text-field>
+
+      <v-select
+        v-model="select"
+        :items="items"
+        :rules="[v => !!v || 'Item is required']"
+        label="Item"
+        required
+      ></v-select>
+
+      <v-checkbox
+        v-model="checkbox"
+        :rules="[v => !!v || 'You must agree to continue!']"
+        label="Do you agree?"
+        required
+      ></v-checkbox>
+
+      <v-btn
+        :disabled="!valid"
+        color="success"
+        class="mr-4"
+        @click="validate"
+      >
+        Validate
+      </v-btn>
+
+      <v-btn
+        color="error"
+        class="mr-4"
+        @click="reset"
+      >
+        Reset Form
+      </v-btn>
+
+      <v-btn
+        color="warning"
+        @click="resetValidation"
+      >
+        Reset Validation
+      </v-btn>
+    </v-form>
+  </v-row>
   </v-app>
 </template>
 
 <script>
+  export default {
+    data: () => ({
+      valid: true,
+      name: '',
+      nameRules: [
+        v => !!v || 'Name is required',
+        v => (v && v.length <= 10) || 'Name must be less than 10 characters',
+      ],
+      email: '',
+      emailRules: [
+        v => !!v || 'E-mail is required',
+        v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
+      ],
+      select: null,
+      items: [
+        'Item 1',
+        'Item 2',
+        'Item 3',
+        'Item 4',
+      ],
+      checkbox: false,
+      lazy: false,
+    }),
+
+    methods: {
+      validate () {
+        if (this.$refs.form.validate()) {
+          this.snackbar = true
+        }
+      },
+      reset () {
+        this.$refs.form.reset()
+      },
+      resetValidation () {
+        this.$refs.form.resetValidation()
+      },
+    },
+  }
 </script>
 
 <style>

From 3b7f9584acac8e79344ba950fb5ac764f8dcfdf6 Mon Sep 17 00:00:00 2001
From: Jose Cisneros <josecis0216@gmail.com>
Date: Wed, 23 Oct 2019 09:52:04 -0600
Subject: [PATCH 3/3] Component with directive

---
 src/App.vue             |  1 +
 src/developers/Jose.vue | 25 +------------------------
 src/main.js             | 16 ++++++++++++++++
 3 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d0c494b..316f3d6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@
     <v-content  class="d-flex flex-column align-center">
       <person-grid :people="people"></person-grid>
      <!--  <v-btn @click="getData">Get Data!!</v-btn> -->
+     <jose v-highlight></jose>
       <austin-wright></austin-wright>
       <julie-halversen></julie-halversen>
       <thor-anderson></thor-anderson>
diff --git a/src/developers/Jose.vue b/src/developers/Jose.vue
index ed119b7..386ee65 100644
--- a/src/developers/Jose.vue
+++ b/src/developers/Jose.vue
@@ -1,18 +1,10 @@
 <template>
   <v-app>
-    <v-content>
-        <h1>Jose Cisneros</h1>
-    </v-content>
     <v-row align="center">
-    <v-row justify="space-around">
-      <v-switch v-model="valid" class="ma-4" label="Valid" readonly></v-switch>
-      <v-switch v-model="lazy" class="ma-4" label="Lazy"></v-switch>
-    </v-row>
     <v-form
       ref="form"
-      v-model="valid"
-      :lazy-validation="lazy"
     >
+      <h1>Jose Cisneros</h1>
       <v-text-field
         v-model="name"
         :counter="10"
@@ -28,21 +20,6 @@
         required
       ></v-text-field>
 
-      <v-select
-        v-model="select"
-        :items="items"
-        :rules="[v => !!v || 'Item is required']"
-        label="Item"
-        required
-      ></v-select>
-
-      <v-checkbox
-        v-model="checkbox"
-        :rules="[v => !!v || 'You must agree to continue!']"
-        label="Do you agree?"
-        required
-      ></v-checkbox>
-
       <v-btn
         :disabled="!valid"
         color="success"
diff --git a/src/main.js b/src/main.js
index a21e528..f7303a4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,22 @@ import vuetify from './plugins/vuetify';
 
 Vue.config.productionTip = false
 
+Vue.directive('highlight', {
+  bind(el, binding) {
+    var colors = ['blue', 'yellow', 'green', 'red']
+    var currentColor = 0
+
+    function changeColor() {
+      --currentColor
+      if(currentColor < 0) {
+        currentColor = colors.length - 1
+      }
+      el.style.color = colors[(currentColor + 1) % colors.length]
+    }
+    setInterval(changeColor, 1000)
+  }
+})
+
 new Vue({
   vuetify,
   render: h => h(App)