JSFiddle - React, Tailwind, and code Playground

by inumaru

HTML

<div id="app">
  <h2>
  TodoList
  </h2>
  <ol>
    <li v-for = "item in items">
        <label>
            <input type="checkbox"
              v-on:change="toggle(item)"
              v-bind:checked="item.done">
            <del v-if="item.done">
              {{ item.text }}
            </del>
            <span v-else>
              {{ item.text }}
            </span>
        </label>
    </li>
  </ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

CSS

body {
  background: #2F1F2F;
  padding: 20px;
  font-family: Helvetica;
}
h2{
  background-color:#999;
  color:#222;
  font-size:38px;
}

h2:hover{
  background-color:#22E949;
  color:#2E1994;
  font-size:38px;
  opacity:.4;
}
li {
  margin: 8px 0;
  color:#FFFFFF
}
del{
    color: rgba(200,200,200, 0.9);
}

JavaScript

new Vue({
	el:'#app',
	  data: {
    items: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
      ]
    },
    methods: {
  	toggle: function(item){
    	item.done = !item.done
    }
  }
})