src/App.vue

@@ -12,10 +12,3 @@ export default {
   }
 }
 </script>
-
-<style>
-* {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-}
-</style>

src/components/NoteList.vue

@@ -6,66 +6,22 @@
     v-model="content"
     rows="10"
   ></textarea>
-  <div
+  <div class="note" v-for="note in notes" :key="note.id">{{ note.text }}</div>
-    class="note"
-    v-for="note in notes"
-    :key="note.id"
-    :class="{ selected: note.id === current }"
-  >
-    <span class="noteid">#{{ note.id }}</span
-    >{{ note.text }}
-  </div>
 </template>
 
 <script>
 export default {
   data() {
     return {
-      notes: [
+      notes: [{ id: 1, text: 'This is a note' }],
-        { id: 0, text: 'This is a note' },
+      content: 'Start typing something…'
-        { id: 1, text: 'And another one.' }
-      ],
-      content: 'Start typing something…',
-      current: null
     }
   },
   methods: {
     addNote() {
-      this.notes.push({ id: this.notes.length + 1, text: this.content })
+      this.notes.push({ id: 2, text: this.content })
       this.content = ''
     }
-  },
-  computed: {},
-  mounted() {
-    document.addEventListener('keyup', e => {
-      console.log(e.code)
-      switch (e.code) {
-        case 'KeyJ':
-          // go down in the list, unless it's the last item
-          this.current =
-            this.current === null
-              ? 0
-              : this.notes[this.current + 1] === undefined
-              ? this.current
-              : this.current + 1
-          break
-        case 'KeyK':
-          // go up in the list, unless it's the first item
-          this.current =
-            this.current === null
-              ? 0
-              : this.notes[this.current - 1] === undefined
-              ? this.current
-              : this.current - 1
-          break
-        case 'Delete':
-          alert(`Delete note #${this.current}?`)
-          break
-
-        default:
-          break
-      }
-    })
   }
 }
 </script>
@@ -83,22 +39,4 @@ textarea {
   padding: 5px;
   margin-bottom: 5px;
 }
-
-.selected {
-  border-style: dashed;
-  border-width: 1px;
-}
-
-.noteid {
-  background-color: slateblue;
-  color: white;
-  border-radius: 5px;
-  margin-right: 5px;
-  margin-bottom: 2px;
-  padding: 1px 15px;
-  font-size: 0.7rem;
-  display: block;
-  width: 15px;
-  font-family: monospace;
-}
 </style>

src/main.js

@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import { createApp } from "vue";
-import App from './App.vue'
+import App from "./App.vue";
 
-window.app = createApp(App).mount('#app')
+createApp(App).mount("#app");