JSFiddle - React, Tailwind, and code Playground

Exercise 4

by Andres Abadia

HTML

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

<div id="exercise">
  <!-- 1) Start the Effect with the Button. The Effect should alternate the "highlight" or "shrink" class on each new setInterval tick (attach respective class to the div with id "effect" below) -->
  <div>
    <button @click="startEffect">Start Effect</button>
    <div id="effect" :class="divClass"></div>   
  </div>
  <!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
  <div :class="[bckColor, brdColor, brdRound]">I got no class :(</div>
  <!-- 3) Let the user enter a class (create some example classes) and attach it -->
  <div>
    <input type="text" v-model="inputClass">
    <div :class="inputClass">{{inputClass}}</div>
  </div>
  <!-- 4) Let the user enter a class and enter true/ false for another class (create some example classes) and attach the classes -->
  <div>
    <input type="text" v-model="userClass">
    <input type="text" v-model="trueFalse">
    <div :class="[userClass, inputClass, {brdColor:trueFalse=='true'}]">{{userClass}} - {{trueFalse}} - {{userClasses}} -- {{userTrueFalse}}</div>
  </div>
  <!-- 5) Repeat 3) but now with values for styles (instead of class names). Attach the respective styles.  -->
  <div>
    <input type="text" v-model="userStyleW">
    <div :style="[{height: userStyleH + 'px'}, {width: userStyleW + 'px'}, {backgroundColor: userStyleB}]">{{userStyleB}}</div>
  </div>
  <!-- 6) Create a simple progress bar with setInterval and style bindings. Start it by hitting the below button. -->
  <div>
    <!--
    <button v-on:click="startProgress">Start Progress</button>
    -->
    <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;
}

.bckColor{
  background: lightblue;
}
.brdColor{
  border: 2px solid #73AD21;
}
.brdRound{
  border-radius: 25px;
}
.widthC{  
  width: 200px;
}
.heightC{
  height: 50px;  
}
.paddingC{
  padding: 20px;  
}

JavaScript

new Vue({
  el: '#exercise',
    data: {
      alternate: false,
      divClass: '',
      bckColor:'bckColor',
      brdColor:'brdColor',
      brdRound:'brdRound',
      inputClass:'paddingC',
      trueFalse:true,
      userClass:'bckColor',
      userStyleW:100,
      userStyleH:100,
      userStyleB:'red'
    },
    methods: {
      startEffect: function(){
      	var vm = this;
        setInterval(function(){
          vm.alternate = !vm.alternate;
          vm.divClass = vm.alternate ? 'highlight' : 'shrink'
        	},500);
      	}      
    },
    
    watch: {
    	trueFalse: function(value){
      	this.userClass+=' heightC'
      }
    }
    
  
});