Added Vue Input Mask and some css

.gitignore

@@ -1,2 +1,3 @@
 bower_components
 .sass-cache
+node_modules

index.html

@@ -27,7 +27,7 @@
             </div>
             <div id="app3">
                 <p v-if="seen">This will be displayed if the seen data attribute of the Vue app evaluates to true</p>
-                <button v-on:click="seen = !seen">Toggle</button>
+                <button class="btn" v-on:click="seen = !seen">Toggle</button>
             </div>
             <div id="app4">
                 <ol>
@@ -38,7 +38,7 @@
             </div>
             <div id="app5">
                 <p>{{message}}</p>
-                <button v-on:click="reverseMessage">Reverse</button>
+                <button class="btn" v-on:click="reverseMessage">Reverse</button>
             </div>
             <div id="app6">
                 <p>{{message}}</p>
@@ -49,15 +49,6 @@
                     <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
                 </ol>
             </div>
-            <div id="form-wrapper">
-                  <form action="get">
-                          <label for="email">Email:
-                                  <input type="email" name="email" placeholder="dirp@email.com">
-                          </label>
-                          <input type="submit" value="Sign me up">
-                  </form>
-              <legend>
-            </div>
             <div>
               <img src="http://placehold.it/320x240" alt="placeholder">
             </div>
@@ -67,9 +58,29 @@
                 <li v-for="user in users">{{user.name}}</li>
               </ul>
             </div>
+            <div id="app9">
+              <form v-on:submit.prevent="onSubmit">
+                <label for="first">First
+                  <input type="text" name="first" v-model="person.first" required>
+                </label>
+                <label for="last">Last
+                  <input type="text" name="last" v-model="person.last" required>
+                </label>
+                <label for="tel">Telephone
+                  <input type="tel" name="tel" v-model="person.tel" v-mask="'(999) 999-9999'">
+                </label>
+                <label for="email">Email
+                  <input type="email" name="tel" v-model="person.email">
+                </label>
+                <input class="btn" type="submit" name="submit" >
+              </form>
+            </div>
         </main>
         <footer></footer>
         <!--<script type="application/javascript" src="js/vue.js"></script>-->
+        <script src="node_modules/inputmask/dist/inputmask/dependencyLibs/inputmask.dependencyLib.js"></script>
+        <script src="node_modules/inputmask/dist/inputmask/inputmask.js"></script>
+        <script src="node_modules/vue-inputmask/dist/vue-inputmask-browser.js"></script>
         <script type="application/javascript" src="js/app.js"></script>
     </body>
 </html>

js/app.js

@@ -1,3 +1,4 @@
+Vue.use(VueInputmask)
 
 var app = new Vue(
     {
@@ -127,3 +128,21 @@ var app8 = new Vue(
 
   }
 );
+
+
+let app9 = new Vue({
+  el: "#app9",
+  data: {
+    person:{
+      first: null,
+      last: null,
+      tel: null,
+      email: null,
+    }
+  },
+  methods: {
+    onSubmit(){
+      console.log(JSON.stringify(this.person));
+    }
+  }
+});

scss/app.scss

@@ -33,8 +33,31 @@ input {
     display: block;
 		margin-bottom: .67em;
 		padding-left: .67em;
+		padding: 5px;
+		font-size: 1rem;
 }
 
 select {
 	margin-bottom: .67em;
 }
+
+.btn {
+	padding: 10px 15px 10px 15px;
+	background-color: $primary-color;
+	border-radius: 3px;
+	color: $white;
+	border: none;
+
+	&:hover {
+
+		background-color: lighten($primary-color, 20%);
+		transition: all 300ms ease-in-out;
+
+		&:active{
+			transition: transform 300ms ease;
+			transform: scale(1.1);
+		}
+
+	}
+
+}