JSFiddle - React, Tailwind, and code Playground

by federico_alfaro

HTML

<div id="myID">
  <h2>Cosas que me cabrean:</h2>
  <ol>
    <li v-for="todo in todos">
      <label>
        <input type="input"
          v-on:change="toggle(todo);changeText(todo);contador += 1"
          v-on:click="toggle(todo);alertTroll(todo);contador += 1"
          v-on:mouseover="trollText(todo);contador += 1"
          v-on:keypress="trollText(todo);contador += 1"
          v-bind:checked="todo.done"
          >

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
  <div>
    <h1>
      Probando second div
    </h1>
  </div>
  
  
  <p><br>Me has tocado las narices {{ contador }} veces. Atrevete a dar al boton, listo<br></p>
  <button v-on:click="alertMultiple">Aquí valiente</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#myID {
  background: #ffff;
  border-radius: 40px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

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

Vue

new Vue({
  el: "#myID",
  data: {
    todos: [
      { text: "Que me pongas el raton encima", done: false },
      { text: "Que te pongas a escribar cosas", done: false },
      { text: "No mi toqe li botone", done: false },
      { text: "FFFFFFF", done: true }
    ],
    contador: 0
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
      //todo.done = false
    },
    changeText: function(todo){
    	todo.text = todo.text + '+'
    },
    trollText: function(todo){
    	todo.text = todo.text + ' NO TOCAR '
    },
    alertTroll: function(todo){
    	alert('Pero por qué tocas!!' + todo.text)
    },
    alertMultiple: function(){
    	for (i=1; i<this.contador; i++){
      	var z = this.contador - i
        if (z>1){alert("Te queda por hacer click " + z + ' veces')}
        else{alert('La ultima, pa que aprendas')}
      	
      }
    	
    }
  }
})