VueJS Exercise 4

by Rushan Sakhibgareev

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="currentClass"></div>
  </div>
  <!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
  <div v-bind:class="['redFont', 'shaddow']" >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="classEx3">
    <div :class="classEx3"></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="classEx4">
    <input type="text" v-model="applyClass">
    <div :class="compClassEx4">
    <p>
    {{compClassEx4}}
    </p>
    </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="style5">
    <div class="blueCube" :style="{'background-color': style5}"></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="progressBar"
       :style="{
       'width': width*4 +'px'
     }"
     >
       <p  style="text-align:center">
       {{this.width}}%
       </p>
     </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;
}

.redFont {
  color: red;
  text-align: center;
}

.shaddow {
  text-shadow: 3px 2px black;
}

.redCube {
  background-color: red;
  width: 100px;
  height: 100px;
}

.blueCube {
  background-color: blue;
  width: 100px;
  height: 100px;
}

.progressBar {
  background-color: green;
  height: 15px;
  width: 5px;
}

Vue

new Vue({
  el: '#exercise',
  data() {
    return {
        isHighlight: true,
        activeClass: 'active',
        errorClass: 'text-danger',
        classEx3: '',
        classEx4: '',
        applyClass: 'true',
        style5: '',
        width: 5
    }
  },
  watch:{

  },
  computed: {
       currentClass(){
          return this.isHighlight ? 'highlight' : 'shrink'
       },
       isClass(){
           return (this.applyClass==='true');
       },
       compClassEx4(){
          return this.isClass ? this.classEx4 : '';
          
       },       
  },
  methods: {
    startEffect() {
       setInterval(()=>{
          this.isHighlight = !this.isHighlight;
       },1000)   
    },
    startProgress() {
       setInterval(()=>{
       if (this.width<100)
          this.width = this.width+1;
       },500)   
    }
  }
});