LOONgJ

index.html

<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="effect"></div>
  </div>
  <!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
  <div :class="classes">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="dynamic" placeholder="Enter 'red' or 'blue'">
    <div :class="dynamic">Dynamic class</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="dynamicClass" placeholder="Enter class">
    <input type="text" v-model="dynamicClassEnabled" placeholder="Do you need this enabled? (true/false)">
    <div :class="{ [dynamicClass]: dynamicClassEnabled === 'true' }">An example</div>
  </div>
  <!-- 5) Repeat 3) but now with values for styles (instead of class names). Attach the respective styles.  -->
  <div>
    <input v-model="fontSize" placeholder="Enter text size(e.g. 15px, 1rem etc.)" type="text">
    <div :style="{ fontSize: fontSize }">An example</div>
  </div>
  <!-- 6) Create a simple progress bar with setInterval and style bindings. Start it by hitting the below button. -->
  <div class="progress-bar-section">
    <button v-on:click="startProgress">Start Progress</button>
    <div class="progress-bar-wrapper">
    	<div :style="{ width: progress + 'px' }" class="progress-bar"></div>
    </div>
  </div>
</div>

loongj.markdown

LOONgJ

A Pen by Igor Lee on CodePen.

License.

script.js

new Vue({
  el: '#exercise',
  data: {
		effect: {
			shrink: false,
			highlight: false
		},
		classes: [ 'red', 'strong' ],
		dynamic: '',
		dynamicClass: '',
		dynamicClassEnabled: false,
		fontSize: '1rem',
		progress: 0
  },
  methods: {
    startEffect() {
			let tick = 0;
    	setInterval(() => {
				this.effect = {
					highlight: !!tick,
					shrink: !tick
				}
				tick = 1 - tick;
			}, 1000);
    },
		startProgress() {
			const total = document.querySelector('.progress-bar-wrapper').clientWidth;
			const part = total / 10;
			const id = setInterval(() => {
				if (Math.ceil(this.progress) < total) {
					this.progress += part;
				} else {
					clearInterval(id);
				}
			}, 600);
		}
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

style.scss

#effect {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.highlight {
  background-color: red;
  width: 200px !important;
}

.shrink {
  background-color: gray;
  width: 50px !important;
}

.red {
	color: red;
}

.blue {
	color: blue;
}

.strong {
	font-weight: 500;
}

.progress-bar-section {
	padding: 8px;
}

.progress-bar-wrapper {
	width: 100%;
	height: 36px;
	background-color: #eee;
}

.progress-bar {
	height: 100%;
	width: 0;
  background-color: #f55;
	transition: width 300ms ease-in
}