Adding media

index.html

@@ -15,26 +15,46 @@
     <div class="header">
         <div class="container">
             <div class="title">
-                <img src="public/logo.png">
-                <h1>Vue.js Poster Shop</h1>
+                <img src="public/knight1.jpg">
+                <h1>BJ's Vue.js Shop</h1>
             </div>
+            <form class="search-bar" v-on:submit.prevent="onSubmit">
+                <input type="text" placeholder="Search for books" required v-model="search">
+                <input type="submit" value="Search" class="btn">
+            </form>
         </div>
     </div>
     <div class="main container">
         <div class="products">
-            <p>Products go here.</p>
-        </div>
+                <div v-for="product in products" class="product" v-bind:key="product.id">
+                        <div>
+                            <h4 class="product-title">{{ product.title }}</h4>
+                            <button v-on:click="addToCart(product)" class="add-to-cart btn">Add to Cart</button>
+                        </div>
+                    </div>
         <div class="cart">
             <h2>Shopping Cart</h2>
-            <div>
-                Total: $0.00
+            <ul>
+                <li v-for="item in cart" v-bind:key="item.id" class="cart-item">
+                    <div class="item-title">{{ item.title }}</div>
+                    <span class="item-qty">{{ item.price  | currency }} x {{ item.qty}}</span>  
+                    <button class="btn" v-on:click="inc(item)">+</button>
+                    <button class="btn" v-on:click="dec(item)">-</button>
+                </li>
+            </ul>
+            <div v-if="cart.length">
+                <div class="cart-total">Total: {{ total | currency }}</div>
+            </div>
+            <div v-else class="empty-cart">
+                No items in the cart.
             </div>
         </div>
     </div>
 </div>
 
 <!-- Scripts -->
 <script src="/reload/reload.js"></script>
+<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
 <script type="text/javascript" src="public/script.js"></script>
 
 </body>

package.json

@@ -20,7 +20,8 @@
     "axios": "~0.18.0",
     "body-parser": "~1.18.3",
     "dotenv": "~6.0.0",
-    "express": "~4.16.4"
+    "express": "~4.16.4",
+    "vue": "^2.5.17"
   },
   "devDependencies": {
     "eslint": "~5.5.0",

public/script.js

@@ -1 +1,58 @@
-console.log("It works!");
+
+new Vue({
+    el: "#app",
+        data: {
+            total: 0,
+             products: [
+                { title: "Product 1", id: 1, price: 9.99},
+                { title: "Product 2", id: 2, price: 9.99},
+                { title: "Product 3", id: 3, price: 9.99}
+            ],
+            cart: [],
+            search: ""
+        },
+        methods: {
+            addToCart: function(product) {
+                this.total += product.price;
+                var found = false; /* under this condition the cart is able to increment product by adding 1 so only executes when false bool*/ 
+                for (var i=0;i<this.cart.length; i++) {/*to check if an item is already in the cart*/
+                    if (this.cart[i].id === product.id) {
+                        this.cart[i]/*to check if current item's id this.cart[i] is equivalent to the id of the product being added*/
+                            this.cart[i].qty++;/*starts if the cart id is equilivant to product id--increment product*/
+                            var found = true;/*if match found set found to true*/
+                }
+            }
+            if (!found) { /*in case product id does not match cart id*/
+                this.cart.push({
+                    id: product.id,
+                    title: product.title,
+                    price: product.price,
+                    qty: 1
+
+                });
+                 }
+                /**for the increment and decrement button of total items */
+            },
+            inc: function(item) {
+                item.qty++;
+                this.total += item.price;
+            },
+            dec: function(item) {
+                item.qty--;
+                this.total -= item.price;
+                if (item.qty <= 0) {
+                    var i = this.cart.indexOf(item);
+                    this.cart.splice(i,1);
+                }
+            },
+            onSubmit: function() {
+                console.log("Search");
+            }
+        },
+        /*capping the total price to 2 decimal points*/
+        filters: {
+            currency: function(price) {
+                return"$".concat(price.toFixed(2));
+            }
+        }
+});

public/style.css

@@ -79,7 +79,7 @@ body {
 
 .title > img {
     display: block;
-    height: 50px;
+    height: 110px;
 }
 
 .title > h1 {