JSFiddle - React, Tailwind, and code Playground

by squarified

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="activeEffect"></div>
  </div>
  <!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
  <div :class="[fontWeight, { underline: true }]">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="activeClass">
    <div :class="[{ visibleDiv: true }, activeClass]"></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="activeClass">
    <input type="text" v-model="isVisible">
    <div :class="[{ visibleDiv: (isVisible === 'true')}, activeClass]"></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="activeStyle.backgroundColor">
    <div :style="activeStyle"></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 :style="progressBarStyle" :class="{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;
}

.font-weight {
  font-weight: bold;
}

.underline {
  text-decoration: underline;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.visibleDiv {
  width: 50px;
  height: 20px;
}

.progressBar {
  height: 20px;
  background-color: red;
}

JavaScript

new Vue({
  el: '#exercise',
  data: {
  	activeEffect: {
      highlight: false,
      shrink: false,
    },
    activeClass: '',
    activeClass2: '',
    isVisible: false,
    fontWeight: 'font-weight',
    underline: 'underline',
    activeStyle: {
    	backgroundColor: '',
      width: '50px',
  		height: '20px'
    },
    progressBarStyle: {
    	width: '0px'
    },
    progressBar: 'progressBar'
  },
  methods: {
    startEffect: function() {
    	const vm = this;
    	setInterval(function () {
      	vm.activeEffect.highlight = vm.activeEffect.shrink;
        vm.activeEffect.shrink = !vm.activeEffect.shrink;
      }, 2000);
    },
    startProgress: function () {
    	const vm = this;
      let width = 0;
    	setInterval(function () {
      	vm.progressBarStyle.width = Math.min(100, width += 5) + 'px';
      }, 2000);
    }
  }
});