v Todo List

by Jay Angelo Valmocina

HTML

<div class="app">
  <div class="card">
  <h3>Todos</h3>
      <p v-for="todo in todos">
         <label>
            <input 
              @change="toggle(todo)"
              :checked="todo.done"
            type="checkbox">
             <del v-if="todo.done">
                 {{ todo.text }}
             </del>
                <span v-else>
                 {{ todo.text }}
              </span>
        </label>
      </p> 
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

CSS

@import url('https://fonts.googleapis.com/css?family=Raleway');
body{
  background-color: #2f3542;
  font-family: 'Raleway', sans-serif;
}

.card {
  background-color: white;
  border: 1pt solid #636e72;
  border-radius: 2pt;
  padding: 1.5em;
  margin: 1em;
}

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

input[type="checkbox"] {
  cursor: pointer;
  -moz-appearance:none;
   -webkit-appearance:none; 
}

JavaScript

new Vue({
		el: ".app",
    data: {
			 todos: [
       		{ text: "Go watch Netflix", done: false},
          { text: "Do collab coding", done: false },
          { text: "Take a walk", done: false},
       ]
    },
    methods: {
    	 toggle: function (todo){
         todo.done = !todo.done;
			}
		}
})