added lesson 11 code

Shaun Pelling · Shaun Pelling · commit 64a1d6a4fcd7 · 2017-03-27T22:16:34.000+01:00
diff --git a/app.js b/app.js
@@ -1,18 +1,13 @@
 new Vue({
     el: '#vue-app',
     data: {
-        available: false,
-        nearby: false
+        error: false,
+        success: false
     },
     methods: {
 
     },
     computed: {
-        compClasses: function(){
-            return{
-                available: this.available,
-                nearby: this.nearby,
-            }
-        }
+
     }
 });
diff --git a/index.html b/index.html
@@ -8,17 +8,13 @@
     </head>
     <body>
         <div id="vue-app">
-            <h1>Dynamic CSS</h1>
-            <!-- <h2>Example 1</h2>
-            <div v-on:click="available = !available" v-bind:class="{available: available}">
-                <span>Ryu</span>
-            </div> -->
-            <h2>Example 2</h2>
-            <button v-on:click="nearby = !nearby">Toggle nearby</button>
-            <button v-on:click="available = !available">Toggle available</button>
-            <div v-bind:class="compClasses">
-                <span>Ryu</span>
-            </div>
+            <h1>Conditionals</h1>
+            <button v-on:click="error = !error">Toggle error</button>
+            <button v-on:click="success = !success">Toggle success</button>
+            <!--  <p v-if="error" class="error">There has been an error</p>
+            <p v-if="success" class="success">Whooo, success :)</p> -->
+            <p v-show="error" class="error">There has been an error</p>
+            <p v-show="success" class="success">Whooo, success :)</p>
         </div>
     </body>
 
diff --git a/styles.css b/styles.css
@@ -1,16 +1,11 @@
-span{
+.error{
     background: red;
-    display: inline-block;
     padding: 10px;
-    color: #fff;
-    margin: 10px 0;
+    color: white;
 }
 
-.available span{
+.success{
     background: green;
-}
-
-.nearby span:after{
-    content: "nearby";
-    margin-left: 10px;
+    padding: 10px;
+    color: white;
 }
