Classes exercise

Exercise 4 of the Udemy Vue course

by Nihar Raote

HTML

<div id="exercise">
  <button @click="startEffect">Start Effect</button>
  <div id="effect" :class="alternateClasses"></div>
  
  <div :class="[dangerClass, largeClass, shortClass]">I have no class</div>
  
  <div>
    <input @keydown.enter="doThis" v-model="nameOfClass" type="text">
    <div class="highlight" :class="nameOfClass"></div>
  </div>
  
  <button @click="beginProgress">Start Progress</button>
  <div class="progress-bar">
    <div class="progress"></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;
}

.danger {
  background-color: red;
  padding: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.large {
  width: 350px;
}

.short {
  height: 50px;
}

.progress-bar {
  width: 400px;
  height: 20px;
  border: 1px solid black;
}

.progress {
  width: 0;
  height: 20px;
  background-color: green;
}

Vue

new Vue({
	el: '#exercise',
  data: {
  	alternateClasses: {
    	highlight: true,
      shrink: false
    },
    dangerClass: 'danger',
    largeClass: 'large',
    shortClass: 'short',
    nameOfClass: ''
  },
  methods: {
  	startEffect() {
    	let vm = this;
    	setInterval(() => {
      	vm.alternateClasses.highlight = !vm.alternateClasses.highlight;
        vm.alternateClasses.shrink = !vm.alternateClasses.shrink;
      },1000);
    },
    beginProgress() {
    	const progress = document.querySelector('.progress');
      let progressWidth = 0;
      let progressIncrement = setInterval(() => {
      	if(progressWidth < 100) {
        	progressWidth += 10;
          progress.style.width = `${progressWidth}%`;
        } else {
        	clearInterval(progressIncrement);
        }
      }, 100)
    }
  }
})