From ed9332d98f3331297ed6d3b28588f542c85b302f Mon Sep 17 00:00:00 2001
From: mayowa-aji <majiboye@justworks.com>
Date: Tue, 5 Dec 2023 18:16:19 -0500
Subject: [PATCH 1/2] dec5

---
 index.html      | 26 +++++++++++++++++++++++++-
 playground.html | 47 ++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 71 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
index ee86e94f..703712a1 100644
--- a/index.html
+++ b/index.html
@@ -6,5 +6,29 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
   </head>
-  <body></body>
+  <body>
+    <div id="app">
+      <p>{{ message}}</p>
+      <ul>
+        <li v-for="character in listOfCharacters">{{character}}</li>
+      </ul>
+    </div>
+
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script>
+      const { createApp } = Vue
+
+      const app = createApp({
+        data() {
+          return {
+            message:"Super Mario Bros",
+            listOfCharacters: ["Mario", "Luigi", "Bowser", "Toad"]
+
+          }
+        }
+      })
+      app.mount('#app')
+    </script>
+
+  </body>
 </html>
diff --git a/playground.html b/playground.html
index 1fae24a7..1981be5a 100644
--- a/playground.html
+++ b/playground.html
@@ -6,5 +6,50 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Playground — Complete Intro to Vue 3</title>
   </head>
-  <body></body>
+  <body>
+    <h1>Hello Frontend Masters</h1>
+   <div id="app">
+    <hr/>
+    <h1>Counter</h1>
+    <p>{{count}}</p>
+    <button @click="incrementCount">Increment Count</button>
+    <div>
+      <label for="incrementAmount">Increment Count</label>
+      <input type="number" 
+        v-model.number="incrementAmount"/>
+    </div>
+  
+    <hr/>
+    <p v-if="message.length % 2 === 0">Even: {{message.toUpperCase()}}</p>
+    <p v-else>Odd: {{message}}</p>
+    <ul>
+      <li v-for="number in listofNumbers">{{number}}</li>
+    </ul>
+    
+   </div>
+
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script>
+      const {createApp} = Vue;
+
+      const app = createApp({
+        data() {
+          return {
+           count:10,
+           incrementAmount: 8,
+            message: 'Hello it works',
+            listofNumbers: [1,2,3,4,5]
+          }
+        },
+        methods:{
+          incrementCount(){
+            this.count+=this.incrementAmount
+          }
+        
+        }
+      })
+
+      app.mount('#app')
+    </script>
+  </body>
 </html>

From 182b4d4f5e6f44478961b8daf43197111bf7e038 Mon Sep 17 00:00:00 2001
From: mayowa-aji <majiboye@justworks.com>
Date: Wed, 20 Dec 2023 15:23:09 -0500
Subject: [PATCH 2/2] solution

---
 playground.html | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/playground.html b/playground.html
index 1981be5a..a5f02f3c 100644
--- a/playground.html
+++ b/playground.html
@@ -15,8 +15,7 @@ <h1>Counter</h1>
     <button @click="incrementCount">Increment Count</button>
     <div>
       <label for="incrementAmount">Increment Count</label>
-      <input type="number" 
-        v-model.number="incrementAmount"/>
+      <input type="number" v-model="incrementAmount"/>
     </div>
   
     <hr/>
@@ -43,10 +42,10 @@ <h1>Counter</h1>
         },
         methods:{
           incrementCount(){
-            this.count+=this.incrementAmount
+            this.count += this.incrementAmount
           }
-        
         }
+        
       })
 
       app.mount('#app')
