JSFiddle - React, Tailwind, and code Playground

by R3oLoN

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="classEffect"></div>
  </div>
  <!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
  <div>I got no class :(</div>
  <!-- 3) Let the user enter a class (create some example classes) and attach it -->
  <div>
    <input type="text">
    <div></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">
    <input type="text">
    <div></div>
  </div>
  <!-- 5) Repeat 3) but now with values for styles (instead of class names). Attach the respective styles.  -->
  <div>
    <input type="text">
    <div></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 class="progress bar" :style="progressStyle">{{ progress }}/100</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;
}
.progress.bar{
  display: block;
  border: 1px solid black;
  background-color: green;
  text-align: center;
}

JavaScript

new Vue({
  el: '#exercise',
  data: {
    classEffect: {
      highlight: true,
      shrink: false
    },
    progress: 0,
    progressInterval: null
  },
  methods: {
    startEffect: function() {
      setInterval(() => {
        this.classEffect.highlight = !this.classEffect.highlight
        this.classEffect.shrink = !this.classEffect.shrink
      }, 1000)
    },
    startProgress() {
      clearInterval(this.progressInterval)
			this.progressInterval = setInterval( () => {
      	this.progress++
        if(this.progress >= 100) {
        	clearInterval(this.progressInterval)
        }
      }, 100 )
    }
  },
  computed: {
  	progressStyle() {
    	return {
      	 width: `${this.progress}%`
      }
    }
  }
});