vue learning: assignment 4

styling

by giordanna

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" :disabled="effectActivated">Start Effect</button>
    <div id="effect" :class="effect"></div>
  </div>
  <!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
  <hr>
  <div :class="[{terminal: true}, {latte: false}, {volcano: true}]">I got no class :(</div>
  <!-- 3) Let the user enter a class (create some example classes) and attach it -->
  <div>
    <hr>
    <p>Use these classes: terminal, danger, success</p>
    <input type="text" v-model="userClass">
    <div :class="userClass">Lorem Ipsum</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>
    <hr>
    <p>Enter class: terminal</p>
    <input type="text" v-model="anotherUserClass">
    <p>Add another class?</p>
    <input type="radio" name="classToggle" v-model="classToggle" value="1"> Yes
    <input type="radio" name="classToggle" v-model="classToggle" checked value="0"> No
    <div :class="[anotherUserClass, { latte: classToggle == '1' }]">Lorem Ipsum</div>
  </div>
  <!-- 5) Repeat 3) but now with values for styles (instead of class names). Attach the respective styles.  -->
  <div>
    <hr>
    <p>Write the styling bellow:</p>
    <input type="text" v-model="userStyle">
    <div :style="userStyle">Lorem Ipsum</div>
  </div>
  <!-- 6) Create a simple progress bar with setInterval and style bindings. Start it by hitting the below button. -->
  <div>
    <hr>
    <button v-on:click="startProgress">Start Progress</button><br>
    <div :style="progress"></div><span> {{ progressWidth }}%</span>
  </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;
}

.terminal:before {
  content: 'me@udemy:~$ ';
  font: bold 16pt monospace;
}

.terminal {
  background-color: black;
  color: green;
  padding: 5px;
  font: bold 16pt monospace;
}

.terminal:after {
  content: ' █' ;
}

.latte {
  background-color: beige;
  color: chocolate;
  font: italic 16pt monospace;
}

.volcano {
  background-color: maroon;
  color: lightslategray;
  font: 16pt monospace;
}

.danger:before {
  content: '⚠ ';
}

.danger {
  background-color: salmon;
  color: darkred;
  font: bold 18pt sans-serif;
  padding: 10px;
  display: inline-block;
  border: 2px dashed darkred;
  border-radius: 10px;
}

.success:before {
  content: '✓ ';
}

.success {
  background-color: lightgreen;
  color: darkgreen;
  font: bold 18pt sans-serif;
  padding: 10px;
  display: inline-block;
  border-left: 5px solid darkgreen;
  border-bottom: 5px solid darkgreen;
  border-radius: 20px;
}

JavaScript

new Vue({
  el: '#exercise',
  data: {
    effectActivated: false,
    tick: false,
    userClass: '',
    userStyle: 'border: 2px solid black; color: blue; ',
    anotherUserClass: '',
    classToggle: "0",
    progressWidth: 0,
    inter: null
  },
  computed: {
    effect: function() {
      if (this.effectActivated) {
        return {
          highlight: this.tick,
          shrink: !this.tick
        }
      }
      return {};
    },
    progress: function() {
    var barColor = this.progressWidth > 50 ? "yellow" : "red";
    	if (this.progressWidth == 100) {
      	clearInterval(this.inter);
        barColor = "green";
      }
    	return {
      	border: "2px solid black",
      	backgroundColor: barColor,
        display: "inline-block",
        height: "20px",
        width: this.progressWidth + "px"
      }
    }
  },
  methods: {
    startEffect: function() {
      this.effectActivated = true;
      var that = this;
      setInterval(function() {
        that.tick = !that.tick;
      }, 1000);
    },
    startProgress: function() {
      var that = this;
      this.inter = setInterval(function() {
        that.progressWidth += 1;
      }, 100);
    }
  }
});