JSFiddle - React, Tailwind, and code Playground

by aadil hasan

HTML

<script src="https://cdn.jsdelivr.net/npm/mini-js/build/mini.min.js"></script>
<h1>
 Mini JS - Two way data-inding example
</h1>
<hr>
</h1>
<div id="app1">

  <h3>
  {{best_framework}} is the best JS framework in the world
  </h3>
  <br>
  <input m-model="best_framework" placeholder="enter your favourite js framework name" />
  <br>
  <br>
  <br>
  
  <button m-on:click="change_best_framework()">
    Select any random framework
  </button>
 

</div>

JavaScript

var app = new Mini({
	el: '#app1',
  data: {
  
  best_framework: 'Vue',
  frameworks: ['angular', 'react', 'vue', 'amber', 'meteor']
  
  },
  methods: {
    
      change_best_framework: function(){
      
        var index = Math.ceil(Math.random()*4);
        this.best_framework = this.frameworks[index];
      
      }
    
    
    }
})