JSFiddle - React, Tailwind, and code Playground

by Sergio Kagiema

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div class="wrapper" id="exercise">
  
  <!-- Exercise 1 --> 
  <p>"Vue is pretty cool" - said: {{ name }}, age: {{ age }}</p>
  
  <!-- Exercise 2 -->
  <p>{{ age * 3 }}</p>
  
  <!-- Exercise 3 -->
  <p>RANDOM NUMBER BETWEEN 0 AND 1: {{ random }} </p>
  
  <!-- Exercise 4 -->
  <div class="img-container">
    <img v-bind:src="img_src" alt="">
  </div>
  
  <!-- Exercise 5 -->
  <div class="form-control-container">
    <input type="text" class="form-control" v-model="name">
  </div>
  
  <!-- testin area -->
  <div>
    <span class="test">
      {{ test() }}
    </span>
  </div>
  
  <input type="checkbox" id="checkbx" class="check-box" v-model="checked">
  <p>The checkbox is {{ checked? 'checked' : 'not checked' }}</p>
  
</div>

CSS

img {
  max-width: 100%;
  height: auto;
}

JavaScript

var app = new Vue({
	el: "#exercise",
  data: {
  	name: 'Serge Kagiema',
    age: 29,
    img_src: "https://i.ytimg.com/vi/Joq-_nMWK3Q/maxresdefault.jpg",
    checked: false
  },
  methods: {
  	test: function() {
    	return 'testing this'
    }
  },
  computed: {
  	random: function () {
    	return Math.random();
    }
  }
 
});

console.clear();
console.log(app)