JSFiddle - React, Tailwind, and code Playground

Escersice 4 Complete

by Andres Abadia

HTML

<script src="https://cdn.jsdelivr.net/npm/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="effectClasses"></div>
  </div>
  <!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
  <div :class="[float, 'blue', 'text-color']">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 :class="[{visible:true}, userClass]"></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="userClass">
    <input type="text" v-model="isVisible">
    <div :class="[{visible:isVisible}, userClass]"></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="myStyle.backgroundColor">
    <div :style="myStyle"></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">
      <div class="progress":style="progressWidth">
      
      </div>
    </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;
}

.blue{
  background-color: lightblue;
}
.float{
  float:right;
}
.text-color{
  color: red;
}
.visible{
  width:100px;
  height: 50px;
}
.progress-bar{
  margin: 10px;
  width: 200px;
  height: 20px;
  border: 1px solid black;
}
.progress{
  background-color: grey;
  width:20px;
  height:20px;
}

JavaScript

new Vue({
  el: '#exercise',
    data: {
    	effectClasses: {
      	highlight:false,
        shrink:false
      },
      float:'float',
      userClass:'',
      isVisible: true,
      myStyle:{
      	width: '100px',
        height: '150px',
        backgroundColor: 'gray'
      },
      progressWidth:{
      	width: '50px'
      }
    },
  	methods:{
    	startEffect: function(){
      	var vm = this; 
        vm.effectClasses.highlight = !vm.effectClasses.highlight;
        setInterval(function(){
        	vm.effectClasses.highlight = !vm.effectClasses.highlight;
          vm.effectClasses.shrink = !vm.effectClasses.shrink;
        },1000);
      },
      startProgress:function(){
      	var vm = this;
        width=0;
        vm.progressWidth.width =width*10 + 'px';
        var id=setInterval(function(){
        	width++;
        	vm.progressWidth.width =width*10 + 'px';
          if(width==20){clearInterval(id);}
        },100);
      }
    }
  
});