CSS Assignment - Styling

by nevkatz

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>
    <p>
    Exercise 1: Press START EFFECT.
    </p>
    <button @click="startEffect">Start Effect</button>
    <div id="effect" :class="divClasses"></div>
  </div>
  <!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
  <p>
  Exercise 2: Look at the new properties.
  </p>
  <div id="got-class" :class="[textPosition,border1,background1,margin,padding]">I got class :)</div>
  <!-- 3) Let the user enter a class (create some example classes) and attach it -->
  <div>
  <p>
  Exercise 3: Type rotate, enlarge, or reduce.
  </p>
    <input type="text" v-model="transform">
    <div id="transformer" :class="[border2,padding,background2,transform]"></div>
  </div>
  <!-- 4) Let the user enter a class and enter true/ false for another class (create some example classes) and attach the classes -->
  <p>
  Exercise 4a: Add circle, oval, or square.
  </p>
  <div>
    <input type="text" v-model="shape">
    <p>
    Exercise 4b: Type 'true' or 'false.'
    </p>
    <input type="text" v-model="dark">
    <div class="margin-top" :class="[border2,padding,darkLight,shape]"></div>
  </div>
  <!-- 5) Repeat 3) but now with values for styles (instead of class names). Attach the respective styles.  -->
    <p>
    Exercise 5: Type a color, rgba code, or hex code.
    </p>
  <div>
    <input type="text" v-model="inputColor">
    <div :class="[border2,padding]" :style="styleInput"></div>
  </div>
  <!-- 6) Create a simple progress bar with setInterval and style bindings. Start it by hitting the below button. -->
  <p>
  Exercise 6: Click START PROGRESS.
  </p>
  <div>
    <button @click="startProgress">Start Progress</button>
    <div class="progress-container">
      <div...

CSS

body {
  font-family: Calibri, Verdana; 
 } 
 p {
   font-size: 12px;
 }
#effect {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
#transformer  {
  transition: 0.4s ease;
}
.margin-top {
  margin-top: 10px;
}
.highlight {
  background-color: red;
  width: 200px !important;
}

.shrink {
  background-color: gray;
  width: 50px !important;
}
.thick-light-border {
  border: 4px solid dodgerblue;
}
.thick-dark-border {
  border: 2px solid purple;
}
.nice-padding {
  padding: 20px;
  min-height: 20px;
}

.space-vertical {
  margin-top: 20px;
  margin-bottom: 20px;
}
.light-greyness {
  background-color: #CCC
}
.centerme {
  text-align: center;
}
.rotate {
  transform: rotate(90deg);
}
.enlarge {
  transform: scale(2);
}
.reduce {
  transform: scale(0.5);
}
.orange {
  background-color: #f06d06;
}
.square {
  width: 20px;
  padding: 20px;
  height: 20px;
}
.circle {
  width: 20px;
  border-radius: 60px;
  padding: 20px;
}
.oval {
  width: 60px;
  height: 30px;
  border-radius: 50%;
}
.dark {
  background-color: #000;
}

.progress-container {
  margin-top: 10px;
  height: 14px;
  border: 1px solid navy;
  width: 100%;
}
.progress-bar {
  height: 14px;
}

JavaScript

new Vue({
   el:'#exercise',
   data:{
       highlight:false,
       shrink:false,
       border1:'thick-light-border',
       border2:'thick-dark-border',
       padding:'nice-padding',
       background1:'light-greyness',
       background2:'orange',
       margin: 'space-vertical',
       textPosition: 'centerme',
       transform:'none',
       dark:'false',
       shape:'square',
       inputColor:'#b8dada',
       progressWidth:0,
       progressColor:'green'
   },
   methods:{
     startEffect:function() {
       this.highlight = true;
       this.shrink = false;
       var obj = this;
       window.setInterval(function(){
          obj.highlight = !obj.highlight;
          obj.shrink = !obj.shrink;
       },1000);
     },
     startProgress:function(){
      this.progressWidth = 0;
      this.progressColor = 'green';
       var obj = this;
       var q = window.setInterval(function(){
         if (obj.progressWidth < 100) {
           obj.progressWidth += 1;
         }
         else {
           obj.progressColor = 'dodgerblue';
           window.clearInterval(q);
         }
       }, 10);
     }
   },
   computed:{
     divClasses:function() {
     // using a closure-like return statement
       return {
           highlight: this.highlight,
           shrink: this.shrink
       }
     },
     darkLight:function() {
         return {
            dark: (this.dark == 'true') ? true : false
         }
     },
     styleInput:function(){
         return {
           backgroundColor: this.inputColor
         }
     },
     calcProgressProps:function(){
         return {
            width: this.progressWidth + '%',
            backgroundColor: this.progressColor
         }
     }
   }

})