JSFiddle - React, Tailwind, and code Playground

by Serghei Cebotari

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>


<div id="exercise">
  <div>
    <button @click="startEffect">Start Effect</button>
    <div id="effect" :class="activeEffectClass"></div>
  </div>
  <div class="box" :class="[secondClass, secondDynamicClass]"></div>
  <div>
    <input type="text" v-model:value="thirdClass">
    <div class="box" :class="thirdClass"></div>
  </div>
  <div>
    <input type="text" v-model:value="fourthClass">
    <input type="text" v-model:value="fourthIsBordered">
    <div class="box" :class="[fourthClass, fourthBorderedClass]"></div>
  </div>
  <div>
    <input type="text" v-model:value="fifthBackgroundColor">
    <div class="box" :style="fifthStyle"></div>
  </div>
  <div>
    <button v-on:click="startProgress">Start Progress</button>
    <div class="progress-wrapper">
      <div class="progress" :style="{width: progressValue + 'px'}">
      </div>
    </div>
  </div>
</div>

CSS

#effect {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.highlight {
  background-color: red;
  width: 200px !important;
}

.shrink {
  background-color: gray;
  width: 50px !important;
}


.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: gold;
}
.circle--highlighted {
  background-color: yellow;
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.blue-background {
  background-color: blue;
}
.red-background {
  background-color: red;
}
.pink-background {
  background-color: pink;
}
.bordered {
  border: 5px solid black;
}

.progress-wrapper {
  width: 100px;
  height: 20px;
  border: 1px solid green;
}
.progress {
  height: 100%;
  background: yellow;
}

JavaScript

new Vue({
  el: '#exercise',
  data: {
    activeEffectClass: '',
    secondClass: 'circle',
    thirdClass: 'blue-background',
    fourthClass: 'pink-background',
    fourthIsBordered: 'false',
    fifthBackgroundColor: 'red',
    progressValue: 0
  },
  methods: {
    startEffect: function() {
      var vm = this;
      setInterval(function() {
        vm.activeEffectClass = vm.activeEffectClass === 'highlight' ? 'shrink' : 'highlight';
      }, 100);
    },
    startProgress: function() {
    	var vm = this;
    	setInterval(function() {
      	vm.progressValue = vm.progressValue === 100 ? 0 : (vm.progressValue + 5);
      }, 200);
    }
  },
  computed: {
  	secondDynamicClass: function() {
    	return {
      	'circle--highlighted': this.activeEffectClass === 'highlight'
      };
    },
    fourthBorderedClass: function() {
    	return {
      	bordered: this.fourthIsBordered !== 'false'
      };
    },
    fifthStyle: function() {
    	return {
      	backgroundColor: this.fifthBackgroundColor
      }
    }
  }
});