adding latest tutorials

tutorials/events-app/src/views/Home.vue

@@ -10,30 +10,59 @@
             Make sure you check out the upcoming events below:
           </h2>
           <div class="button-block">
-            <button class="button is-xl is-dark">Sign up to browse events</button>
+            <button class="button is-xl is-dark" v-if="dataReady">{{date}}</button>
           </div>
         </div>
+        <!-- <h1 >{{ date }}</h1> -->
+        <h1 v-if="dataReady">{{ date }}</h1>
       </div>
     </section>
-    <img class="blurify" src="https://cdn.auth0.com/blog/vue-meetup/event-banner.png">
+    <!-- <img class="blurify" src="https://cdn.auth0.com/blog/vue-meetup/event-banner.png"> -->
   </div>
 </template>
 <script>
+import moment from 'moment'
 export default {
   name: 'home',
-  components: {},
+  // components: {},
   created() {
-    this.$blurify({
-      images: document.querySelectorAll('.blurify')
+    // console.log(this);
+    // console.log(this.$moment().format("HH:mm:ss"));
+    // this.date = moment().format("HH:mm:ss");
+  },
+  data: function() {
+    return {
+      date: '',
+      dd: '',
+      ddd: '',
+      dataReady: false
+    }
+  },
+  methods: {
+    async logger () {
+      console.log("a string");
+      this.dd = "a first string";
+    },
+    getTime () {
+      console.log("getting time");
+      return moment().format("HH:mm:ss");
+    },
+  },
+  mounted() {
+    console.log("a second string");
+    // await this.logger();
+    setInterval(() => {
+      this.date = this.getTime(), 1000
   });
+    this.dataReady = true;
   }
 }
-
 </script>
 <style lang="scss" scoped>
 .hero {
   text-align: center;
   background-image: url('https://cdn.auth0.com/blog/vue-meetup/event-banner.png');
+  background-image: url('https://face4pets.files.wordpress.com/2018/01/shelter-data-1.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;