Vue.js Eğitimi 02 Ödev 04 - Hocanın Çözümü

by Bilal AFSAR

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="exercise">
  <!-- 1) Efekti Butona basarak başlatın. Efekt "highlight" ve/veya "shrink" class'ları arasında değişmelidir. Bu değişim her bir interval döngüsünde olmalıdır. ("effect" id' li div'e o anki aktif olan class eklenecektir.) -->
  <div>
    <button @click="startEffect">Efekti Başlat!</button>
    <div id="effect" :class="updateEffectClass"></div>
  </div>
  <!-- 2) Birkaç tane CSS Class'ı üreterek bu Class'ları Array Syntax'ı ile aşağıdaki <div>' e ekleyiniz -->
  <div :class="['font', 'yellow']">Henüz bir class'ım yok :(</div>
  <!-- 3) Örnek birkaç tane Class üreterek (Ya da ürettiklerinizi kullanarak) <input> içerisine Class adı girerek hemen alttaki <div> elementine bu yazılan Class'ı eklemeyi yapınız. -->
  <div>
    <input type="text" v-model="myClass">
    <div :class="myClass">Deneme Yazısı...</div>
  </div>
  <!-- 4) Kullanıcının Class isimlerini girebileceği iki adet <input> elementimiz var. Bunları kullanarak hemen alttaki <div> elementinin Class'larini attached etmesini sağlayınız  -->
  <div>
    <input type="text" v-model="userClass">
    <input type="text" v-model="userClass2">
    <div :class="[userClass, userClass2]"> Soru 4</div>
  </div>
  <!-- 5) 3.Uygulamayı tekrarlayın. Fakat bu sefer Class Adı yerine Denk gelecek Style Kodlarını ekleyiniz.  -->
  <div>
    <input type="text" v-model="myStyle.backgroundColor">
    <div :style="myStyle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
  </div>
  <!-- 6) setInterval ve Style Binding kullanarak Basit bir progress bar üretin. Progress bar' ın çalışmasını buton'a basarak başlatın. -->
  <hr>
  <div>
    <button v-on:click="startProgress">Progress İşlemini Başlat!</button>
	<br><br>
    <div class="progress" :style="{width : progressWidth + 'px'}"></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;
}

.font{
	color : red;
	font-size: 20px;
}

.yellow {
	background-color : #fbbd08;
}

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

JavaScript

new Vue({
  el: '#exercise',
  data: {
	effectClass : false,
	myClass : "",
	userClass : "",
	userClass2 : "",
	myStyle : {
		width: "100px",
		height : "100px",
		backgroundColor : "red"
	},
	progressWidth : 0
  },
  methods: {
    startEffect: function() {
		var vm = this;
		
		setInterval(function(){
			vm.effectClass = !vm.effectClass;	
		}, 1000);
    },
	startProgress : function(){
		var vm = this;
		setInterval(function(){
			vm.progressWidth+=10;	
		}, 1000);
	}
  },
  computed : {
  	updateEffectClass : function(){
		return { 
			highlight : this.effectClass, 
			shrink : !this.effectClass
			}
	}
  }
});