jjs15102 · jjs15102 · Apr 30, 2020 · Apr 30, 2020
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,10 +7,15 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "bootstrap": "^4.4.1",
+    "bootstrap-vue": "^2.13.0",
     "core-js": "^3.6.4",
     "firebase": "^7.13.1",
     "firebaseui": "^4.5.0",
+    "jquery": "^3.5.0",
+    "popper.js": "^1.16.1",
     "vue": "^2.6.11",
+    "vue-resource": "^1.5.1",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"
   },

diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link href="https://fonts.googleapis.com/css?family=Vollkorn:400,400i,700,900&display=swap" rel="stylesheet">
     <title>web-three-twitter-boilerplate</title>
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -11,6 +11,12 @@
 </template>
 
 <script>
+import Vue from 'vue'
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+Vue.use(BootstrapVue)
+Vue.use(IconsPlugin)
+
+import addBark from './components/addBark.vue';
 
 export default {
   name: 'app',
@@ -26,6 +32,7 @@ export default {
 </script>
 
 <style lang="scss">
+
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -39,7 +46,7 @@ export default {
     font-weight: bold;
     color: #2c3e50;
     &.router-link-exact-active {
-      color: #42b983;
+      color: #0d5c9c;
     }
   }
 }

diff --git a/src/assets/app.scss b/src/assets/app.scss
@@ -0,0 +1,7 @@
+@import 'node_modules/bootstrap/scss/bootstrap';
+@import 'node_modules/bootstrap-vue/src/index.scss';
+
+
+.motherfont {
+    font-family: 'Vollkorn', serif;
+}
diff --git a/src/assets/dog.png b/src/assets/dog.png
diff --git a/src/assets/dogbark.png b/src/assets/dogbark.png
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/components/addBark.vue b/src/components/addBark.vue
@@ -0,0 +1,65 @@
+<template>
+    <div class="motherfont" id="add-bark">
+        <h2>Compose a Bark</h2>
+        <form v-if="!submitted">
+            <input type="text" placeholder="Write your Bark here..." v-model.lazy="bark.content" required />
+            <button @click.prevent="post" once>Add Bark</button>
+        </form>
+        <div v-if="submitted">
+            <h3>Thanks for adding your post</h3>
+        </div>
+    </div>
+</template>
+
+<script>
+// Imports
+export default {
+    data () {
+        return {
+            bark: {
+                content: '',
+            },
+            submitted: false
+        }
+    },
+    methods: {
+    post(){
+        db.collection('barks').add({
+          user: this.$store.state.user, // object with: { uid, displayName, photoURL, email, phoneNumber }
+          content:this.bark.content,
+          createdAt: new Date()
+    
+        })
+        this.content=null;
+        // Update the list
+        this.display();
+    }
+    }
+}
+      
+    //     post: function(){
+    //         this.$http.post('https://dmd4470-50f92.firebaseio.com/tweets.json',this.bark).then(function(data){
+    //             console.log(data);
+    //             this.submitted = true;
+    //         });
+    //     }
+    // }
+</script>
+
+<style scoped>
+#add-blog *{
+    box-sizing: border-box;
+}
+#add-blog{
+    margin: 20px auto;
+    max-width: 500px;
+}
+label{
+    display: block;
+    margin: 20px 0 10px;
+}
+input[type="text"], textarea{
+    display: block;
+    width: 100%;
+    padding: 8px;
+}
diff --git a/src/main.js b/src/main.js
@@ -1,10 +1,16 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
 
-import firebase from '@/plugins/firebase-init'
-import ui from '@/plugins/firebaseui-init'
+import VueResource from'vue-resource'
+Vue.use(VueResource);
+
+import firebase from '@/plugins/firebase-init';
+import ui from '@/plugins/firebaseui-init';
+
+import 'bootstrap';
+import './assets/app.scss';
 
 Vue.config.productionTip = false;
 

diff --git a/src/views/About.vue b/src/views/About.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h1 class="motherfont">Welcome to the Dog Park, Where anyone can Bark!</h1>
+    <b-button variant="outline-primary">Boot</b-button>
+
+
   </div>
 </template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <img alt="Bark Logo" src="../assets/dog.png" width="200px">
+    <add-bark> </add-bark>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+
+import addBark from '@/components/addBark.vue';
 
 export default {
   name: 'home',
   components: {
-    HelloWorld
+    'add-bark':addBark
   },
   mounted() {
     // console.log(db);