From 5af511bc874412bb30dccc7e18f52350ae0558f0 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Mon, 18 Jan 2021 22:36:41 +0100
Subject: [PATCH] lesson 32: dynamic styling

---
 basics-10-styling-starting-setup/app.js     | 23 +++++++++++++++++++++
 basics-10-styling-starting-setup/index.html |  6 +++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/basics-10-styling-starting-setup/app.js b/basics-10-styling-starting-setup/app.js
index 3918c74..f8abbdc 100644
--- a/basics-10-styling-starting-setup/app.js
+++ b/basics-10-styling-starting-setup/app.js
@@ -1 +1,24 @@
 "use strict";
+
+const app = Vue.createApp({
+    data() {
+        return {
+            boxASelected: false,
+            boxBSelected: false,
+            boxCSelected: false,
+        };
+    },
+    methods: {
+        boxSelected(box) {
+            if (box === "A") {
+                this.boxASelected = true;
+            } else if (box === "B") {
+                this.boxBSelected = true;
+            } else if (box === "C") {
+                this.boxCSelected = true;
+            }
+        },
+    },
+});
+
+app.mount("#styling");
diff --git a/basics-10-styling-starting-setup/index.html b/basics-10-styling-starting-setup/index.html
index 1e723fe..628b925 100644
--- a/basics-10-styling-starting-setup/index.html
+++ b/basics-10-styling-starting-setup/index.html
@@ -16,9 +16,9 @@
         <h1>Vue Dynamic Styling</h1>
     </header>
     <section id="styling">
-        <div class="demo"></div>
-        <div class="demo"></div>
-        <div class="demo"></div>
+        <div class="demo" :style="{borderColor: boxASelected ? 'red' : '#ccc'}" @click="boxSelected('A')"></div>
+        <div class="demo" @click="boxSelected('B')"></div>
+        <div class="demo" @click="boxSelected('C')"></div>
     </section>
 </body>