Vue.js - exercise4

by hyeyoon

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="addClass"></div>
  </div>
  <!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
  <div :class="[{bigger: isActive}, {blue: isActive}]">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="bgColor">
    <div :class="bgColor" class="size"></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="selectClass">
    <input type="text" v-model="active">
    <div class="size" :class="[selectClass, {black: active}]"></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="setStyle.background">
    <div :style="setStyle"></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">
      <div class="progress" :style="progressBar"></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;
}

.bigger {
  font-size: 20px;
}

.blue {
  color: blue;
}
.size {
  width: 100px;
  height: 100px;
  background: #fff;
}
.red {
  background: red;
}
.black {
  background: black;
  width: 200px;
}
.progress {
  width: 200px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

JavaScript

new Vue({
  el: '#exercise',
  data: {
		addClass: {
    	highlight: true,
      shirink: false
    },
    isActive: true,
    bgColor: '',
    selectClass: '',
    active: true,
    setStyle: {
    	width: '200px',
      height: '100px',
      background: 'skyblue'
    },
    progressBar: {
    	background: 'blue',
      width: 0
    }
  },
  computed: {
  },
  methods: {
    startEffect: function() {
    	var vm = this;
      setInterval(function() {
      	vm.addClass.highlight = !vm.addClass.highlight;
        vm.addClass.shrink = !vm.addClass.shrink; 
      }, 1000)
    },
    startProgress: function() {
    	var vm = this;
      var width = 0;
      setInterval(function() {
      	width = width + 10;
        vm.progressBar.width = width + 'px';
      }, 500)
    }
  },
});