diff --git a/basics-assignment-2-problem/app.js b/basics-assignment-2-problem/app.js
index e69de29..f1111ae 100644
--- a/basics-assignment-2-problem/app.js
+++ b/basics-assignment-2-problem/app.js
@@ -0,0 +1,23 @@
+"use strict";
+
+const app = Vue.createApp({
+    data() {
+        return {
+            firstInputValue: "",
+            secondInputValue: "",
+        };
+    },
+    methods: {
+        showAlert() {
+            alert("Some alert");
+        },
+        updateFirstOutput(event) {
+            this.firstInputValue = event.target.value;
+        },
+        updateSecondOutput(event) {
+            this.secondInputValue = event.target.value;
+        },
+    },
+});
+
+app.mount("#assignment");
diff --git a/basics-assignment-2-problem/index.html b/basics-assignment-2-problem/index.html
index fca1669..7f0e492 100644
--- a/basics-assignment-2-problem/index.html
+++ b/basics-assignment-2-problem/index.html
@@ -1,33 +1,33 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vue Basics</title>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
-      rel="stylesheet"
-    />
+    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="styles.css" />
     <script src="https://unpkg.com/vue@next" defer></script>
     <script src="app.js" defer></script>
-  </head>
-  <body>
+</head>
+
+<body>
     <header>
-      <h1>Events</h1>
+        <h1>Events</h1>
     </header>
     <section id="assignment">
-      <h2>Event Practice</h2>
-      <!-- 1) Show an alert (any text of your choice) when the button is pressed -->
-      <button>Show Alert</button>
-      <hr />
-      <!-- 2) Register the user input on "keydown" and output it in the paragraph (hint: event.target.value helps) -->
-      <input type="text" />
-      <p>OUTPUT</p>
-      <hr />
-      <!-- 3) Repeat 2) but only output the entered value if the ENTER key was pressed -->
-      <input type="text" />
-      <p>OUTPUT</p>
+        <h2>Event Practice</h2>
+        <!-- 1) Show an alert (any text of your choice) when the button is pressed -->
+        <button v-on:click="showAlert">Show Alert</button>
+        <hr />
+        <!-- 2) Register the user input on "keydown" and output it in the paragraph (hint: event.target.value helps) -->
+        <input type="text" v-on:keydown="updateFirstOutput" />
+        <p>{{ firstInputValue }}</p>
+        <hr />
+        <!-- 3) Repeat 2) but only output the entered value if the ENTER key was pressed -->
+        <input type="text" v-on:keydown.enter="updateSecondOutput" />
+        <p>{{ secondInputValue }}</p>
     </section>
-  </body>
+</body>
+
 </html>
