Vue

VueJS2: Assignment 4

by Aubrey Taylor

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="effects"></div>
  </div>
  <!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
  <div :class="[textRed, textBold]">Much class!</div>
  <!-- 3) Let the user enter a class (create some example classes) and attach it -->
  <div>
    <input type="text" v-model="input1">
    <div :class="input1"></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="input2"><br>
    <label>Make me disappear?</label><br>
    <input type="text" v-model="input3">
    <div class="square" :class="[input2, {disappear:disappear}]"></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="input4">
    <div class="square" :style="input4"></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" :style="progressWidth"></div>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica, sans-serif;
}

#exercise {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

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

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

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

.text--red {
  color: red;
}

.text--bold {
  font-weight: 800;
}

.square {
   width: 50px;
   height: 50px;
   background: blue;
   opacity: 1;
   transition: opacity 0.3s ease-out;
}

.square--green {
  background: green;
}

.square--red {
  background: red;
  opacity: 1;
}

.disappear {
  opacity: 0;
}

.progress-bar {
  background: yellow;
  height: 50px;
  width: 0;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: '#exercise',
  data: {
  	shrink: true,
    highlight: false,
    textBold: "text--bold",
    textRed: "text--red",
    input1: "square",
    input2: "square--green",
    input3: "",
    input4: "",
    progress: 0,
    progressId: false,
  },
  computed: {
  	effects: function() {
    	return {
      	shrink: this.shrink,
        highlight: this.highlight,
      }
    },
    disappear: function() {
    	if(this.input3 == "true") return true;
      if(this.input3 == "false") return false;
    },
    progressWidth: function() {
    	return {width: this.progress + "%"};
    }
  },
  methods: {
    startEffect: function(event) {
    	setInterval(this.toggleEffects.bind(this), 500);
    },
    toggleEffects: function() {
    	this.shrink = !this.shrink;
      this.highlight = !this.highlight;
    },
    startProgress: function(event) {
    	this.progressId = setInterval(() => {
      	if(this.progress < 100) {
        	this.progress += 0.25;
        }else{
        	clearInterval(this.progressId);
          this.progressId = false;
        }
      }, 10);
    },
  }
});