TODO Vue Finished

TODO App using Vue.js

by Hugo Licon

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nes.css/1.0.0/css/nes.min.css">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<div id="app">
  <h1>TODOS</h1>
  <input type="text" class="nes-input" placeholder="Add todo..." v-on:keyup.enter="addTodo">     
    
  <ul>
    <li v-for="todo in todos" :key="todo.id" class="flex">
      <label>
        <input type="checkbox" class="nes-checkbox" v-model="todo.done">
        <span>&nbsp</span>
      </label>
      <del v-if="todo.done">{{ todo.text }}</del>
      <span v-else>{{ todo.text }}</span>
      <div class="space"></div>
      <button class="nes-btn is-error padding" v-on:click="removeTodo(todo.id)">X</button>
    </li>
  </ul>
</div>

CSS

html, body, pre, code, kbd, samp {
  font-family: "Press Start 2P";
}

body {
  background: #20262E;
  padding: 20px;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

.padding {
  padding: 1px 7px 2px;
}

.flex {
  display: flex;
}

.space {
  flex-grow: 1;
}

Vue

new Vue({
  el: "#app",
  data: {
  	todos: [{text: 'test', done: false, id: Date.now()}]
  },
  methods: {
  	addTodo({target}){
    	this.todos.push({text: target.value, done: false, id: Date.now()})
      target.value = ''
    },
    removeTodo(id) {
    	this.todos = this.todos.filter(todo => todo.id !== id)
    }
  }
})