v1

Laoujin · Laoujin · commit 5519b4dd689f · 2019-03-24T16:27:57.000+01:00
diff --git a/01-HelloWorld/01-Socks.html b/01-HelloWorld/01-Socks.html
@@ -0,0 +1,101 @@
+<!-- https://www.vuemastery.com -->
+<html>
+  <head>
+    <script src="https://unpkg.com/vue"></script>
+    <link href="./assets/style.css" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
+  </head>
+  <body>
+    <div id="app">
+      <div class="nav-bar"></div>
+      <div class="product">
+        <div class="product-image">
+          <img v-bind:src="image" :title="imageTitle">
+          <!-- Attribute Shorthands -->
+          <!-- :src, :alt, :title, :class, :style, :disabled -->
+        </div>
+
+        <div class="product-info">
+            <!-- Binding -->
+            <h1>{{ product }}</h1>
+
+
+            <!-- Conditionals -->
+            <div>
+              <!-- Falsey will not include in DOM -->
+              <p v-if="inventory > 10">In Stock</p>
+              <p v-else-if="inventory">Almost sold out</p>
+              <p v-else>Out of Stock</p>
+
+              <!-- Render with display: none -->
+              <p v-show="inventory < 0">Wuuk?</p>
+            </div>
+
+
+            <!-- Events -->
+            <button
+              v-on:click="cart++; inventory--"
+              :disabled="!inventory"
+              :class="{disabledButton: inventory ? false : true}"
+            >
+              <!-- Method: addToCart -->
+              Add to Cart
+            </button>
+
+            <div class="cart">
+              {{cart}}
+              <i class="fas fa-shopping-cart"></i>
+            </div>
+
+
+            <!-- Loops -->
+            <div v-for="variant in variants"
+                 :key="variant.id"
+                 class="color-box"
+                 :style="{backgroundColor: variant.color}"
+                 @mouseover="setImage(variant.color)">
+              </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+
+
+<script type="text/javascript">
+  const app = new Vue({
+    el: '#app',
+    data: {
+      product: 'Socks',
+      image: './assets/socks-green.jpg',
+      imageTitle: 'Green Socks',
+      variants: [
+        {id: 1, color: 'green'},
+        {id: 2, color: 'blue'}
+      ],
+      inventory: 3,
+      cart: 0
+    },
+    methods: {
+      addToCart() {
+        this.cart++;
+        this.inventory--;
+      },
+      setImage(color) {
+        console.log('Vue object with data and methods', this);
+        this.image = `./assets/socks-${color}.jpg`;
+      }
+    },
+    computed: {
+      title() {
+        // Return values are cached
+        return this.product.toUpperCase();
+      }
+    }
+  });
+  console.log('Modify data directly from the console with `app.product = "Shoes";`');
+</script>
+
+
+<!-- livereload -->
+<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
diff --git a/01-HelloWorld/HelloWorld.html b/01-HelloWorld/HelloWorld.html
diff --git a/01-HelloWorld/assets/style.css b/01-HelloWorld/assets/style.css
@@ -7,13 +7,12 @@ body {
   .nav-bar {
     background: linear-gradient(-90deg, #84CF6A, #16C0B0);
     height: 60px;
-    margin-bottom: 15px;
   }
 
   .product {
     display: flex;
     flex-flow: wrap;
-    padding: 1rem;
+    padding: 0rem 1rem;
   }
 
   img {
@@ -38,16 +37,24 @@ body {
     height: 40px;
     margin-top: 5px;
   }
+
+  .active {
+    border: 2px solid black;
+  }
   
   .cart {
-    margin-right: 25px;
-    float: right;
+    position: absolute;
     border: 1px solid #d8d8d8;
-    padding: 5px 20px;
+    padding: 11px 15px;
+    top: 8px;
+    right: 13px;
+    color: royalblue;
+    background-color: antiquewhite;
   }
   
   button {
-    margin-top: 30px;
+    margin-top: -95px;
+    float: right;
     border: none;
     background-color: #1E95EA;
     color: white;
