JSFiddle - React, Tailwind, and code Playground

by Pedro Cruz

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" ref="effect" :class="effect ? 'highlight' : 'shrink'"></div>
  </div>
  <!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
  <div :class="['ihaveFirstCLass', 'nowIHadSecondOne']">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="classNames">
    <div class="cenas" :class="classNames"></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="classX">
    <input type="text" v-model="classY">
    <div :class="[classX, (classY == 'true' ? 'blue' : 'yellow')]"></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="color">
    <div :style="stylesForDiv"></div>
  </div>
  <!-- 6) Create a simple progress bar with setInterval and style bindings. Start it by hitting the below button. -->
  <div>
    <button @click="startProgress">Start Progress</button>
    <div class="progress" :style="progressBar"></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;
}

.cenas {
  background-color: yellow;
  width: 50px;
  height: 50px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
  width: 90px;
  height: 90px;
}

.yellow {
  background-color: yellow;
  width: 90px;
  height: 90px;
}

.progress {
  margin-top: 10px;
  width: 400px;
  height: 20px;
  background-color: pink;
  border: 1px solid black;
  transition: all 0.3s;
}

JavaScript

new Vue({
	el: '#exercise',
  data: {
  	effect: true,
    classNames: '',
    classX: '',
    classY: '',
    color: 'green',
    progressBar: {
    	width: '0px',
      backgroundColor: 'red'
    }
  },
  computed: {
  	stylesForDiv: function() {
    	const obj = {
    		width: 200 + 'px',
      	height: 200 + 'px',
        backgroundColor: this.color
      }
    	return obj
    }
  },
  methods: {
  	startEffect: function(){
    	var vm = this;
    	setInterval(function () {
      	var $el = document.getElementById('effect');
      	vm.effect = !vm.effect;
      	if(vm.effect){
        	$el.classList.toggle('highlight') 
        } else {
        	$el.classList.toggle('shrink')
        }
      }, 1000)
    },
    startProgress: function () {
    	var vm = this;
      var width = 0;
      setInterval(function(){
      	width = width + 10;
        if(vm.progressBar.width !== '100px'){
        	vm.progressBar.width = width + 'px' 
        }
      }, 500)
    }
  }
})