add my solution for assignment 3

basics-assignment-3-problem/app.js

@@ -0,0 +1,34 @@
+"use strict";
+
+const app = Vue.createApp({
+    data() {
+        return {
+            result: 0,
+        };
+    },
+    watch: {
+        result() {
+            const that = this;
+            setTimeout(function () {
+                that.result = 0;
+            }, 5000);
+        },
+    },
+    computed: {
+        status() {
+            if (this.result < 37) {
+                return "Not there yet";
+            }
+            if (this.result > 37) {
+                return "Too much!";
+            }
+        },
+    },
+    methods: {
+        increaseCounter(value) {
+            this.result += value;
+        },
+    },
+});
+
+app.mount("#assignment");

basics-assignment-3-problem/index.html

@@ -16,12 +16,13 @@
         <h1>Reactivity in Action</h1>
     </header>
     <section id="assignment">
-        <button>Add 5</button>
-        <button>Add 1</button>
+        <button @click="increaseCounter(5)">Add 5</button>
+        <button @click="increaseCounter(1)">Add 1</button>
         <!-- 1) Connect the buttons and calculate a value (a number) -->
         <!-- Show "Not there yet" until you reach a result of exactly 37 -->
         <!-- Show "Too much!" if the result is greater than 37 -->
-        <p>Result: RESULT</p>
+        <p>{{ status }}</p>
+        <p>Result: {{ result }}</p>
         <!-- 2) Watch for changes in "result" and reset the value to 0 after 5 seconds -->
     </section>
 </body>