JSFiddle - React, Tailwind, and code Playground

by Pankaj Kargirwar

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="effectClass"></div>
  </div>
  <!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
  <div :class="[first, second]">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="myclass">
    <div :class="myclass"></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="cls1">
    <input type="text" v-model="attach">
    <div :class="[cls1, {c2: attach}]"></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="width">
    <div :style="{height: '10px', backgroundColor: 'blue', width: width + 'px'}"></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 :style="{height: '10px', backgroundColor: 'red', width: width + 'px'}"></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;
}

.first {
  background: black
}

.second {
  border: 2px solid red;
}

.c1 {
  width: 200px;
  height: 200px;
  background: gray;
  border: 5px solid green;
}

.c2 {
  width: 200px;
  height: 200px;
  background: blue;
}

JavaScript

new Vue({
  el: '#exercise',
  data: {
    effectClass: '',
    toggle: false,
    first: 'first',
    second: 'second',
    myclass: '',
    width: 10,
    attach: true,
    cls1: 'c1'
  },
  methods: {
    startEffect: function() {
      var ctx = this;
      this.effectClass = 'highlight';
      setInterval(function() {
        ctx.toggle ? (ctx.effectClass = 'highlight') : (ctx.effectClass = 'shrink');
        ctx.toggle = !ctx.toggle;
      }, 2000);
    },

    startProgress: function() {
      var ctx = this;
      var interval = setInterval(function() {
        if (ctx.width >= 200) {
          clearInterval(interval);
          return;
        }
        console.log(ctx.width);
        ctx.width += 5;
      }, 500)
    }
  }
});