Compare commits

..

4 Commits

3 changed files with 76 additions and 7 deletions

View File

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

View File

@ -6,22 +6,66 @@
v-model="content" v-model="content"
rows="10" rows="10"
></textarea> ></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> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
notes: [{ id: 1, text: 'This is a note' }], notes: [
content: 'Start typing something…' { id: 0, text: 'This is a note' },
{ id: 1, text: 'And another one.' }
],
content: 'Start typing something…',
current: null
} }
}, },
methods: { methods: {
addNote() { addNote() {
this.notes.push({ id: 2, text: this.content }) this.notes.push({ id: this.notes.length + 1, text: this.content })
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> </script>
@ -39,4 +83,22 @@ textarea {
padding: 5px; padding: 5px;
margin-bottom: 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> </style>

View File

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