JSFiddle - React, Tailwind, and code Playground

by _SyLaR_

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"></div>
  </div>
  <!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
  <div :style="[cardDimensions, cardBorder, cardColors]">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="userClass">
    <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 :style="progressBarStyle"></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;
}

.cardDimensions {
  width: 150px;
  margin: 10px 0;
  padding: 10px;
}

.cardBorder {
  border: 1px solid #cccccc;
  border-radius: 5px;
}

.cardColors {
  background-color: #24292e;
  color: white;
  font-weight: bold;
}

.card {
  width: 150px;
  height: 20px;
  margin: 10px 0;
  border: 1px solid #eeeeee;
  border-radius: 5px;
  background-color: #cccccc;
}

JavaScript

new Vue({
  el: '#exercise',
  data: {
		effect: 'highlight',
    progressBarWidth: '0%'
  },
  computed: {
    cardDimensions: function() {
    	return {
      	width: '150px',
        margin: '10px 0',
        padding: '10px'
      }
    },
  	cardBorder: function() {
    	return {
      	border: '1px solid radius',
        borderRadius: '5px'
      }
    },
    cardColors: function() {
    	return {
      	backgroundColor: '@24292e',
        color: 'white',
        fontWeight: 'bold'
      }		
    },
    progressBarStyle: function() {
    	return {
      	width: this.progressBarWidth,
        height: '20px',
        margin: '5px 0',
        borderRadius: '5px',
       	backgroundColor: '#cccccc'
      }
    }
  },
  methods: {
    startEffect: function() {
    	var vm = this;
    	setInterval(function() {
        var isHighlight = vm.effect == 'highlight';
        console.log(isHighlight);
        vm.effect = 'shrink';
      }, 2000);
    },
    userClass:
    startProgress: function() {
    	var vm = this;
      var interval = setInterval(function() {
      	var min = 0;
        var max = 102;
        var diff = max - min;
        var progress = Math.floor(min + Math.random() * diff);
        min = progress;
        console.log(progress);
        if (progress >= 100) {
        	progress = 100;
        }
        vm.progressBarWidth = progress + '%';
        if (progress === 100) {
        	clearInterval(progress);
        }
      }, 2000);
    }
  } 
});