JSFiddle - React, Tailwind, and code Playground

by jasonblewis

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.css" integrity="sha256-PELQzdZwUQw2WSX3q4QLMSzDqQyWrmrXODp2bZy6JOU=" crossorigin="anonymous" />

	<div id="root" class="column is-half is-offset-one-quarter has-text-centered">
	    <h1 class="title is-1">{{ title }}</h1>
	    <div>
	      <button class="button is-large"
                      :class="{ 'is-danger is-active': activeNote == note,
                                'is-warning': lastNote == note  && activeNote == undefined}"
                      v-for="note in notes"
                      v-text="note"
                      v-on:click="playNote($event,note)"></button>
	    </div>
	    <div>
		<button class="button is-large is-primary" v-on:click="playNextNote($event)">Next</button>
	    </div>
	    <div>
	      <button class="button is-large is-primary"
                      :class="{ 'is-active': activeNote != undefined }"
                      v-on:click="togglePlaying($event)">{{ activeNote ? 'Stop' : 'Start' }}</button>
	    </div>
	    currently playing {{ activeNote }}

	</div>
	<script src="https://vuejs.org/js/vue.js"></script>
	<script>
	 var app = new Vue({
	   el: '#root',
	   data: {
	     notes: ['G','C','E','A'],
	     title: "Ukulele Tuner",
	     activeNote: undefined,
	     lastNote: undefined,
	   },
	   methods: {
             nextNote: function(note) {
               if (typeof note == 'undefine') {
                 return this.notes[0];
               } else {
                 return this.notes[(this.notes.indexOf(note)+1) % this.notes.length];
               }
             },
	     playNote: function(event,note) {
               this.lastNote = this.activeNote;
	       this.activeNote = note;
	     },
	     playNextNote: function(event) {
               console.log("0activenote",typeof this.activeNote, "lastnote",typeof...