Add more styles to NoteList.

src/App.vue

@@ -12,3 +12,10 @@ 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,22 +6,66 @@
     v-model="content"
     rows="10"
   ></textarea>
-  <div class="note" v-for="note in notes" :key="note.id">{{ note.text }}</div>
+  <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: [{ id: 1, text: 'This is a note' }],
-      content: 'Start typing something…'
+      notes: [
+        { id: 0, text: 'This is a note' },
+        { id: 1, text: 'And another one.' }
+      ],
+      content: 'Start typing something…',
+      current: null
     }
   },
   methods: {
     addNote() {
-      this.notes.push({ id: 2, text: this.content })
+      this.notes.push({ id: this.notes.length + 1, 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>
@@ -39,4 +83,22 @@ 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 App from "./App.vue";
+import { createApp } from 'vue'
+import App from './App.vue'
 
-createApp(App).mount("#app");
+window.app = createApp(App).mount('#app')