JSFiddle - React, Tailwind, and code Playground

by octavioamu

HTML

<div id="exercise">
    <!-- 1) Show an alert when the Button gets clicked -->
    <div>
        <button v-on:click="alertMe">Show Alert</button>
    </div>
    <!-- 2) Listen to the "keydown" event and store the value in a data property (hint: event.target.value gives you the value) -->
    <div>
        <input type="text" v-model="value">
        <p>{{ value }}</p>

    </div>
    <!-- 3) Adjust the example from 2) to only fire if the "key down" is the ENTER key -->
    <div>
        <input type="text" v-on:keydown.enter="saveData">
        <p>{{ value }}</p>
    </div>
    <div>
      <button v-on:click="counter++">Increase</button>
      <button v-on:click="counter--">Decrease</button>
      <button v-on:click="secCounter++">Increase sec</button>
      <p>Counter: {{ counter }} | {{ secCounter }}</p>
      <p>Result: {{result()}} | {{ output }}</p>
    </div>
    
    <div>
      <div class="block" @click="redBlock = !redBlock" :class="divClasses"></div>
                      <input type="text" v-model="colorHexa">
      <div class="block" :style="{backgroundColor: colorHexa}"></div>
    </div>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="app.js"></script>

CSS

.block {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}

JavaScript

new Vue({
    el: '#exercise',
    data: {
        value: '',
        counter: 0,
        secCounter: 0,
        redBlock: false,
        colorHexa: ''
    },
		computed: {
    	output: function() {
	      return this.counter > 5 ? 'Greater 5': 'Smaller than 5'
      },
      divClasses : function () {
      	return {
        	red:this.redBlock,
          blue:!this.redBlock
        }
      
      }
    
    },
    methods: {
    		result() {
        	return this.counter > 5 ? 'Greater 5': 'Smaller than 5'
        },
        alertMe: function () {
            alert('test')
        },
        saveData: function (event) {
            this.value = event.target.value
        }
    }
});